:root{
  --space-1: clamp(6px, 1.2vw, 10px);
  --space-2: clamp(10px, 1.6vw, 14px);
  --space-3: clamp(14px, 2.2vw, 20px);
  --radius: 12px;
  --text: clamp(14px, 1.6vw, 18px);
  --h1: clamp(22px, 3.2vw, 32px);
  --h2: clamp(18px, 2.4vw, 24px);
}
html, body { font-size: var(--text); -webkit-text-size-adjust: 100%; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
.container { width: min(1100px, 100%); margin-inline: auto; padding-inline: var(--space-2); }
.wrap-any { overflow-wrap: anywhere; }

.grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px){ .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .grid { grid-template-columns: 1fr; } }

.card { padding: var(--space-3); border-radius: var(--radius); background: var(--surface, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.06); }

.nav { display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); padding: var(--space-2) 0; }
.nav-menu { display:flex; gap: var(--space-2); }
.nav-toggle { display:none; border:0; background:transparent; font-size: 1.1rem; }
@media (max-width: 768px){
  .nav-toggle { display:block; }
  .nav-menu { display:none; flex-direction: column; gap: var(--space-1); padding-block: var(--space-2); }
  .nav-menu[data-open="true"]{ display:flex; }
}

button, .btn, input, select, textarea { min-height: 44px; }
input, select, textarea, button { font-size: 16px; }

table.responsive { width:100%; border-collapse: collapse; }
table.responsive th, table.responsive td { padding: .65rem .8rem; text-align:left; }
@media (max-width: 640px){
  table.responsive thead { display:none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display:block; width:100%; }
  table.responsive tr { background:#fff; border:1px solid #eee; border-radius: var(--radius); margin-bottom: var(--space-2); overflow:hidden; }
  table.responsive td { display:grid; grid-template-columns: 40% 1fr; align-items:center; }
  table.responsive td::before { content: attr(data-label); font-weight:600; padding-right:.6rem; }
}

img, video, canvas { max-width: 100%; height: auto; }
.chart-box { width:100%; aspect-ratio: 16 / 9; }

/* Chart.js responsive configuration example:
new Chart(ctx, { 
    type: 'line', 
    data, 
    options: { 
        responsive: true, 
        maintainAspectRatio: true 
    } 
});
*/

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
:focus-visible { outline: 2px solid var(--accent, #2a9d8f); outline-offset: 2px; }

body { padding-bottom: env(safe-area-inset-bottom); }


/* ---- MOBILE POLISH PACK (<= 768px) ---- */
@media (max-width: 768px){
  /* Layout & gutters */
  .container, main, .content { padding-inline: 16px !important; }
  .hero, .section { margin-inline: auto; max-width: 680px; }

  /* Sidebar becomes hidden by default (use your toggle to open) */
  .sidebar { transform: translateX(-100%) !important; }
  body.drawer-open .sidebar { transform: translateX(0) !important; }

  /* Top mobile bar (if you have .mobile-header or add one) */
  .mobile-header { 
    position: sticky; top: 0; z-index: 1001; 
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: var(--surface, #0b0b0b);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .menu-toggle { width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; }

  /* Hero typography */
  :root{
    --h1: clamp(24px, 6vw, 34px);
    --h2: clamp(18px, 4.2vw, 24px);
    --body: clamp(14px, 4vw, 16px);
  }
  h1.hero-title { font-size: var(--h1) !important; line-height: 1.2; margin: 14px 0 10px; }
  .hero-lead { font-size: var(--body); line-height: 1.55; opacity: .9; }
  .wrap-any, h1, h2, p { overflow-wrap: anywhere; }

  /* Feature cards → 1 column, comfy touch targets */
  .features { display: grid; gap: 14px; grid-template-columns: 1fr; }
  .feature-card {
    padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  }
  .feature-card .icon { width: 28px; height: 28px; margin-right: 8px; }
  .feature-card h3 { font-size: clamp(16px, 4.5vw, 18px); margin: 0 0 6px; }
  .feature-card p { font-size: var(--body); margin: 0; }

  /* Kill horizontal scroll and weird long words */
  html, body { overflow-x: hidden; }
  .content { min-width: 0; }

  /* Footer spacing */
  footer { padding: 20px 16px; text-align: center; }

  /* Sticky CTA: keep Login visible */
  .mobile-cta {
    position: sticky; bottom: 0; z-index: 1002;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.75) 35%, rgba(0,0,0,.9));
    padding: 10px 16px 16px;
    display: flex; justify-content: center;
  }
  .mobile-cta .btn { min-height: 48px; padding-inline: 18px; font-weight: 600; border-radius: 10px; }
}

/* Tighter for very small phones (<= 390px) */
@media (max-width: 390px){
  :root{ --h1: clamp(22px, 7vw, 30px); }
  .feature-card { padding: 12px 14px; }
}