/* ===========================
   Brand tokens
   =========================== */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --accent:#111827;      /* main dark button */
  --accent-weak:#f8fafc; /* light bg hovers */
  --num-bg:#eef2ff;
  --num:#3730a3;

  --gap-xl:24px;
  --gap-lg:20px;
  --gap:14px;
  --gap-sm:10px;

  --radius:14px;
  --col-label: 320px;        /* left column width (form) */
  --maxw: 1080px;            /* page width */
}

/* ===========================
   Base reset
   =========================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.45;
}

/* Links (general) */
a{ color:inherit; }
a:focus{ outline: 2px dashed #94a3b8; outline-offset: 2px; }

/* Utility */
.hidden{ display:none !important; }
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===========================
   Header (both pages)
   =========================== */
.page-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  background:var(--card);
  border-bottom:1px solid var(--border);
}
.page-header .logo{ height:28px; width:auto; object-fit:contain; }
.page-header h1{ font-size:20px; margin:0; }
.page-header .subtitle{ margin:0 0 0 8px; color:var(--muted); font-size:14px; }

/* ===========================
   Cards / containers
   =========================== */
.card{
  max-width:var(--maxw);
  margin:22px auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.card-title{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.card-title h2{ margin:0; font-size:18px; }
.sec-num{
  width:34px; height:34px; display:inline-grid; place-items:center;
  border-radius:10px; background:var(--num-bg); color:var(--num);
  font-weight:600; font-variant-numeric: tabular-nums;
}
.rich-text p{ margin:0; }

/* ===========================
   Form (index.html)
   =========================== */
.form-shell{ max-width:var(--maxw); margin:22px auto; padding:0 16px; }
.fields{ display:flex; flex-direction:column; gap:var(--gap); }

.field-row{
  display:grid;
  grid-template-columns: var(--col-label) 1fr;
  gap:18px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.label-col{ display:flex; align-items:center; gap:10px; }
.qnum{
  min-width:46px; height:28px; display:inline-grid; place-items:center;
  border-radius:8px; background:#f1f5f9; color:#0f172a;
  font-weight:600; font-size:12px; font-variant-numeric: tabular-nums;
}
.label-col label{ font-weight:600; }

.input-col{ display:flex; flex-direction:column; gap:8px; }

/* inputs — include standard appearance then fallbacks */
.text-input,
.select-input,
.number-input{
  width:100%; max-width:520px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:14px; background:#fff;
  appearance:none;             /* standard */
  -webkit-appearance:none;     /* Safari */
  -moz-appearance:none;        /* Firefox */
}
.select-input{ cursor:pointer; }

.options{ display:flex; flex-wrap:wrap; gap:12px 18px; }
.option{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; }
.option input{ transform:translateY(1px); }

/* Step navigation */
.step-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top: var(--gap-lg);
}
.step-actions .primary.step-next{
  padding: 10px 14px;
  font-size: 14px;
}

/* Progress bar */
.progress-shell{ max-width:var(--maxw); margin: 0 auto var(--gap-lg); padding: 0 16px; }
.progress-meta{ display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px; margin-bottom:8px; }
.progress-bar{ width:100%; height:8px; background:#eef2ff; border-radius:999px; overflow:hidden; border:1px solid var(--border); }
.progress-bar-fill{ height:100%; width:0%; background:linear-gradient(90deg, #00E5FF 0%, #00C1CC 100%); transition:width .25s ease; }

/* ===========================
   Charts (result.html)
   =========================== */
.charts{
  max-width:var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
}
.chart h3{ margin: 0 0 10px; font-size:16px; }

.diagram-box{
  height: 60vh;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  padding: 8px;
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.diagram{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  cursor: pointer;
}
.diagram-empty{ color: var(--muted); font-size: 14px; }

/* ===========================
   Febi Solution Overview grids
   =========================== */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-lg); }
.grid-2 .card, .grid-3 .card{
  margin:0; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff;
}
.grid-2 h3, .grid-3 h3{ margin:0 0 6px; font-size:15px; }

/* ===========================
   ROI charts + tables
   =========================== */
.roi-charts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  max-width: var(--maxw);
  margin: 0 auto;
}
.roi-charts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  max-width: var(--maxw);
  margin: 0 auto;
}
.roi-chart-box h3{
  margin: 0 0 8px;
  font-size: 16px;
}
.roi-chart{
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;                /* keep images from overpowering the page */
  border: 1px solid var(--border);
  border-radius: 10px;
  object-fit: contain;
}

.roi-tables{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
}
.roi-table-box h3{ margin:0 0 8px; font-size:16px; }
.roi-table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.roi-table th, .roi-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.roi-table thead th{
  background:#f8fafc;
  text-align:left;
}
.roi-table tr.sep td{
  background:#f6f7fb;
  font-weight:600;
}

/* ===========================
   Actions / Buttons (unified)
   =========================== */
.actions{
  max-width:var(--maxw);
  margin: 8px auto 28px;
  padding: 0 16px;
  display:flex;
  justify-content:flex-end;
  gap: 12px;
}

/* Base button */
.button, .primary{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  min-height:40px;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  user-select:none;
  text-decoration:none;     /* for anchors */
  appearance:none;          /* standard */
  -webkit-appearance:none;  /* Safari */
  -moz-appearance:none;     /* Firefox */
}

/* Normalize anchor visited color */
a.button:link, a.button:visited,
a.primary:link, a.primary:visited { color: inherit; text-decoration: none; }

/* Filled (accent) */
.button, .primary{
  background:var(--accent);
  color:#fff;
}
.button:hover, .primary:hover{ filter:brightness(0.95); }
.button:active, .primary:active{ transform: translateY(1px); }

/* Outline (use for Download + Complete) */
.button.outline,
.button.success{
  background:#fff;
  color:var(--accent);
  border-color:var(--border);
}
.button.outline:hover,
.button.success:hover{ background:var(--accent-weak); }
.button.outline:active,
.button.success:active{ transform: translateY(1px); }

/* ===========================
   Modal (Email overlay)
   =========================== */
.modal{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal.show{ display:flex; }

.modal-content{
  width: min(560px, calc(100% - 32px));
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(2,6,23,.18);
  overflow: hidden;
  animation: modalPop .14s ease;
}
@keyframes modalPop{ from{ transform: translateY(6px); opacity:.6 } to{ transform:none; opacity:1 } }

.modal-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.modal-header h3{ margin: 0; font-size: 16px; }
.modal-header .close{ cursor: pointer; font-size: 22px; line-height: 1; }

.modal-body{ padding: 16px; }
.form-group{ margin-bottom: 12px; }
.form-group label{ display:block; font-weight:600; margin-bottom:6px; }
.form-input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
.form-input:invalid{ border-color:#ef4444; background:#fff7f7; }
.hint{ font-size:12px; color:#9ca3af; margin-top:4px; }
.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 6px; }

/* ===========================
   Loading overlay (index)
   =========================== */
.loading-overlay{
  position: fixed; inset:0;
  background: rgba(255,255,255,.8);
  display:none; align-items:center; justify-content:center;
  z-index: 9998;
}
.loading-overlay.show{ display:flex; }
.loading-content{
  width:min(520px, calc(100% - 40px));
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:18px;
  box-shadow: 0 24px 48px rgba(2,6,23,.12);
  text-align:center;
}
.loading-spinner{
  width:40px;height:40px;border-radius:999px;
  border:4px solid #e5e7eb; border-top-color:#0ea5e9; margin:0 auto 12px;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }
.loading-steps{ margin-top:10px; text-align:left; }
.loading-steps .step{ padding:6px 8px; border-radius:8px; background:#f8fafc; border:1px solid #eef2ff; margin-top:6px; }
.loading-steps .step.active{ background:#eef2ff; }

/* ===========================
   Footer (web)
   =========================== */
.page-footer{
  max-width: var(--maxw);
  margin: 28px auto 40px;
  padding: 0 16px;
  text-align: center;
}
.page-footer .footer-left{ display:flex; align-items:center; justify-content:center; gap:10px; }
.page-footer .footer-brand-link{ display:inline-flex; align-items:center; gap:10px; color: inherit; text-decoration: none; }
.page-footer .footer-logo{ height: 20px; width:auto; object-fit:contain; }
.page-footer .footer-brand{ font-weight: 600; }
.page-footer .footer-right{ margin-top: 10px; }
.page-footer .footer-link{ color: var(--accent); text-decoration: underline; font-weight: 600; }
.page-footer .footer-privacy{ margin-top: 10px; color: var(--muted); font-size: 13px; }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1100px){
  .charts{ grid-template-columns: 1fr; }
  .diagram-box{ height: 55vh; }
  .roi-charts{ grid-template-columns: 1fr; }
  .roi-chart{ max-height: 380px; } 
  .roi-tables{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  :root{ --col-label: 100% }
  .field-row{ grid-template-columns: 1fr; }
  .label-col{ align-items:flex-start; }
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
}