html{ overflow-x: hidden; }
/* base.css
   - Reset + variables + typography
   - Bootstrap removed. Keep minimal and consistent.
*/
:root{
  /* ===== Brown theme base (main bg = rgb(130,83,44)) ===== */
  --bg:#2c2d82;              /* main background */
  --surface:#140c07;         /* deep coffee surface for cards */
  --text:#fff3e6;            /* warm cream text */
  --muted: rgba(255,243,230,.78);
  --neon:#ffcc54;            /* gold highlight */
  --pink:#d07a55;            /* rose bronze */
  --cyan:#c97a3f;            /* copper (kept name for compatibility) */

  --radius: 22px;
  --radius-lg: 32px;

  /* ===== Shadows / Borders tuned for brown ===== */
  --shadow: 0 12px 40px rgba(0,0,0,.60);
  --border: 1px solid rgba(255,204,84,.28);

  --container: 1180px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 260ms;

  /* RGB tokens (brown-only) */
  --neon-rgb: 255,204,84;    /* gold */
  --cyan-rgb: 201,122,63;    /* copper */
  --pink-rgb: 208,122,85;    /* rose bronze */

  /* supporting tones */
  --gold: #ffcc54;
  --purple: rgba(120, 70, 40, 1); /* keep as brown family (no violet) */

  --shadow-md: 0 12px 40px rgba(0,0,0,.60);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.66);
  --shadow-glow: 0 0 22px rgba(255,204,84,.14);

  --border-subtle: 1px solid rgba(255,243,230,.10);
  --border-neon: 1px solid rgba(255,204,84,.28);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-full: 999px;

  --z-ticker: 999;
  --z-header: 50;
  --z-dropdown: 1000;
  --z-modal: 9999;
  --z-overlay: 99999;

  --border-brown: rgba(255,204,84,.22);
  --border-brown-hover: rgba(255,225,140,.32);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input{ font: inherit; }
input{ color: var(--text); }
.muted{ color: var(--muted); }

.h1{ font-size: clamp(32px, 4vw, 54px); line-height: 1.04; margin: 0 0 12px; }
.h2{ font-size: clamp(24px, 2.6vw, 34px); margin: 0; }
.h3{ font-size: 18px; margin: 0 0 6px; }

/* Brown-only gradient */
.gradient-text{
  background: linear-gradient(90deg, var(--gold), var(--cyan), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.no-scroll{ overflow:hidden; }