/* EnquireRev marketing site. Layout: one continuous deep black scene. The rising enquiries sit behind the whole page, fixed to the screen, so the hero and the waitlist are two moments of the same picture with no edge between them. Grey is an enquiry; green is revenue, and the words that matter. */
:root {
  color-scheme: dark;
  --black: #030504; --raised: #0c120f; --line: rgba(190, 215, 203, 0.16); --line-strong: rgba(190, 215, 203, 0.3);
  --fg: #f3fff8; --text: #c9d4ce; --muted: #8f9d96; --enquiry: #a9b4ae; --green: #6ff0ae; --on-green: #04130c;
  --display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
body { background: var(--black); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.6; }
h1, h2, p { margin: 0; }
.hl { color: var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.in { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; font: 600 0.98rem var(--body); text-decoration: none; border: 0; cursor: pointer; background: var(--green); color: var(--on-green); transition: background-color 160ms ease; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 0.9rem; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #8df5c0; } }

/* The scene behind everything */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-out); }
.t-bg .sky { opacity: 1; }
.sky i, .sky canvas { position: absolute; inset: 0; display: block; }
.sky canvas { width: 100%; height: 100%; }
.sky .l1 { overflow: hidden; }
.sky .l1::before { content: ""; position: absolute; inset: 0 0 -240px 0; background: repeating-linear-gradient(to top, rgba(25, 195, 125, 0) 0, rgba(25, 195, 125, 0.085) 120px, rgba(25, 195, 125, 0) 240px); animation: up240 8s linear infinite; }
.sky .l2 { background: radial-gradient(110% 70% at 50% 118%, rgba(25, 195, 125, 0.26), rgba(3, 5, 4, 0) 62%), radial-gradient(90% 55% at 50% -12%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 70%); }
.sky .scrim { background: radial-gradient(44% 44% at 50% 52%, rgba(3, 5, 4, 0.9), rgba(3, 5, 4, 0.55) 56%, rgba(3, 5, 4, 0) 100%); }
@keyframes up240 { to { transform: translateY(-240px); } }
.page { position: relative; z-index: 1; }

/* The top bar stays on screen, so the name has somewhere to dock. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--black); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: linear-gradient(to bottom, rgba(3, 5, 4, 0.92), rgba(3, 5, 4, 0)); }
.nav > .in { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.logo { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1; letter-spacing: -0.035em; color: var(--fg); text-decoration: none; }
.dock { display: inline-block; transform-origin: 0 0; will-change: transform; }
.rest { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.w { display: inline-block; }
.logo i, .word i { font-style: normal; color: var(--green); }

/* First moment: the name */
.hero { min-height: clamp(520px, calc(92vh - 68px), 820px); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.hero .content { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding-block: 24px 96px; will-change: transform, opacity; }
.word { font-family: var(--display); font-weight: 700; font-size: clamp(2.9rem, 10vw, 7rem); line-height: 1; letter-spacing: -0.035em; color: var(--fg); display: inline-block; white-space: nowrap; clip-path: inset(100% -5% 0 -5%); transform: translateY(12%); transition: clip-path 700ms var(--ease-out), transform 700ms var(--ease-out); }
.t-title .word { clip-path: inset(-10% -5% -15% -5%); transform: none; }
.motto { font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2.9vw, 1.9rem); letter-spacing: -0.01em; color: var(--fg); }
.motto .enq { color: var(--enquiry); }
.motto span { display: inline-block; opacity: 0; transform: translateY(40%); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.motto .i1 { transition-delay: 60ms; } .motto .i2 { transition-delay: 120ms; } .motto .i3 { transition-delay: 180ms; }
.t-motto .motto span { opacity: 1; transform: none; }
.ui { display: flex; flex-direction: column; align-items: center; gap: 22px; opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.t-ui .ui { opacity: 1; transform: none; }
.sub { max-width: 40ch; font-size: clamp(1rem, 1.7vw, 1.15rem); color: var(--text); text-wrap: balance; }
.cue { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity 400ms var(--ease-out); }
.t-ui .cue { opacity: 1; }
.cue svg { width: 18px; height: 18px; stroke: var(--green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Second moment: the waitlist. Same scene, no edge. */
.wait { min-height: calc(100vh - 150px); display: flex; align-items: center; padding-block: 10vh 6vh; }
.wait .box, .wait .wrest { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; margin: 0 auto; max-width: 720px; width: 100%; will-change: transform, opacity; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.wait .lede { max-width: 46ch; font-size: clamp(1rem, 1.7vw, 1.15rem); text-wrap: balance; }
form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; width: 100%; max-width: 680px; background: rgba(12, 18, 15, 0.86); border: 1px solid var(--line-strong); border-radius: 18px; padding: 10px; text-align: left; }
form label { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; border-radius: 10px; min-width: 0; }
form label span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
form input { font: 500 1rem var(--body); color: var(--fg); background: none; border: 0; padding: 2px 0; min-width: 0; width: 100%; }
form input::placeholder { color: #65726b; }
form input:focus-visible { outline: none; }
form label:focus-within { background: rgba(111, 240, 174, 0.08); box-shadow: inset 0 0 0 1px var(--green); }
form .btn { align-self: stretch; min-height: 56px; }
@media (max-width: 700px) { form { grid-template-columns: minmax(0, 1fr); } }
.status { min-height: 1.6em; font-size: 0.95rem; color: var(--muted); }
.status.ok { color: var(--green); font-weight: 600; }

footer > .in { padding-block: 18px 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; font-size: 0.86rem; color: var(--muted); }

.instant, .instant * { transition: none !important; }
.reduce .sky .l1::before { animation: none !important; }
.reduce .word, .reduce .motto span, .reduce .ui, .reduce .cue, .reduce .sky { transition: opacity 200ms ease !important; transform: none !important; clip-path: none !important; }


/* A field that people never see and bots fill in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
footer .logo { font-size: 1rem; }
.status a.quiet { color: inherit; text-decoration: underline; }