/* Smart Follow Ups — Contact / Book a Demo (existing Web3Forms form)
   Visual design follows the original pale background, Inter and blue/green accents. */
.contact-hero{
  min-height:calc(100vh - 215px);
  padding:78px 0 110px;
  position:relative;
  overflow:hidden;
  background:
   radial-gradient(ellipse 55% 40% at 5% 12%,rgba(59,130,246,.12),transparent),
   radial-gradient(ellipse 55% 45% at 95% 3%,rgba(16,185,129,.12),transparent),
   #f7f8fc;
}
.contact-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(59,130,246,.11) .75px,transparent .75px);
  background-size:25px 25px;
  mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent);
}
.contact-hero-wrap{position:relative;max-width:1180px;margin:0 auto}
.contact-heading{max-width:800px;margin:0 auto 43px;text-align:center}
.contact-heading .eyebrow{font-size:11px}
.contact-heading h1{
  font-family:Inter,system-ui,sans-serif;
  color:#0f172a;font-size:clamp(48px,5.5vw,69px);font-weight:800;
  letter-spacing:-.06em;line-height:1.12;margin:21px 0 18px
}
.contact-heading p{
  font-size:clamp(17px,1.7vw,20px);line-height:1.75;
  color:#475569;max-width:690px;margin:0 auto;
}
.contact-card{
  max-width:780px;margin:0 auto;padding:42px;
  background:#fff;border:1px solid #e2e8f0;border-radius:19px;
  box-shadow:0 24px 57px -36px rgba(15,23,42,.3);
  position:relative;overflow:hidden;
}
.contact-card:before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#3b82f6,#10b981);
}
.contact-form{display:flex;flex-direction:column;gap:21px;text-align:left}
.contact-name-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;
}
.contact-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.contact-field label{
  display:block;color:#334155;font-size:14px;line-height:1.4;
  font-weight:650;letter-spacing:-.015em;
}
.contact-field input,.contact-field textarea{
  display:block;box-sizing:border-box;width:100%;min-width:0;
  padding:14px 16px;border:1px solid #d9e3f0;border-radius:11px;
  background:#fbfcff;color:#0f172a;font-family:Inter,system-ui,sans-serif;
  font-size:16px;line-height:1.5;font-weight:400;
  transition:background-color .2s,border-color .2s,box-shadow .2s;
}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#91a0b3;opacity:1}
.contact-field input:hover,.contact-field textarea:hover{border-color:#b7cee9}
.contact-field input:focus,.contact-field textarea:focus{
  outline:none;border-color:#3b82f6;background:#fff;
  box-shadow:0 0 0 3px rgba(59,130,246,.11);
}
.contact-field textarea{min-height:155px;resize:vertical}
.contact-submit{
  min-height:53px;display:flex;align-items:center;justify-content:center;
  width:100%;border:0;border-radius:11px;padding:15px 22px;
  background:linear-gradient(105deg,#3b82f6,#10b981);
  color:#fff;font-size:16px;font-weight:750;cursor:pointer;
  transition:transform .2s,box-shadow .2s,opacity .2s;
  box-shadow:0 13px 24px -15px rgba(30,96,186,.48);
}
.contact-submit:hover:not(:disabled){
  transform:translateY(-2px);box-shadow:0 16px 28px -13px rgba(30,96,186,.45);
}
.contact-submit:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
.contact-submit:disabled{cursor:wait;opacity:.72;transform:none}
.contact-form-status{
  font-size:15px;line-height:1.6;padding:13px 15px;
  border-radius:10px;text-align:left;
}
.contact-form-status[hidden]{display:none!important}
.classic-site-nav a.contact-cta{
  color:#fff;background:linear-gradient(110deg,#3b82f6,#10b981);
  border-radius:9px;box-shadow:0 8px 17px -12px #2179b3
}
.classic-site-nav a.contact-cta:hover{
  color:#fff;filter:brightness(.97);transform:translateY(-1px)
}
.classic-site-nav a.contact-cta[aria-current="page"]{
  color:#fff;background:linear-gradient(110deg,#3b82f6,#10b981);
}
@media(max-width:850px){
  .contact-hero{padding:67px 0 83px}
  .contact-card{max-width:700px}
}
@media(max-width:650px){
  .contact-hero{padding:55px 0 67px}
  .contact-heading{margin-bottom:31px}
  .contact-heading h1{font-size:clamp(42px,10vw,54px)}
  .contact-heading p{font-size:17px;line-height:1.7}
  .contact-card{padding:27px 22px;border-radius:17px}
  .contact-form{gap:19px}
  .contact-name-row{grid-template-columns:1fr;gap:19px}
  .contact-field input,.contact-field textarea{font-size:16px}
  .classic-site-nav a.contact-cta{justify-content:flex-start}
}
@media(max-width:350px){
  .contact-card{padding:22px 16px}
  .contact-heading h1{font-size:40px}
}
@media(prefers-reduced-motion:reduce){
  .contact-submit,.contact-field input,.contact-field textarea,
  .classic-site-nav a.contact-cta{transition:none!important}
}