/* Global layout */
html { scroll-behavior: smooth; height: 100%; }
*,
*::before,
*::after { box-sizing: border-box; }

body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  margin:0;padding:0;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  min-height:100%;
  height:100%;
}

/* Header */
.header{
  background:linear-gradient(135deg,#1f2933 0%,#111827 100%);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:1000;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.header-inner{ position:relative; }

/* Brand */
.brand{ text-decoration:none; }
.site-logo{ height:40px;width:auto;display:block; }
.brand-text{ color:#fff;font-weight:800;font-size:1.15rem; }

/* Desktop nav */
.nav-links{ position:absolute;left:50%;transform:translateX(-50%); }
.nav-link{
  color:#fff;text-decoration:none;font-weight:500;
  transition:all .25s ease;display:inline-block;
}
.nav-link:hover{ color:#d1fae5;transform:translateY(-1px); }

/* Dropdown */
.dropdown{ position:relative; }
.dropdown-toggle{
  background:none;border:none;color:#fff;font-weight:500;
  cursor:pointer;padding:0;transition:color .25s ease;
}
.dropdown-toggle:hover{ color:#d1fae5; }
.dropdown-content{
  display:none;position:absolute;top:120%;right:0;
  background:#fff;min-width:220px;
  box-shadow:0 10px 30px rgba(15,23,42,.35);
  border-radius:.75rem;overflow:hidden;z-index:1100;
}
.dropdown.open .dropdown-content{ display:block; }
.dropdown-content a{
  color:#4b5563;padding:12px 20px;text-decoration:none;
  display:block;font-size:.9rem;transition:all .2s ease;
}
.dropdown-content a:hover{
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#fff;padding-left:26px;
}

/* Mobile */
.mobile-menu-btn{
  display:none;background:none;border:2px solid #10b981;
  border-radius:999px;padding:4px 10px;color:#ecfdf5;
  font-size:1.3rem;cursor:pointer;
  transition:background .25s ease,transform .15s ease,border-color .25s ease;
}
.mobile-menu-btn:hover{
  background:#10b981;border-color:#6ee7b7;transform:translateY(-1px);
}
.mobile-menu{
  display:none;flex-direction:column;background:#065f46;
  padding:12px 18px 16px;gap:4px;border-bottom:3px solid #10b981;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  color:#ecfdf5;text-decoration:none;padding:8px 6px;border-radius:6px;
  font-size:.95rem;font-weight:500;transition:background .2s ease,transform .15s ease;
}
.mobile-menu a:hover{ background:rgba(16,185,129,.2);transform:translateX(2px); }

/* Hero */
.page-header{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;padding:80px 20px 90px;text-align:center;
  position:relative;overflow:hidden;
}
.page-header::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at top left,rgba(255,255,255,.2),transparent 55%);
  opacity:.7;
}
.page-header h1{
  position:relative;z-index:1;font-size:2.9rem;font-weight:900;
  margin-bottom:12px;text-shadow:0 8px 25px rgba(15,23,42,.6);
}
.page-header p{
  position:relative;z-index:1;font-size:1.15rem;opacity:.96;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(3deg)}}
.float-animation{ animation:float 3s ease-in-out infinite; }

/* Main */
.calculator-container{
  max-width:1400px;margin:-60px auto 60px;padding:0 20px;position:relative;z-index:10;
}
.calculator-card{
  background:#fff;border-radius:24px;padding:40px;
  box-shadow:0 22px 60px rgba(15,23,42,.25);margin-bottom:24px;
}
.card-title{
  font-size:1.7rem;font-weight:800;color:#4c1d95;margin-bottom:28px;
  display:flex;align-items:center;gap:10px;
}

/* Inputs */
.input-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;margin-bottom:20px;
}
.input-group{
  background:linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%);
  padding:18px;border-radius:14px;border:2px solid #667eea;
  transition:all .22s ease;
}
.input-group:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(99,102,241,.25);
}
.input-label{
  font-weight:700;color:#4c1d95;margin-bottom:6px;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
}
.input-field,.select-field{
  width:100%;padding:10px 12px;border-radius:10px;border:2px solid #667eea;
  font-size:.95rem;font-weight:500;color:#111827;background:#fff;
  transition:all .2s ease;
}
.input-field:focus,.select-field:focus{
  outline:none;border-color:#7c3aed;
  box-shadow:0 0 0 3px rgba(129,140,248,.35);
  transform:scale(1.01);
}

/* Button */
.calculate-btn{
  width:100%;padding:16px;background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#fff;border:none;border-radius:14px;font-size:1.1rem;font-weight:700;
  cursor:pointer;transition:all .22s ease;margin-top:12px;
}
.calculate-btn:hover{ transform:translateY(-1px);box-shadow:0 12px 30px rgba(16,185,129,.45); }

/* Results */
.result-display{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  padding:30px;border-radius:20px;color:#fff;margin-bottom:24px;
}
.result-value{ font-size:3.2rem;font-weight:900;margin-bottom:4px;text-align:center; }
.result-label{ font-size:1.25rem;font-weight:600;text-align:center;opacity:.97;margin-bottom:18px; }

.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin-top:18px;
}
.stat-card{
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  padding:18px;border-radius:14px;text-align:center;
  border:2px solid rgba(255,255,255,.22);
  transition:all .22s ease;
}
.stat-card:hover{ background:rgba(255,255,255,.25);transform:translateY(-2px); }
.stat-title{
  font-size:.8rem;font-weight:600;margin-bottom:6px;opacity:.9;
  text-transform:uppercase;letter-spacing:.03em;
}
.stat-value{ font-size:1.6rem;font-weight:900; }

/* Table */
.table-wrap{
  overflow-x:auto;border-radius:14px;border:2px solid #e5e7eb;background:#fff;margin-top:14px;
}
.projection-table{
  width:100%;border-collapse:collapse;min-width:720px;
}
.projection-table th,.projection-table td{
  padding:12px 14px;border-bottom:1px solid #e5e7eb;text-align:left;
  font-size:.95rem;color:#111827;
}
.projection-table th{
  background:#f3f4ff;color:#4c1d95;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;font-size:.78rem;
}
.projection-table tr:hover td{ background:#fafaff; }

/* Info */
.info-box{
  background:linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%);
  padding:18px;border-radius:12px;border-left:4px solid #7c3aed;margin-top:18px;
}
.info-title{ font-weight:700;color:#4c1d95;margin-bottom:6px;font-size:.95rem; }
.info-text{ color:#5b21b6;font-size:.9rem;line-height:1.6; }

/* Footer */
.footer{
  background:linear-gradient(135deg,#1f2937 0%,#030712 100%);
  color:#fff;padding:50px 0 18px;margin-top:80px;
}
.footer-column h3{
  font-size:.95rem;font-weight:700;margin-bottom:12px;color:#9ca3af;
  text-transform:uppercase;letter-spacing:.06em;
}
.footer-column ul{ list-style:none;padding:0;margin:0; }
.footer-column ul li{ margin-bottom:8px; }
.footer-column ul li a{
  color:#e5e7eb;text-decoration:none;font-size:.9rem;
  transition:all .2s ease;display:inline-block;
}
.footer-column ul li a:hover{ color:#22c55e;transform:translateX(4px); }
.footer-bottom{
  border-top:1px solid rgba(148,163,184,.35);
  margin-top:30px;padding-top:18px;text-align:center;color:#9ca3af;font-size:.9rem;
}

/* Responsive */
@media (max-width:1024px){
  .nav-links{ display:none !important; }
  .mobile-menu-btn{ display:block; }
}
@media (max-width:768px){
  .page-header{ padding:60px 18px 70px; }
  .page-header h1{ font-size:2.1rem; }
  .page-header p{ font-size:1rem; }
  .calculator-card{ padding:24px 18px; }
  .input-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .result-value{ font-size:2.5rem; }
  .projection-table{ min-width:640px; }
}