/* ═══════════════════════════════════════════════════════════════
   Shortix — UI Enhancements (SaaS-grade upgrade)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Extra CSS vars ─── */
:root {
  --gradient-primary: linear-gradient(135deg, #1a56db 0%, #2563EB 50%, #3b82f6 100%);
  --gradient-hero:    linear-gradient(140deg, #0a1628 0%, #0f2756 35%, #1740a8 65%, #2563eb 100%);
  --glow-accent:      0 0 20px rgba(37,99,235,.45), 0 0 60px rgba(37,99,235,.2);
  --glow-sm:          0 0 12px rgba(37,99,235,.35);
}
[data-theme="dark"] {
  --gradient-primary: linear-gradient(135deg, #1e40af 0%, #2563EB 50%, #3b82f6 100%);
  --gradient-hero:    linear-gradient(140deg, #020812 0%, #070e20 35%, #0c1d3d 65%, #111f4a 100%);
  --glow-accent:      0 0 24px rgba(59,130,246,.55), 0 0 70px rgba(59,130,246,.22);
}

/* ─────────────────────────────────────────
   HERO — Light clean background (no animations)
   ───────────────────────────────────────── */
.hero {
  background: #0d1b3e;
  position: relative;
  overflow: hidden;
  padding: 130px 24px 100px;
}

/* Subtle static gradient overlay */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 25% 40%,  rgba(59,130,246,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 80% 20%,  rgba(37,99,235,.14) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}

/* Subtle dot grid */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
}

/* Hide animated elements */
.hero-noise { display: none; }
.hero-blob  { display: none; }

/* Hero inner must be above layers */
.hero-inner { position: relative; z-index: 2; }

/* ─── Hero badge — enhanced ─── */
.hero-badge {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.88);
  padding: 7px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 12px rgba(37,99,235,.25);
  transition: background .2s;
}
.hero-badge:hover { background: rgba(255,255,255,.18); }

/* ─── Hero floating cards ─── */
.hero-floats {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin: 48px 0 52px;
  flex-wrap: wrap;
  position: relative;
}

.float-card {
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  height: 170px;
  min-height: 170px;
  max-height: 170px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.float-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 16px 48px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.2);
}
.float-card-1, .float-card-2, .float-card-3 { animation: none; }
.float-card:hover { animation-play-state: paused; }

.float-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.float-card-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.float-card-icon svg { width: 15px; height: 15px; color: #fff; }
.float-card-title {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.6); letter-spacing: .06em; text-transform: uppercase;
}

/* Short link card content */
.float-link-row {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 7px 10px;
}
.float-link-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(34,197,94,.6);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 6px rgba(34,197,94,.6); }
  50%       { box-shadow: 0 0 12px rgba(34,197,94,.9); }
}
.float-link-text {
  font-size: 12px; font-weight: 700; color: #fff;
  letter-spacing: .01em; white-space: nowrap;
}
.float-link-sub { font-size: 10px; color: rgba(255,255,255,.45); }

/* QR card content */
.float-qr-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.5px;
  padding: 10px; background: #fff; border-radius: 10px;
}
.float-qr-cell {
  width: 14px; height: 14px; border-radius: 1.5px;
}
#float-qr-real img, #float-qr-real canvas {
  max-width: 90px !important;
  max-height: 90px !important;
  width: 88px !important;
  height: 88px !important;
  display: block;
}

/* Analytics card content */
.float-stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.float-stat-item { text-align: center; }
.float-stat-val {
  font-size: 20px; font-weight: 900; color: #fff;
  letter-spacing: -.03em; line-height: 1;
}
.float-stat-lbl { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.float-stat-divider { width: 1px; height: 30px; background: rgba(255,255,255,.15); }
.float-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 20px; font-weight: 900; color: #fff;
  letter-spacing: -.03em; line-height: 1;
}
.float-mini-bars {
  display: flex; align-items: flex-end; gap: 3px; height: 28px;
  margin-top: 8px;
}
.float-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: rgba(255,255,255,.25);
  transition: height .3s;
}
.float-bar.active { background: rgba(96,165,250,.85); }

/* ─── Responsive: horizontal scroll slider on mobile ─── */
@media (max-width: 640px) {
  /* Stack cards vertically, centered, with animation intact */
  .hero-floats {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 14px;
    margin: 36px 0 48px;
    padding: 0;
  }

  .float-card {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    height: 190px;
    min-height: 190px;
    max-height: 190px;
    padding: 18px 22px;
    /* animation stays active — defined on .float-card-1/2/3 */
  }

  .float-card-3 { display: flex; }
}

@media (max-width: 420px) {
  .hero-floats { gap: 12px; margin: 28px 0 40px; }
  .float-card {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    padding: 16px 20px;
  }
}

/* ─────────────────────────────────────────
   BUTTONS — Premium gradient + glow
   ───────────────────────────────────────── */
.btn-accent {
  background: var(--gradient-primary) !important;
  box-shadow: 0 2px 14px rgba(37,99,235,.35);
  position: relative;
  overflow: hidden;
}
.btn-accent::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 55%);
  pointer-events: none; opacity: 0;
  transition: opacity .2s;
}
.btn-accent:hover::before { opacity: 1; }
.btn-accent:hover {
  background: linear-gradient(135deg, #1a56db 0%, #2563EB 50%, #60a5fa 100%) !important;
  box-shadow: var(--glow-accent), 0 4px 20px rgba(37,99,235,.4) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
.btn-accent:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 8px rgba(37,99,235,.3) !important;
}

/* Ghost button hover refinement */
.btn-ghost:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  animation: none !important;
}

/* ─────────────────────────────────────────
   CARDS — Premium glassmorphism + hover
   ───────────────────────────────────────── */
.card {
  position: relative;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s;
}
.card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  background: linear-gradient(135deg, rgba(37,99,235,.25) 0%, transparent 50%, rgba(99,102,241,.15) 100%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: -1;
}
.card:hover::before { opacity: 1; }
.card:hover {
  box-shadow: 0 12px 48px rgba(37,99,235,.18), 0 2px 12px rgba(37,99,235,.1);
  transform: translateY(-2px);
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.18);
}

/* Stats counter cards */
.sa-counter-card {
  transition: transform .3s ease, box-shadow .3s ease;
  border: 1.5px solid var(--border);
  position: relative; overflow: hidden;
}
.sa-counter-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity .3s;
}
.sa-counter-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sa-counter-card:hover::after { opacity: 1; }

/* ─────────────────────────────────────────
   ANIMATED COUNTERS
   ───────────────────────────────────────── */
.sa-counter-val {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 900;
  background: var(--gradient-primary);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.04em;
  line-height: 1.1;
}

/* ─────────────────────────────────────────
   SCROLL REVEAL — Fade + Scale
   ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ─────────────────────────────────────────
   SECTION HEADERS — subtle gradient text
   ───────────────────────────────────────── */
.section-header h2 {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .section-header h2 {
  background: linear-gradient(135deg, #e2e8f0 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ─────────────────────────────────────────
   ENHANCED FOOTER
   ───────────────────────────────────────── */
footer {
  position: relative;
  background: var(--surface-solid);
  border-top: none !important;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), rgba(99,102,241,.6), transparent);
}
footer::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(37,99,235,.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 100% 0%,  rgba(99,102,241,.04) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
[data-theme="dark"] footer {
  background: #060c18;
}
[data-theme="dark"] footer::after {
  background:
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(37,99,235,.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 100% 0%,  rgba(99,102,241,.07) 0%, transparent 50%);
}
.footer-inner { position: relative; z-index: 1; }
.footer-bottom { position: relative; z-index: 1; }

/* Enhanced social icons */
.footer-social a {
  background: var(--bg-sub);
  border: 1.5px solid var(--border);
  transition: all .22s ease;
}
.footer-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 20px rgba(37,99,235,.35);
}

/* Footer brand logo hover */
.footer-brand .logo:hover { opacity: .8; }

/* ─────────────────────────────────────────
   GEOMETRIC BACKGROUND SHAPES (page-level)
   ───────────────────────────────────────── */
.section::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: none;
}
.section { position: relative; }
.section-inner { position: relative; z-index: 1; }

/* Alt section gentle gradient border top */
.section-alt {
  position: relative;
}
.section-alt::before {
  content: '';
  position: absolute; top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-border), transparent);
  pointer-events: none;
}

/* ─────────────────────────────────────────
   ENHANCED SECTION TAG (pill badge)
   ───────────────────────────────────────── */
.section-tag {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  box-shadow: 0 0 12px rgba(37,99,235,.1);
}

/* ─────────────────────────────────────────
   HERO BUTTONS — special glow treatment
   ───────────────────────────────────────── */
.hero .btn-accent {
  box-shadow: 0 4px 24px rgba(37,99,235,.5), 0 1px 0 rgba(255,255,255,.2) inset;
}
.hero .btn-accent:hover {
  box-shadow: 0 8px 40px rgba(37,99,235,.7), 0 1px 0 rgba(255,255,255,.25) inset !important;
}

/* Ghost hero btn */
.hero .btn[style*="rgba(255,255,255,.12)"] {
  transition: all .22s ease;
}
.hero .btn[style*="rgba(255,255,255,.12)"]:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.4) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

/* ─────────────────────────────────────────
   ANALYTICS SECTION enhancement
   ───────────────────────────────────────── */
.sa-chart-card {
  transition: box-shadow .3s ease, transform .3s ease;
}
.sa-chart-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ─────────────────────────────────────────
   ICON HOVER GLOW
   ───────────────────────────────────────── */
.sa-counter-icon {
  transition: transform .3s ease, box-shadow .3s ease;
}
.sa-counter-card:hover .sa-counter-icon {
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(37,99,235,.25);
}

/* ─────────────────────────────────────────
   COPY / QR BUTTONS
   ───────────────────────────────────────── */
.btn-copy {
  background: var(--gradient-primary) !important;
  transition: all .22s ease !important;
}
.btn-copy:hover {
  box-shadow: var(--glow-sm);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────
   FORMAT PREVIEW BOXES enhanced
   ───────────────────────────────────────── */
.fmt-box {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 20px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1);
}
.fmt-box:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ─────────────────────────────────────────
   RESPONSIVE TWEAKS
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-blob { filter: blur(60px); }
  .hero-blob-1 { width: 320px; height: 280px; }
  .hero-blob-2 { width: 260px; height: 220px; }
}
@media (max-width: 480px) {
  .hero::after { background-size: 22px 22px; }
}

/* ─────────────────────────────────────────
   SUBTLE PARALLAX INDICATOR (CSS only)
   Actual parallax via JS in enhancements.js
   ───────────────────────────────────────── */
.hero-bg-layer {
  position: absolute; inset: -10%; z-index: 0;
  will-change: transform;
  pointer-events: none;
}

/* ─── Mobile: float cards scroll dots ─── */
.float-scroll-dots {
  display: none;
}
@media (max-width: 640px) {
  .float-scroll-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: -8px;
    margin-bottom: 8px;
  }
  .fsd-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    transition: background .25s, transform .25s;
  }
  .fsd-dot--active {
    background: rgba(255,255,255,.9);
    transform: scale(1.3);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Multi-Typography System — Global Overrides
   ═══════════════════════════════════════════════════════════════ */

/* Float cards — hero floating preview cards */
.float-card-title {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.6); letter-spacing: .1em; text-transform: uppercase;
}
.float-link-text {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; color: #fff;
  letter-spacing: .015em; white-space: nowrap;
}
.float-stat-val, .float-trend {
  font-family: var(--font-numeric);
  font-size: 20px; font-weight: 800; color: #fff;
  letter-spacing: -.04em; line-height: 1;
  font-feature-settings: 'tnum' 1;
}
.float-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 500; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 2px;
}

/* sa-counter-val override — ensure Space Grotesk + gradient */
.sa-counter-val {
  font-family: var(--font-numeric) !important;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.04em;
  line-height: 1.1;
  font-feature-settings: 'tnum' 1, 'kern' 1;
}

/* Section h2 — ensure Manrope */
.section-header h2 {
  font-family: var(--font-heading) !important;
  font-weight: 800;
  letter-spacing: -.038em;
}

/* Dashboard/analytics table elements */
.sa-table th, .geo-table th, [class*="th-label"] {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.sa-table td, .geo-table td {
  font-family: var(--font-body);
  font-size: 13.5px;
}
.sa-table td[class*="count"], .sa-table td[class*="val"],
.sa-table td[class*="num"] {
  font-family: var(--font-numeric);
  font-feature-settings: 'tnum' 1;
}

/* Geo heatmap panel numbers */
.geo-panel-stat-value {
  font-family: var(--font-numeric) !important;
  font-feature-settings: 'tnum' 1, 'kern' 1;
}
.geo-panel-stat-label {
  font-family: var(--font-mono) !important;
}
.geo-panel-group h4 {
  font-family: var(--font-mono) !important;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}

/* Dashboard card headers */
.dash-card h3, .dash-section h3, .panel-title, [class*="card-title"] {
  font-family: var(--font-heading);
  font-weight: 700; letter-spacing: -.018em;
}
.dash-stat-val, .dash-counter, [class*="dash-num"] {
  font-family: var(--font-numeric);
  font-feature-settings: 'tnum' 1;
}

/* Modal field labels — JetBrains Mono for tech labels */
.modal-field label {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

/* Blog / page cards headings */
.blog-card h3, .blog-card h2, .post-title {
  font-family: var(--font-heading) !important;
  font-weight: 700; letter-spacing: -.02em;
}
.blog-card p, .post-excerpt {
  font-family: var(--font-body) !important;
  line-height: 1.72;
}

/* API docs — code and endpoint labels */
.endpoint-url, .api-endpoint, .code-block, .code-snippet,
pre code, .api-path, .request-url {
  font-family: var(--font-mono) !important;
  font-size: 13.5px;
  letter-spacing: .01em;
}
.endpoint-method, .method-badge, [class*="method-"] {
  font-family: var(--font-mono) !important;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

/* Heatmap tooltip numbers */
.geo-tooltip-val, .heatmap-count, .map-count {
  font-family: var(--font-numeric) !important;
  font-weight: 700;
  font-feature-settings: 'tnum' 1;
}

/* Breadcrumbs / meta small text */
.meta-text, .breadcrumb, .tag-label, .post-meta {
  font-family: var(--font-body);
  font-size: 12.5px; letter-spacing: .01em;
}

/* Tags / badges with code-like content */
.link-tag, .tag-pill, [class*="-badge"]:not([class*="-badge-count"]) {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .04em;
}

/* ─── Stripe-style Radiant Ray Canvases ─── */
.hero-rays-canvas {
  display: none;
}
.hero-rays-left  { left: 0; }
.hero-rays-right { right: 0; }

/* Tablet: slightly narrower */
@media (max-width: 900px) {
  .hero-rays-canvas { width: 35%; opacity: .75; }
}

/* Mobile: full width behind content, reduced opacity so cards remain readable */
@media (max-width: 600px) {
  .hero-rays-canvas {
    width: 55%;
    opacity: .45;
  }
  .hero-rays-left  { left: -10%; }
  .hero-rays-right { right: -10%; }
}

/* ─── Hero Color Theme Toggle Button ─── */
.hero-color-btn {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s;
}
.hero-color-btn:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  transform: rotate(30deg) scale(1.08);
}

/* Mobile: smaller button, stays top-right */
@media (max-width: 600px) {
  .hero-color-btn {
    width: 30px; height: 30px;
    top: 12px; right: 12px;
  }
  .hero-color-btn svg { width: 13px; height: 13px; }
}

/* ─── Mobile Menu Close Button (top of drawer) ─── */
.mobile-menu-close-btn {
  display: flex;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface-solid);
  color: var(--text-2);
  cursor: pointer;
  margin: 14px 16px 4px auto;
  flex-shrink: 0;
  transition: all .15s;
}
.mobile-menu-close-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

/* ─── Language Card in Tools section ─── */
.mobile-lang-card {
  position: relative;
  user-select: none;
}
.mobile-lang-card-dropdown {
  display: none;
  position: fixed;
  min-width: 150px;
  background: var(--surface-solid);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  z-index: 9999;
  overflow: hidden;
  padding: 4px 0;
}
/* dropdown display controlled by JS since it lives on body */
.mobile-lang-card-dropdown[style*="block"] {
  animation: langDropIn .18s var(--ease) both;
}
.mobile-lang-card-option {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mobile-lang-card-option:hover,
.mobile-lang-card-option.active {
  background: var(--accent-bg);
  color: var(--accent);
}
.mobile-lang-card-code {
  font-weight: 700;
  font-size: 11px;
}

/* ═══════════════════════════════════════════════
   HERO TWO-COLUMN LAYOUT
   ═══════════════════════════════════════════════ */
.hero-top-row {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto 52px;
  text-align: left;
}

.hero-text-col {
  flex: 1 1 0;
  min-width: 0;
}

.hero-text-col .hero-badge {
  margin-bottom: 22px;
}

.hero-image-col {
  flex: 0 0 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible;
}



/* Hero floats — now below the two-col row */
.hero-floats {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 1120px;
  margin: 0 auto;
}

/* Override hero centering for the new layout */
.hero-inner {
  text-align: left;
}

/* Ensure badge doesn't auto-center on hero */
.hero-text-col .hero-badge {
  display: inline-flex;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero-top-row {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }
  .hero-inner {
    text-align: center;
  }
  .hero-text-col .hero-badge {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-text-col > div[style] {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .hero-inner {
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════
   BACKGROUND CHARACTERS — permanent, always visible
   ═══════════════════════════════════════════════ */
.bg-char {
  display: none !important;
}

.bg-char img, .bg-char-img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.18));
}

/* Individual characters — fixed positions scattered across viewport */
#bgc-clyde   { top: 18vh;    right: 2vw;  width: 100px; animation: bgcFloat2 9s ease-in-out infinite; }
#bgc-nelly   { top: 50vh;    left: 3vw;   width: 110px; animation: bgcFloat3 8s ease-in-out infinite; }

@keyframes bgcFloat1 {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  40%     { transform: translateY(-12px) rotate(3deg); }
  70%     { transform: translateY(5px) rotate(-2deg); }
}
@keyframes bgcFloat2 {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  35%     { transform: translateY(-16px) rotate(-4deg); }
  65%     { transform: translateY(8px) rotate(3deg); }
}
@keyframes bgcFloat3 {
  0%,100% { transform: translateY(0px) scale(1); }
  50%     { transform: translateY(-10px) scale(1.04); }
}

/* Responsive: smaller + fewer on mobile */
@media (max-width: 768px) {
  .bg-char { opacity: 0.09; }
  #bgc-clyde   { width: 70px; }
  #bgc-nelly   { width: 80px; }
}


/* ═══════════════════════════════════════════════
   BROWSER SHOWCASE / VIDEO SECTION
   ═══════════════════════════════════════════════ */
.browser-showcase-section {
  padding: 72px 0 80px;
  background: transparent;
}

.browser-showcase-inner {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.browser-showcase-section .section-tag {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
  color: #2563EB;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 999px;
  padding: 6px 20px;
  margin-bottom: 12px;
  display: inline-block;
}

[data-theme="dark"] .browser-showcase-section .section-tag {
  color: #93C5FD;
  background: rgba(96,165,250,.1);
  border-color: rgba(96,165,250,.25);
}

.browser-showcase-sub {
  font-size: clamp(14px, 1.6vw, 16px);
  color: rgba(30,41,80,.65);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

[data-theme="dark"] .browser-showcase-sub {
  color: rgba(255,255,255,.6);
}

.browser-showcase-video-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(96,165,250,.2),
    0 24px 80px rgba(37,99,235,.35),
    0 0 60px rgba(99,102,241,.2);
  background: #0a0e1a;
}

.browser-showcase-video-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid rgba(96,165,250,.25);
  pointer-events: none;
  z-index: 2;
}

.browser-showcase-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

@media (max-width: 600px) {
  .browser-showcase-section {
    padding: 48px 0 56px;
  }
  .browser-showcase-video-wrap {
    border-radius: 12px;
  }
  .browser-showcase-video {
    border-radius: 12px;
  }
}

/* ─── Single analytics card (enlarged) ─── */
.hero-floats--single {
  justify-content: center;
}
.float-card--large {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  padding: 24px 32px !important;
  gap: 16px !important;
}
.float-card--large .float-stat-val,
.float-card--large .float-trend {
  font-size: 32px !important;
}
.float-card--large .float-stat-lbl {
  font-size: 11px !important;
}
.float-card--large .float-stat-divider {
  height: 44px !important;
}
.float-card--large .float-mini-bars {
  height: 48px !important;
  gap: 5px !important;
  margin-top: 12px !important;
}
.float-card--large .float-card-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
}
.float-card--large .float-card-icon svg {
  width: 20px !important;
  height: 20px !important;
}
.float-card--large .float-card-title {
  font-size: 13px !important;
}
@media (max-width: 640px) {
  .float-card--large {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    padding: 20px 24px !important;
  }
  .float-card--large .float-stat-val,
  .float-card--large .float-trend {
    font-size: 26px !important;
  }
}

/* ─── Mobile: Fix GPU compositing jitter / shimmer on Android Chrome ─── */
@media (max-width: 900px), (hover: none) {
  /* Disable will-change on hero elements — causes layer promotion jitter */
  .hero,
  .hero-blob,
  .hero-bg-layer,
  .hero-inner,
  .hero-rays-canvas,
  .float-card,
  .reveal-up,
  .reveal {
    will-change: auto !important;
    transform: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Keep float-card hover transforms off on touch */
  .float-card:hover { transform: none !important; }

  /* Disable hero blob (already display:none in enhancements but double-safe) */
  .hero-blob { display: none !important; }

  /* Prevent stagger animation from causing layout shifts */
  .sx-features-grid .sx-feat-card {
    will-change: auto !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Reveal animations: skip the translateY jitter, just fade */
  .reveal-up {
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
  .reveal-up.visible {
    opacity: 1 !important;
    transform: none !important;
  }
}