/* ============================================
   BASE.CSS — CSS Variables, Reset, Shared Components
   ============================================ */

/* -- CSS Variables -- */
:root {
    --gold: #f9d71c;
    --gold-hover: #e6c200;
    --gold-subtle: rgba(249,215,28,0.10);
    --gold-ring: rgba(249,215,28,0.25);
    --white: #ffffff;
    --bg: #f7f8fa;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --green: #10b981;
    --green-bg: #ecfdf5;
    --red: #ef4444;
    --red-bg: #fef2f2;
    --amber: #f59e0b;
    --amber-bg: #fffbeb;
    --blue: #3b82f6;
    --blue-bg: #eff6ff;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
    --transition: 0.2s ease;
    --sidebar-w: 72px;
    --header-h: 64px;
}

/* -- Reset -- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--gray-800); background:var(--white); line-height:1.6; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea { font-family:inherit; }

/* -- Shared Form Components -- */
.tab-row { display:flex; margin-bottom:24px; background:var(--gray-100); border-radius:var(--radius-sm); overflow:hidden; }
.tab-btn { flex:1; padding:10px 16px; font-size:0.8125rem; font-weight:600; color:var(--gray-500); background:transparent; transition:var(--transition); }
.tab-btn.active { background:var(--gold); color:var(--gray-900); }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:0.8125rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; }
.form-input { width:100%; padding:10px 14px; border:1px solid var(--gray-200); border-radius:10px; font-size:0.875rem; color:var(--gray-800); transition:var(--transition); background:var(--white); outline:none; }
.form-input:focus { border-color:var(--gray-900); box-shadow:0 0 0 3px rgba(0,0,0,0.08); }
.form-input::placeholder { color:var(--gray-400); }
.btn-gold { width:100%; padding:12px; background:var(--gold); color:var(--gray-900); font-weight:700; font-size:0.875rem; border-radius:var(--radius); transition:var(--transition); margin-top:8px; }
.btn-gold:hover { background:var(--gold-hover); }
.btn-dark { width:100%; padding:12px; background:var(--gray-800); color:var(--white); font-weight:600; font-size:0.875rem; border-radius:var(--radius); transition:var(--transition); margin-top:8px; }
.btn-dark:hover { background:var(--gray-700); }
.error-msg { color:var(--red); font-size:0.75rem; margin-top:4px; display:none; }
.success-msg { color:var(--green); font-size:0.75rem; margin-top:4px; display:none; }

/* -- Section shared -- */
.section { padding:80px 24px; }
.section-container { max-width:1280px; margin:0 auto; }
.section-eyebrow { font-size:0.75rem; font-weight:700; color:var(--gray-500); letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.section-title { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; color:var(--gray-900); letter-spacing:-1px; margin-bottom:12px; }
.section-desc { font-size:1rem; color:var(--gray-500); max-width:500px; margin:0 auto; line-height:1.7; text-align:center; }
.btn-lg { padding:16px 40px; font-size:1rem; }