/* =========================================
   BASE / RESET / VARIABLES
========================================= */
:root {
  /* Colors (Dark Theme) */
  --color-bg-dark: #0d0d14;
  --color-panel: #14141f;
  --color-muted: #a0a8bf;
  --color-accent: #ff4081;
  --color-accent-alt: #7c4dff;
  --color-glass: rgba(255,255,255,0.04);
  --color-neon-shadow: 0 8px 32px rgba(124,77,255,0.2), 0 0 16px rgba(255,64,129,0.12);

  /* Input / Text */
  --color-input-bg: var(--color-panel);
  --color-input-text: #e4e9f2;

  /* Layout / Sizes */
  --radius-base: 14px;
  --max-width: 1200px;

  /* Typography */
  --font-main: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* LIGHT THEME */
body[data-theme="light"] {
  --color-bg-dark: #f5f6fa;
  --color-panel: #ffffff;
  --color-muted: #6c738a;
  --color-accent: #5a4cf5;
  --color-accent-alt: #f95a9b;
  --color-glass: rgba(0,0,0,0.04);
  --color-neon-shadow: 0 8px 32px rgba(90,76,245,0.2), 0 0 16px rgba(249,90,155,0.12);

  --color-input-bg: #f0f1f6;
  --color-input-text: #1d2333;

  color: #1d2333;
  background: linear-gradient(180deg, #f0f1f6, #e8eaf2 1400px);
}

/* =========================================
   BASE RESET
========================================= */
* { box-sizing: border-box; margin:0; padding:0; }
html, body {
  scroll-behavior: smooth;
  height: 100%;
  font-family: var(--font-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(180deg, var(--color-bg-dark), #08080f 1600px);
  color: var(--color-input-text);
  overflow-x: hidden;
}

body { display: flex; flex-direction: column; min-height:100%; padding-top:40px; }
main { flex:1 0 auto; padding-top:40px; }
.footer { flex-shrink:0; }

/* =========================================
   GLOBAL UTILITIES
========================================= */
#dynamic-bg {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  background:transparent;
}

/* =========================================
   SECTIONS
========================================= */
.section {
  margin:0 auto;
  padding:80px 20px 28px;
  max-width: var(--max-width);
  border-radius: var(--radius-base);
}

.section-title {
  font-size: 1.75rem;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 8px;
}

.section-subtitle, .section-sub {
  text-align: center;
  color: var(--color-muted);
  font-size: 1rem;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* =========================================
   RESPONSIVE TYPOGRAPHY
========================================= */
@media (max-width: 900px) {
  .section-title { font-size: 1.5rem; }
  .section-subtitle, .section-sub { font-size: 0.95rem; }
}

@media (max-width: 600px) {
  .section { padding: 60px 16px 20px; }
  .section-title { font-size: 1.35rem; }
  .section-subtitle, .section-sub { font-size: 0.9rem; }
}