/* ============================================================
   aquir.ai — single-page marketing site
   Public Sans · dark-green / cream-green palette
   Two sections: hero (animated blobs) + footer. No build step.
   ============================================================ */

:root {
  --ink:         #152316;   /* headings, footer bg, body text (near-black dark green) */
  --btn:         #244224;   /* button backgrounds (medium dark green) */
  --cream-green: #ECF7D9;   /* button/footer text */
  --hero-bg:     #E4EFDA;   /* hero base background (pale sage green) */
  --glow:        #F6FBF1;   /* soft near-white mint glow */
  --cream:       #F2EDE9;   /* fallback page background (muted cream) */
  --accent-sheen: linear-gradient(58deg, rgba(136,188,216,.14), rgba(243,255,193,.14)); /* subtle button sheen */

  --r-btn:  10px;           /* rectangular buttons */
  --r-pill: 27px;           /* email input */

  --maxw-hero: 760px;
  --maxw-foot: 1080px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { display: block; }
h1 { margin: 0; }
:focus-visible { outline: 3px solid var(--btn); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--btn); color: var(--cream-green); }

/* --------------------------- shared bits ------------------------------ */
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 21px; letter-spacing: -.02em; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__mark text { font-family: "Public Sans", sans-serif; }
.brand__img { height: 30px; width: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1;
  background: var(--accent-sheen), var(--btn); color: var(--cream-green);
  border: 0; border-radius: var(--r-btn); cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--accent-sheen), #1c351c; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ============================== HERO ================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--hero-bg);
  overflow: hidden;
  isolation: isolate;
}

/* animated soft-focus glow (CSS-only) — one large mint blob + a subtle accent */
.blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }

/* primary: large twisting organic blob — morphs its silhouette and rotates
   slowly while a conic gradient sweeps color around it (mint→blue→yellow) */
.blob--glow {
  width: 58vw; height: 58vw;
  left: 21vw; top: 12%;
  background: conic-gradient(from 210deg at 50% 50%,
    #F6FBF1 0deg, #cfeecb 80deg, #a9d6ea 165deg, #eef8c4 255deg, #F6FBF1 360deg);
  border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%;
  filter: blur(52px); opacity: .9;
  animation: twist-glow 22s var(--ease) infinite;
}
/* secondary: smaller counter-twisting blob for organic depth, left side */
.blob--accent {
  width: 40vw; height: 40vw;
  left: -12%; top: 34%;
  background: conic-gradient(from 40deg at 50% 50%,
    #F6FBF1 0deg, #bfe6d6 110deg, #cfe3ee 230deg, #F6FBF1 360deg);
  border-radius: 58% 42% 38% 62% / 55% 62% 38% 45%;
  filter: blur(56px); opacity: .7;
  animation: twist-accent 18s var(--ease) infinite;
}

@keyframes twist-glow {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1);
            border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%; }
  50%     { transform: translate(3vw, 3vh) rotate(180deg) scale(1.08);
            border-radius: 62% 38% 34% 66% / 60% 55% 45% 40%; }
}
@keyframes twist-accent {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1);
            border-radius: 58% 42% 38% 62% / 55% 62% 38% 45%; }
  50%     { transform: translate(-3vw, -2vh) rotate(-160deg) scale(1.06);
            border-radius: 40% 60% 62% 38% / 42% 38% 62% 58%; }
}

.hero.is-paused .blob { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } }

/* header — transparent, on the hero */
.site-header {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 5vw, 44px);
}
.site-header .brand { color: var(--ink); }
.btn--contact { padding: 17px 22px; }

/* hero content — centered constrained column */
.hero__content {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  width: 100%; max-width: var(--maxw-hero);
  margin-inline: auto;
  padding: clamp(32px, 6vh, 72px) 24px clamp(64px, 9vh, 104px);
}
.hero h1 {
  font-weight: 700;
  font-size: clamp(34px, 9vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  overflow-wrap: break-word;
}
.hero .sub {
  margin: 22px 0 0;
  font-weight: 300;
  font-size: clamp(18px, 3.2vw, 24px);
  color: var(--ink);
}

/* email capture */
.signup { margin-top: 40px; width: 100%; max-width: 353px; text-align: left; }
.signup__label { display: block; margin-bottom: 10px; font-size: 15px; }
.signup__label b { font-weight: 700; }
.signup__label .req { color: #7c8a76; font-weight: 300; margin-left: 4px; }
.signup input {
  width: 100%; height: 50px;
  padding: 0 22px;
  font: inherit; font-weight: 400; color: var(--ink);
  background: transparent;
  border: 1px solid #9aab8f;
  border-radius: var(--r-pill);
  transition: border-color .15s, box-shadow .15s;
}
.signup input::placeholder { color: #8a9a81; }
.signup input:focus { outline: none; border-color: var(--btn); box-shadow: 0 0 0 3px rgba(36,66,36,.16); }
.signup button {
  width: 100%; height: 50px; margin-top: 12px;
  font-family: inherit; font-weight: 700; font-size: 16px;
  color: var(--cream-green); background: var(--accent-sheen), var(--btn);
  border: 0; border-radius: var(--r-btn); cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.signup button:hover { background: var(--accent-sheen), #1c351c; transform: translateY(-1px); }
.signup__ok { margin-top: 48px; max-width: 500px; color: var(--btn); }
.signup__ok[hidden] { display: none; }
.signup__ok p { margin: 0 0 12px; font-weight: 400; }
.signup__ok p:last-child { margin-bottom: 0; }
.signup__ok-title { font-weight: 700; font-size: 19px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.signup__err { margin-top: 14px; max-width: 353px; font-weight: 500; color: #9d2f1a; }
.signup__err a { color: inherit; }
.signup__err[hidden] { display: none; }

/* ============================= CONTACT ================================ */
.contact__content { max-width: 560px; align-items: stretch; text-align: left; }
.contact__title { text-align: center; font-size: clamp(34px, 7vw, 60px); line-height: 1; letter-spacing: -0.035em; color: var(--ink); }
.contact__content .sub { text-align: center; }

.contact-form { margin-top: 36px; width: 100%; display: flex; flex-direction: column; gap: 18px; }
.contact-form[hidden] { display: none; }
.field { display: flex; flex-direction: column; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
.field label { margin-bottom: 8px; font-size: 15px; }
.field label b { font-weight: 700; }
.field .req { color: #7c8a76; font-weight: 300; margin-left: 4px; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 18px;
  font: inherit; font-weight: 400; color: var(--ink);
  background: rgba(255,255,255,.35);
  border: 1px solid #9aab8f;
  border-radius: var(--r-btn);
  transition: border-color .15s, box-shadow .15s;
}
.contact-form input { height: 50px; padding-block: 0; }
.contact-form textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #8a9a81; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--btn); box-shadow: 0 0 0 3px rgba(36,66,36,.16); }

.contact-form button {
  margin-top: 6px; height: 50px;
  font-family: inherit; font-weight: 700; font-size: 16px;
  color: var(--cream-green); background: var(--accent-sheen), var(--btn);
  border: 0; border-radius: var(--r-btn); cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.contact-form button:hover { background: var(--accent-sheen), #1c351c; transform: translateY(-1px); }
.contact-form button:disabled { opacity: .7; cursor: default; }

.contact__ok { text-align: center; margin-inline: auto; }

@media (max-width: 520px) {
  .field-row { flex-direction: column; gap: 18px; }
}

/* ============================= FOOTER ================================= */
.site-footer { background: var(--ink); color: var(--cream-green); padding: 56px clamp(20px, 5vw, 44px) 40px; }
.site-footer__inner { max-width: var(--maxw-foot); margin-inline: auto; }
.site-footer__cols { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.site-footer .brand { color: var(--cream-green); }
.footer-links { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { color: var(--cream-green); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { opacity: .85; }
.site-footer__blurb { max-width: 34ch; text-align: right; font-size: 16px; line-height: 1.5; color: var(--cream-green); }
.site-footer__rule { margin: 44px 0 18px; border: 0; border-top: 1px solid rgba(236,247,217,.22); }
.site-footer__copy { font-size: 13.5px; color: rgba(236,247,217,.7); }

@media (max-width: 620px) {
  .site-footer__cols { flex-direction: column; gap: 28px; }
  .site-footer__blurb { text-align: left; max-width: none; }
}