/* global.css — Cleaned & optimized
   Keeps original tokens, resets, core utilities and shared components.
   Based on your original global.css. */
:root{
  --bg-body: #0a0a0f;
  --bg-glass: rgba(255,255,255,0.04);
  --border-subtle: rgba(255,255,255,0.12);
  --border-soft: rgba(148,163,184,0.35);

  --text-primary: #f9fafb;
  --text-secondary: rgba(249,250,251,0.75);
  --text-muted: rgba(148,163,184,0.8);

  --accent-blue: #667eea;
  --accent-violet: #764ba2;
  --accent-pink: #f093fb;

  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-soft: 0 18px 60px rgba(15,23,42,0.9);
  --shadow-card: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-ring: 0 0 0 1px rgba(102,126,234,0.5);
}

/* ---------- Reset & base ---------- */
*,
*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  background: var(--bg-body);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  line-height:1.5;
  font-size:16px;
}

/* Links/images */
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}

/* App shell */
.shell{max-width:1200px;margin:0 auto;padding-inline:2rem}
#app{min-height:100vh;display:flex;flex-direction:column}
#app-main{flex:1}
.bg-gradient{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 20% 50%, rgba(120,119,198,0.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(147,51,234,0.22), transparent 55%),
    radial-gradient(circle at 40% 80%, rgba(59,130,246,0.18), transparent 55%),
    radial-gradient(circle at 10% 10%, rgba(56,189,248,0.2), transparent 55%);
  animation: gradientShift 18s ease-in-out infinite;
}
@keyframes gradientShift{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.85;transform:scale(1.08)}}

/* ---------- Typography ---------- */
.section-header{margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.section-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:var(--text-muted);margin-bottom:.7rem}
.section-title{font-size:2.1rem;letter-spacing:-.03em;font-weight:800;margin-bottom:.6rem}
.section-subtext{font-size:.98rem;color:var(--text-secondary);max-width:560px;text-align:center;margin:0 auto}
.muted, .muted-text{color:var(--text-muted);font-size:.86rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.6rem 1.3rem;border-radius:999px;border:1px solid transparent;font-size:.86rem;font-weight:600;cursor:pointer;background:transparent;color:inherit;transition:background 160ms, box-shadow 160ms, transform 140ms}
.btn-full{width:100%}
.btn-primary{background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));color:#fff;box-shadow:0 12px 40px rgba(76,81,191,0.7)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 50px rgba(76,81,191,0.95)}
.btn-ghost{border-color:rgba(255,255,255,0.15);background:rgba(15,23,42,0.7);color:#e5e7eb}
.btn-outline{border-color:rgba(129,140,248,0.9);background:rgba(15,23,42,0.8);color:#e0e7ff}
.btn-sm{padding:.3rem .8rem;font-size:.78rem}

/* ---------- Glass surfaces / cards ---------- */
.glass-surface{
  background:var(--bg-glass);backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:2.2rem;box-shadow:var(--shadow-card)
}
.glass-card{
  background:var(--bg-glass);border-radius:24px;border:1px solid rgba(255,255,255,0.16);padding:2.1rem;backdrop-filter:blur(26px);box-shadow:0 22px 70px rgba(0,0,0,0.7)
}
.card{border-radius:var(--radius-lg);background:radial-gradient(circle at top, rgba(15,23,42,0.96), rgba(15,23,42,0.98));border:1px solid rgba(148,163,184,0.22);box-shadow:var(--shadow-soft);padding:1.1rem 1.2rem}
.sub-card{background:rgba(15,23,42,0.9);border-radius:18px;border:1px solid rgba(255,255,255,0.12);padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem}

/* ---------- Forms ---------- */
.form-group{margin-bottom:.95rem}
.form-group label{display:block;font-size:.8rem;margin-bottom:.32rem;color:#e5e7eb;opacity:.92}
.form-group input, .form-group select, .form-group textarea{
  width:100%;border-radius:12px;border:1px solid rgba(148,163,184,0.45);background:rgba(15,23,42,0.9);color:#e5e7eb;padding:.55rem .8rem;font-size:.84rem;outline:none;transition:box-shadow 160ms,border-color 160ms
}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(148,163,184,0.7)}
.form-group input:focus,.form-group textarea:focus{border-color:rgba(102,126,234,0.95);box-shadow:var(--shadow-ring);background:rgba(15,23,42,0.98)}
.form-group textarea{resize:vertical;min-height:120px}
.error-msg{display:block;margin-top:.2rem;font-size:.72rem;color:#fecaca}

/* ---------- Utilities ---------- */
.img-fluid{max-width:100%;height:auto;display:block}
.chip-row{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0}
.badge{display:inline-flex;align-items:center;padding:.22rem .7rem;border-radius:999px;font-size:.72rem;font-weight:600}

/* Small helpers */
.hide{display:none!important}
.center{text-align:center}
.row{display:flex;gap:1rem;flex-wrap:wrap}
.col{flex:1}

/* ---------- Small responsive helpers (kept minimal) ---------- */
@media (max-width:1024px){
  .shell{padding-inline:1.4rem}
  .app-main{padding:2.2rem 1rem 3rem}
}