/* Ivers Studio: shared tokens and parts for the studio pages (08 agents, 09 design).
 * Quiet type, a lot of room, one accent. Motion is slow and eased, never bouncy. */
:root {
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --dim: #86868b;
  --faint: #a1a1a6;
  --line: #e3e3e8;
  --paper: #ffffff;
  --paper-2: #f5f5f7;
  --accent: #1F5BFF;
  --accent-hi: #9db4ff;
  --accent-soft: #e8eeff;
  --ok: #1a7f4b;

  --display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --r-lg: 22px;
  --r-xl: 30px;
  --gut: 22px;

  color-scheme: light;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
img, svg, canvas { display: block; }
a { color: inherit; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: clamp(96px, 13vw, 168px) 0; }

/* ---------- nav: dark glass over dark sections, light glass over light ones ---------- */
.nav {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 max(var(--gut), calc(50vw - 580px));
  color: #f5f5f7; background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 500ms var(--ease), color 500ms var(--ease), border-color 500ms;
}
.nav.light { color: var(--ink); background: rgba(255, 255, 255, 0.72); border-bottom-color: rgba(0, 0, 0, 0.07); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.brand i { position: relative; width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #8fb0ff, var(--accent) 50%, #5b3df5); box-shadow: 0 2px 10px rgba(60, 100, 255, 0.45); }
.brand i::before, .brand i::after { content: ''; position: absolute; left: 50%; background: #fff; border-radius: 2px; transform: translateX(-50%); }
.brand i::before { top: 4px; width: 3px; height: 3px; border-radius: 50%; }
.brand i::after { top: 8.5px; width: 3px; height: 7.5px; }
.nav .links { display: flex; gap: 30px; font-size: 13.5px; }
.nav .links a { text-decoration: none; opacity: 0.72; transition: opacity 200ms; }
.nav .links a:hover, .nav .links a.on { opacity: 1; }
.nav .pill { text-decoration: none; font-size: 13px; font-weight: 500; color: #fff; background: var(--accent); padding: 6px 14px; border-radius: 999px; transition: background 200ms; }
.nav .pill:hover { background: #1a4fe0; }

/* ---------- type ---------- */
.kicker { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: 0; }
[data-theme='dark'] .kicker { color: var(--accent-hi); }
.display { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; }
.h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; font-size: clamp(40px, 6vw, 80px); }
.dim { color: var(--dim); }
.lead { margin: 0; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.42; color: var(--muted); letter-spacing: -0.01em; }

/* ---------- actions ---------- */
.ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.btn { display: inline-block; text-decoration: none; font-size: 17px; font-weight: 500; color: #fff; background: var(--accent); padding: 13px 26px; border-radius: 999px; transition: background 200ms, transform 300ms var(--ease); }
.btn:hover { background: #1a4fe0; }
.btn:active { transform: scale(0.98); }
.lnk { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; font-size: 17px; color: var(--accent); }
.lnk svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease); }
.lnk:hover svg { transform: translateX(3px); }
[data-theme='dark'] .lnk { color: var(--accent-hi); }

/* ---------- motion: the hero rises once on load; everything else rises as it comes into view ---------- */
.rise { opacity: 0; transform: translateY(26px); filter: blur(10px); animation: rise 1500ms var(--ease) forwards; }
.rise:nth-child(2) { animation-delay: 140ms; }
.rise:nth-child(3) { animation-delay: 300ms; }
.rise:nth-child(4) { animation-delay: 440ms; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.rv { opacity: 0; transform: translateY(34px); transition: opacity 1000ms var(--ease), transform 1300ms var(--ease); }
.rv.in { opacity: 1; transform: none; }

.cue { position: absolute; z-index: 1; left: 50%; bottom: 26px; width: 1px; height: 36px; margin-left: -0.5px; background: rgba(255, 255, 255, 0.16); overflow: hidden; opacity: 0; animation: rise 1200ms var(--ease) 1400ms forwards; filter: none; }
.cue i { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: #fff; animation: drip 2000ms var(--ease-io) infinite; }
@keyframes drip { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(260%); } }

/* ---------- closing band and footer ---------- */
.end { position: relative; overflow: hidden; background: #000; color: #fff; text-align: center; padding: clamp(130px, 18vw, 220px) 0 clamp(120px, 15vw, 180px); }
.end::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 110%, rgba(77, 130, 255, 0.45), rgba(110, 80, 255, 0.12) 50%, transparent 72%); }
.end .wrap { position: relative; }
.end .display { font-size: clamp(44px, 7.4vw, 104px); max-width: 13ch; margin: 0 auto 24px; }
.end .lead { color: rgba(255, 255, 255, 0.68); margin-bottom: 38px; }
.end .ctas { justify-content: center; }
.foot { background: #000; color: var(--dim); font-size: 13px; border-top: 1px solid #1d1d1f; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; padding-top: 26px; padding-bottom: 26px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; }

@media (max-width: 760px) {
  .nav .links { display: none; }
  .sec { padding: 96px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rv, .cue { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .cue i { animation: none; }
}

/* Gradient text is painted only inside its box, and tight tracking pulls the box in past the last
 * letter's ink. A little room at each line's end, given back with margin, keeps the last letter whole. */
.hero h1 span, .say .w.k { padding: 0 .08em 0.04em 0; margin-right: -.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }