:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --paper-2: #f7f7f5;
  --ink: #0d0e10;
  --ink-soft: #2a2c30;
  --ink-mute: #6b6e74;
  --ink-faint: #aeb0b4;
  --line: #ececea;
  --line-soft: #f1f0ec;
  --blue: #2a59d8;
  --blue-soft: #4d77eb;
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }
img { display: block; max-width: 100%; }

/* ---- River canvas (visible flow behind everything) ---- */
#river {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; opacity: 0.85;
}
main, nav.top, footer { position: relative; z-index: 2; }

/* ---- Layout ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap.narrow { max-width: 920px; }
@media (max-width: 720px) { .wrap { padding: 0 22px; } }

/* ---- Nav ---- */
nav.top {
  position: sticky; top: 0; z-index: 50;
  padding: 16px 0;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
nav.top .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img.mark {
  width: 26px; height: 26px;
  border-radius: 6px; object-fit: cover;
  display: block;
}
.brand .name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }

nav.top ul {
  display: flex; gap: 30px; list-style: none; padding: 0; margin: 0;
  font-size: 14.5px; color: var(--ink-mute); font-weight: 500;
}
nav.top ul a { position: relative; padding: 4px 0; transition: color 200ms ease; }
nav.top ul a:hover { color: var(--ink); }

@media (max-width: 760px) { nav.top ul { display: none; } }

/* ---- Buttons (clean, restrained) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent; color: inherit;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), background 240ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}
.btn.primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 1px 2px rgba(13,14,16,0.18), 0 4px 14px -6px rgba(13,14,16,0.30);
}
.btn.primary:hover { background: #1c1e22; }
.btn.ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(13,14,16,0.04);
}
.btn.ghost:hover { border-color: #d8d8d4; box-shadow: 0 1px 3px rgba(13,14,16,0.08); }
.btn .arr { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.btn:hover .arr { transform: translateX(3px); }

/* App store style download buttons */
.dl-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 16px;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(13,14,16,0.18), 0 6px 18px -8px rgba(13,14,16,0.35);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), background 220ms ease;
  will-change: transform;
}
.dl-btn:hover { background: #1c1e22; transform: translateY(-2px); }
.dl-btn svg { flex: 0 0 auto; width: 22px; height: 22px; }
.dl-btn .stack { display: flex; flex-direction: column; line-height: 1.05; }
.dl-btn .stack .pre { font-size: 10.5px; font-weight: 400; opacity: 0.78; letter-spacing: 0.01em; }
.dl-btn .stack .big { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
.dl-btn.outlined {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13,14,16,0.04);
}
.dl-btn.outlined:hover { background: #fafaf8; }
.dl-btn.disabled { opacity: 0.55; pointer-events: none; }

/* ---- Hero ---- */
.hero { padding: 130px 0 130px; text-align: center; }
.hero .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-mute); font-weight: 500;
  box-shadow: 0 1px 2px rgba(13,14,16,0.04);
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 800ms cubic-bezier(.2,.7,.2,1) 120ms forwards;
}
.hero h1 {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(46px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 28px auto 28px;
  max-width: 16ch;
  color: var(--ink);
}
.hero h1 .word { display: inline-block; }

.hero .lede {
  max-width: 50ch;
  margin: 0 auto 44px;
  font-size: 19px;
  color: var(--ink-mute);
  line-height: 1.5;
  opacity: 0; transform: translateY(10px);
  animation: fadeUp 900ms cubic-bezier(.2,.7,.2,1) 800ms forwards;
}
.hero .ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px);
  animation: fadeUp 900ms cubic-bezier(.2,.7,.2,1) 950ms forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---- Section base ---- */
section { padding: 80px 0; }
.sec-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-mute); font-weight: 500;
  margin-bottom: 18px;
}
.sec-label::before {
  content: ""; width: 14px; height: 1px; background: var(--ink-faint);
}
.sec-h {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0 0 18px;
  color: var(--ink);
  max-width: 22ch;
}
.sec-sub {
  color: var(--ink-mute);
  font-size: 18px;
  max-width: 52ch;
  margin: 0;
}

/* ---- Apps section (FitAI floating phone, side-by-side) ---- */
.apps { padding: 100px 0 120px; position: relative; }
.apps-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.2fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 880px) {
  .apps-grid { grid-template-columns: 1fr; gap: 56px; }
}
.apps .text-col { text-align: left; }
.apps .sec-h { max-width: 20ch; }
.apps .sec-sub { margin: 0 0 36px; }
.apps .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.apps .more {
  margin-top: 26px;
  color: var(--ink-faint); font-size: 14px;
}

.phone-stage {
  display: flex; justify-content: center; align-items: center;
  position: relative;
  perspective: 1400px;
  will-change: transform;
}
.phone-float { will-change: transform; }
.phone-tilt { transform-style: preserve-3d; will-change: transform; }
.phone {
  width: min(300px, 62vw);
  aspect-ratio: 300 / 626;
  background: #0a0b0d;
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 60px -20px rgba(13,14,16,0.30),
    0 80px 80px -40px rgba(13,14,16,0.20),
    0 0 0 1px rgba(13,14,16,0.04);
  will-change: transform;
  position: relative;
  transform: rotate(-9deg);
}
.phone::before {
  content: "";
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px;
  background: #0a0b0d;
  border-radius: 16px;
  z-index: 3;
}
.phone .screen {
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f3f0, #ffffff);
  position: relative;
}
.phone .screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.phone .screen .slate {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, rgba(42,89,216,0.10), transparent 60%),
    repeating-linear-gradient(45deg, #efeee9 0 14px, #f6f4ef 14px 28px);
  display: grid; place-items: center;
  color: var(--ink-mute); font-size: 13px; font-weight: 500;
}

/* Floating animation — CSS-driven loop on the float wrapper */
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.phone-float { animation: phoneFloat 6.5s ease-in-out infinite; }

/* ---- Section: Tools & Services ---- */
.tools { padding: 100px 0; }
.tools .head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.tools .head .sec-label { margin-bottom: 16px; }
.tools .head .sec-h { margin: 0 auto 18px; }
.tools .head .sec-sub { margin: 0 auto; }
@media (max-width: 880px) { .tools .head { margin-bottom: 44px; } }

.grid { display: grid; gap: 22px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .grid.three, .grid.two { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 380ms cubic-bezier(.2,.7,.2,1), border-color 240ms ease, box-shadow 280ms ease;
  box-shadow: 0 1px 2px rgba(13,14,16,0.03);
  overflow: hidden;
  min-height: 240px;
}
.card:hover {
  transform: translateY(-3px);
  border-color: #dcdcd6;
  box-shadow: 0 1px 2px rgba(13,14,16,0.04), 0 8px 22px -10px rgba(13,14,16,0.18);
}
.card.has-image { padding: 0; }
.card.has-image .frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.card.has-image .frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1000ms cubic-bezier(.2,.7,.2,1);
}
.card.has-image:hover .frame img { transform: scale(1.03); }
.card.has-image .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card h3 {
  margin: 0;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.card p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 15.5px;
  line-height: 1.5;
}
.card .foot {
  margin-top: auto; padding-top: 8px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.card .link {
  color: var(--blue);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14.5px; font-weight: 600;
}
.card .link:hover { color: var(--blue-soft); }
.card .link .arr { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.card .link:hover .arr { transform: translate(3px, -3px); }

.price-line {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
  font-size: 14.5px; color: var(--ink-soft);
}
.price-line strong { color: var(--ink); font-weight: 600; }

.card.muted { background: transparent; border-style: dashed; }
.card.muted h3 { color: var(--ink-soft); font-weight: 500; }
.card.muted p { color: var(--ink-faint); }

.slate {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, rgba(42,89,216,0.06), rgba(42,89,216,0) 60%),
    repeating-linear-gradient(45deg, #efeee9 0 12px, #f5f4ef 12px 24px);
  display: grid; place-items: center;
  color: var(--ink-faint); font-size: 12px; font-weight: 500;
}

/* ---- Closing line ---- */
.closing-line {
  text-align: center;
  padding: 60px 0 0;
  font-size: 18px;
  color: var(--ink-mute);
}
.closing-line strong { color: var(--ink); font-weight: 600; }

/* ---- CTA ---- */
.cta { padding: 140px 0 160px; text-align: center; }
.cta h2 {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 auto 22px; max-width: 22ch;
}
.cta p { max-width: 50ch; margin: 0 auto 36px; color: var(--ink-mute); font-size: 18px; }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--line); padding: 56px 0 30px; background: var(--paper); }
.foot-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 56px; margin-bottom: 52px;
}
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.foot-grid h5 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid ul a { font-size: 14.5px; color: var(--ink-mute); transition: color 200ms ease; }
.foot-grid ul a:hover { color: var(--ink); }
.foot-grid p { margin: 0; color: var(--ink-mute); font-size: 14px; line-height: 1.65; }
.foot-grid p strong { color: var(--ink); font-weight: 600; }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 22px;
  font-size: 13px; color: var(--ink-faint);
}

/* ---- Reveal animations ----
   JS drives the motion via the Web Animations API; CSS only holds the
   hidden state, gated on the .js root class so content stays visible
   without JavaScript. Once an element gets .in, CSS hands control back
   (opacity 1, no transform) so hover transitions never fight the reveal. */
.js .reveal:not(.in),
.js .hero h1 .word:not(.in),
.js #phoneTilt:not(.in) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in),
  .js .hero h1 .word:not(.in),
  .js #phoneTilt:not(.in) { opacity: 1; }
  .hero .pill, .hero .lede, .hero .ctas { animation: none; opacity: 1; transform: none; }
  .phone-float { animation: none; }
}