/* Plumbing for a landing page. Layout and character come from the chosen direction, not from this file. */
:root {
  --bg: #07080b; --text: #f2f3f5; --muted: #9aa0ab; --line: rgba(255, 255, 255, .1); --accent: #7aa2ff; --on-accent: #06080d;
  --font: "Inter", Arial, sans-serif; --display: var(--font); --mono: "Geist Mono", ui-monospace, monospace;
  --container: 1280px; --gutter: clamp(16px, 4vw, 64px); --section: clamp(72px, 10vw, 160px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; font-style: normal }
main { flex: 1 }
img, video, canvas, svg { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
.wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter) }
.display { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(40px, 6.2vw, 96px); text-wrap: balance }
.h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(30px, 3.6vw, 56px); text-wrap: balance }
.lead { font-size: clamp(16px, 1.35vw, 20px); color: var(--muted); max-width: 56ch; text-wrap: pretty }
.section { padding-block: var(--section) }

/* Hero stack: visual layer behind, content above. */
.hero { position: relative; min-height: min(100svh, 1100px); display: flex; overflow: hidden; isolation: isolate }
.hero-media { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; border: 0 }

/* Buttons: 44-52 px, per the measured range. */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 15px; border: 1px solid transparent; transition: opacity .2s, background-color .2s, transform .2s var(--ease); white-space: nowrap }
.cta:hover { transform: translateY(-1px) }
.cta.primary { background: var(--accent); color: var(--on-accent) }
.cta.ghost { border-color: var(--line); background: rgba(255, 255, 255, .04); backdrop-filter: blur(8px) }

/* Contract plate: first screen, under the buttons, click to copy. */
.ca { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 18px; padding: 8px 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 8px; font: 13px/1.2 var(--mono); cursor: pointer; backdrop-filter: blur(8px) }
.ca b { font-weight: 500 } .ca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }

/* Footer: pure black straight strip at the bottom of the window. */
.footer { background: #000; color: #fff; padding: 72px var(--gutter) 80px; border-radius: 0 }
.footer a { color: rgba(255, 255, 255, .72) } .footer a:hover { color: #fff }

/* Reveal on scroll. Add .in with IntersectionObserver; it stays visible without JS. */
.js .rise { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease) }
.js .rise.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, .js .rise { animation: none !important; transition: none !important; opacity: 1; transform: none } }

/* scrollbars: thin, dark, everywhere (never the browser's grey ones) */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent }
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box }
::-webkit-scrollbar-thumb:hover { background: rgba(200, 245, 60, .55); background-clip: padding-box }
::-webkit-scrollbar-corner { background: transparent }

html { background: #000; color-scheme: dark }