/* 427 ft — B2B minimal theme
   Clean, modern, and professional. Neutral palette with strong typography.
*/
:root{
  --bg: #ffffff;
  --ink: #0b1220;
  --muted: #556070;
  --line: #e6e9ee;
  --brand: #0f172a;        /* deep slate */
  --brand-ink: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.05);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{width:min(1100px, 92vw); margin:0 auto;}

.site-header{
  position:sticky; top:0; z-index:20;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand-mark{height:40px; width:auto; user-select:none; -webkit-user-drag:none;}

.hero{display:grid; place-items:center; padding:72px 0 56px;}
.hero-inner{display:grid; justify-items:center; gap:18px; text-align:center;}
.hero-logo{width:min(520px, 80vw); height:auto; filter: drop-shadow(0 12px 40px rgba(0,0,0,.08));}
.tagline{margin:6px 0 4px; font-size:18px; color:var(--muted)}

.btn{
  appearance:none; border:none; cursor:pointer;
  display:inline-grid; place-items:center;
  height:42px; padding:0 18px; border-radius:999px;
  font-weight:600; letter-spacing:.2px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.08); }
.btn:active{ transform: translateY(0); }
.btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }

.btn-primary{ background:var(--brand); color:var(--brand-ink); }
.btn-lg{ height:46px; padding:0 22px; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(13,16,24,.55); backdrop-filter: blur(6px); padding:20px; z-index:50; }
.modal.show{ display:flex; }
.dialog{
  width:min(720px, 96vw); background:#fff; border-radius: var(--radius);
  box-shadow: 0 40px 100px rgba(0,0,0,.25);
  overflow:hidden; border:1px solid var(--line);
}
.modal-close{
  position:absolute; margin:14px; right:0; top:0; z-index:2;
  font-size:28px; line-height:1; border:none; background:#fff0; color:#667085; cursor:pointer;
}
.dialog-header{ padding:26px 26px 8px; border-bottom:1px solid var(--line); }
.dialog-header h2{ margin:0 0 6px; font-size:22px; font-weight:700; }
.dialog-header .subtle{ margin:0 0 2px; color:var(--muted); }

.form{ padding:20px 26px 26px; display:grid; gap:16px; }
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.field{ display:grid; gap:8px; font-size:14px; color:#334155; }
.field span{ font-weight:600; color:#101828; }
.field-notes textarea{ min-height: 104px; }

input, textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:15px;
  transition: border-color .12s ease, box-shadow .12s ease;
  background:#fff;
}
textarea{ resize:vertical; }
input:focus, textarea:focus{
  outline:none; border-color:#c8cdd6; box-shadow: 0 0 0 4px rgba(16,24,40,.08);
}

.form-actions{ display:flex; gap:14px; align-items:center; }
.form-msg{ min-height:1.2em; font-size:14px; }
.form-msg.success{ color:#166534; }
.form-msg.error{ color:#b42318; }

.btn-spinner{
  display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); border-top-color:#fff; margin-left:10px;
  animation: spin .8s linear infinite;
}
.loading .btn-text{ display:none; }
.loading .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Footer note */
.footnotes{ padding:40px 0 56px; text-align:center; }
.note{ color:#98a2b3; font-size:13px; margin:0; }

/* Responsive */
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
  .dialog-header{ padding:22px 18px 8px; }
  .form{ padding:16px 18px 18px; }
}