/* ... (Keep existing root variables) ... */
:root {
  --bg-dark: #0A0A0A;
  --bg-dark-alt: #1E293B;
  --text-primary: #E3E8EF;
  --text-secondary: #A4A4A4;
  --border-color: #334155;
  --primary: #F59E0B; /* Orange */
  --accent: #9D5EEF;
  --success: #55B685;
  --info: #49A4E3;
  --font-main: 'Inter', sans-serif;
  --container-width: 1100px;
  --nav-height: 80px;
  --border-radius: 8px;
}

/* Base Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-main); background-color: var(--bg-dark); color: var(--text-secondary); line-height: 1.6; }
h1, h2, h3 { color: var(--text-primary); font-weight: 600; margin-bottom: 1rem; line-height: 1.2; }
h1 { font-size: 3rem; } h2 { font-size: 2.25rem; } h3 { font-size: 1.5rem; }
p, pre { margin-bottom: 1.5rem; color: var(--text-secondary); }
pre { white-space: pre-wrap; font-family: var(--font-main); }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons */
.button-primary { background-color: var(--primary); color: #0A0A0A; padding: 12px 28px; border-radius: var(--border-radius); font-weight: 700; text-decoration: none; display: inline-block; border: none; cursor: pointer; transition: transform 0.2s; }
.button-primary:hover { transform: translateY(-2px); background-color: #ffb13d; text-decoration: none; }
.button-secondary { border: 2px solid var(--primary); color: var(--primary); padding: 10px 24px; border-radius: var(--border-radius); font-weight: 700; text-decoration: none; display: inline-block; background: transparent; transition: transform 0.2s; margin-left: 1rem; }
.button-secondary:hover { background-color: rgba(245, 158, 11, 0.1); transform: translateY(-2px); text-decoration: none; }

/* --- ICONS STYLING --- */
.ph { vertical-align: middle; margin-right: 0.5rem; color: var(--primary); font-size: 1.3em; }
.icon-large { font-size: 3rem; color: var(--primary); margin-bottom: 1rem; display: block; }
.step-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; }
.icon-section { font-size: 4rem; color: var(--primary); margin-bottom: 1rem; display: block; margin-left: auto; margin-right: auto; }

/* Layout */
.construction-banner { background: var(--primary); color: #000; text-align: center; padding: 0.5rem; position: relative; z-index: 1001; font-weight: bold; }
.container { width: 90%; max-width: var(--container-width); margin: 0 auto; }
.text-center { text-align: center; }
section { padding: 6rem 0; border-bottom: 1px solid var(--border-color); }
header { position: fixed; width: 100%; background: var(--bg-dark); border-bottom: 1px solid var(--border-color); z-index: 1000; height: var(--nav-height); top: 0; }
header nav { display: flex; justify-content: space-between; align-items: center; height: 100%; }
header nav ul { display: flex; gap: 24px; list-style: none; align-items: center; }
.logo { height: 32px; }
main { padding-top: var(--nav-height); }

/* Hero */
#home { padding: 8rem 0; text-align: center; }
#home h1 { font-size: 3.5rem; max-width: 900px; margin: 0 auto 1.5rem; }
.subtitle { font-size: 1.25rem; max-width: 700px; margin: 0 auto 2.5rem; }
.cta-buttons.centered-cta { display: flex; justify-content: center; margin-top: 2rem; }

/* --- CALCULATOR (V21 ALIGNMENT FIX) --- */
#calculator { background-color: var(--bg-dark-alt); }
.calculator-box { background-color: var(--bg-dark); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 3rem; max-width: 900px; margin: 3rem auto 0; }
.calc-inputs { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 2rem; 
    margin-bottom: 2rem; 
}
.calc-inputs .form-group { 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.calc-inputs label { 
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary); 
    margin-bottom: 0.75rem; 
    font-size: 1rem; 
    font-weight: 600;
    min-height: 3.5rem; /* Force consistent height for labels */
    text-align: center;
}
.calc-inputs input { width: 100%; padding: 12px; background: var(--bg-dark-alt); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; font-size: 1.1rem; text-align: center; }
.full-width { width: 100%; font-size: 1.2rem; }
#calc-result { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
.result-value { font-size: 3.5rem; color: #EF4444; font-weight: 800; line-height: 1; margin-bottom: 1rem; }

/* --- PROBLEM CARDS --- */
#problem { background-color: var(--bg-dark); }
.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 900px; margin: 3rem auto; text-align: left; }
.problem-card { background-color: var(--bg-dark-alt); padding: 2rem; border-radius: var(--border-radius); border: 1px solid var(--border-color); transition: transform 0.2s; text-align: center; }
.problem-card:hover { transform: translateY(-5px); border-color: var(--primary); }
.problem-card h3 { color: var(--text-primary); font-size: 1.25rem; margin-bottom: 0.5rem; }

/* --- WHO WE HELP --- */
#who { background-color: var(--bg-dark); }
.who-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 900px; margin: 3rem auto; text-align: left; }
.who-col { background: var(--bg-dark-alt); padding: 2rem; border-radius: var(--border-radius); }
.who-list { list-style: none; padding: 0; }
.who-list li { margin-bottom: 1rem; display: flex; align-items: flex-start; font-size: 1.05rem; }
.who-list li i { flex-shrink: 0; margin-top: 4px; }

/* About */
#about .profile-pic { width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--border-color); }
.about-profile-group { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; }
.about-links { display: flex; gap: 1rem; }

/* Form */
#form { background-color: var(--bg-dark-alt); }
#audit-form { max-width: 800px; margin: 0 auto; display: grid; gap: 1.5rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
input, select, textarea { width: 100%; padding: 12px; background: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; font-family: inherit; }
textarea { min-height: 100px; resize: vertical; }
.hidden { display: none; }
#form-success-message { color: var(--success); font-size: 1.2rem; margin-top: 2rem; text-align: center; }

/* --- FINAL CTA --- */
#final-cta { background-color: var(--bg-dark); }
.cta-container { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 700px; margin: 0 auto; }
#final-cta h2 { font-size: 2.5rem; margin-bottom: 0; }
.cta-body { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 0; }
#final-cta .subtitle { margin: 0; font-weight: 600; color: var(--primary); }

/* --- FOOTER (V21 SMALLER LOGO) --- */
footer { padding: 3rem 0; text-align: center; border-top: 1px solid var(--border-color); background-color: var(--bg-dark); }
.logo-footer { max-width: 60px; /* Changed to 60px */ height: auto; margin-bottom: 1rem; }
footer p { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }

/* Mobile */
@media (max-width: 768px) {
  header nav ul { display: none; }
  h1 { font-size: 2.5rem; }
  .cta-buttons { flex-direction: column; gap: 1rem; align-items: center; }
  .button-secondary { margin-left: 0; }
  .calc-inputs { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .who-columns { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
}