/* Springlab — a small studio for apps that move like real things.
   Art direction: night ink and warm paper, one jade, one amber. Geist, set large and light.
   Every movement is a spring (the same curves as the apps' Motion tokens). */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --night: #0E0E0C;
  --night-2: #161614;
  --night-line: rgba(243, 242, 238, 0.12);
  --paper: #F3F2EE;
  --paper-2: #E9E7E0;
  --paper-line: rgba(18, 18, 16, 0.12);
  --ink: #121210;
  --ink-soft: #5E5D58;
  --light: #F3F2EE;
  --light-soft: #A3A29D;
  --jade: #45D6A8;
  --jade-deep: #0A7A5E;
  --jade-night: #062A20;
  --amber: #F2B84B;
  --amber-deep: #8A5A00;
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1320px;
  /* Springs, sampled from x(t) of a damped spring: default (ζ 0.62) and bouncy (ζ 0.42). */
  --spring: linear(0, 0.0238, 0.0862, 0.1747, 0.2789, 0.3902, 0.5017, 0.6082, 0.7063, 0.7935, 0.8685, 0.9309, 0.9811, 1.0196, 1.0478, 1.0668, 1.0781, 1.083, 1.083, 1.0791, 1.0726, 1.0645, 1.0554, 1.046, 1.0369, 1.0283, 1.0206, 1.0138, 1.0081, 1.0034, 0.9998, 0.997, 0.9951, 0.9938, 0.9932, 0.993, 0.9932, 0.9937, 0.9943, 0.995, 0.9958, 0.9966, 0.9973, 0.998, 0.9986, 0.9991, 0.9995, 0.9999, 1);
  --spring-bouncy: linear(0, 0.029, 0.107, 0.2203, 0.3558, 0.5019, 0.6481, 0.7864, 0.9105, 1.0161, 1.1008, 1.1638, 1.2057, 1.2281, 1.2335, 1.2247, 1.2051, 1.1776, 1.1454, 1.1111, 1.0771, 1.0452, 1.0168, 0.9929, 0.9739, 0.9599, 0.9509, 0.9463, 0.9456, 0.948, 0.953, 0.9596, 0.9672, 0.9753, 0.9832, 0.9905, 0.997, 1.0024, 1.0067, 1.0098, 1.0117, 1.0126, 1.0127, 1.012, 1.0108, 1.0092, 1.0074, 1.0055, 1.0037, 1);
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring: cubic-bezier(.2, 1.2, .3, 1); --spring-bouncy: cubic-bezier(.3, 1.6, .4, 1); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--light);
  font: 17px/1.55 "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 4px; border-radius: 8px; }
::selection { background: var(--jade); color: var(--night); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.paper { background: var(--paper); color: var(--ink); }
.paper ::selection { background: var(--jade-deep); color: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.overline { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light-soft); margin: 0; }
.paper .overline { color: var(--ink-soft); }
.display {
  font-size: clamp(54px, 10.4vw, 168px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.055em;
  margin: 0;
}
.display em { font-style: normal; color: var(--jade); }
.h2 { font-size: clamp(40px, 6.4vw, 96px); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em; margin: 0; }
.h3 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--light-soft); max-width: 30em; margin: 0; }
.paper .lead { color: var(--ink-soft); }

/* ---------- Header ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; mix-blend-mode: difference; color: #fff; pointer-events: none; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.top a { pointer-events: auto; text-decoration: none; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.mark svg { width: 30px; height: 30px; }
.nav { display: flex; gap: clamp(16px, 3vw, 34px); font-size: 15px; font-weight: 500; }
.nav a { padding: 12px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .7s var(--spring); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 560px) { .nav .wide { display: none; } }

/* ---------- Hero: a live level ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 120px 0 56px; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background: radial-gradient(40% 40% at var(--gx, 70%) var(--gy, 45%), rgba(69, 214, 168, calc(0.10 + var(--glow, 0) * 0.32)), transparent 70%);
  transition: background .2s linear;
}
.hero .wrap { width: 100%; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero { align-items: start; } }
.hero .copy { display: grid; gap: 28px; padding-bottom: 8px; }
.hero .copy .lead { color: var(--light-soft); }

.instrument { justify-self: center; width: min(460px, 86vw); display: grid; gap: 18px; justify-items: center; }
.vial { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; }
.vial svg.scale { position: absolute; inset: 0; width: 100%; height: 100%; }
.bubble {
  position: absolute; left: 50%; top: 50%; width: 18.75%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.25) 24%, rgba(69,214,168,0.96) 52%, #0B6B53 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 -8px 16px rgba(0,40,28,0.35), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 calc(var(--glow, 0) * 80px) calc(var(--glow, 0) * 18px) rgba(69,214,168,0.55);
  will-change: transform;
}
.readout { display: flex; align-items: baseline; gap: 14px; }
.readout .num { font-size: clamp(48px, 6vw, 76px); font-weight: 300; letter-spacing: -0.05em; line-height: 1; transition: color .5s var(--spring); }
.readout .num sup { font-size: 0.55em; vertical-align: 0.55em; margin-left: 2px; }
.readout .state { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light-soft); }
.hero.level .readout .num, .hero.level .readout .state { color: var(--jade); }
.try { font-size: 14px; color: var(--light-soft); text-align: center; min-height: 1.5em; }
.try button { font: inherit; color: var(--jade); background: none; border: 1px solid rgba(69,214,168,0.4); border-radius: 999px; padding: 8px 16px; cursor: pointer; }

.scroll-cue { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; width: 1px; height: 44px; background: linear-gradient(var(--light-soft), transparent); animation: cue 2.4s var(--spring) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--night-line); overflow: hidden; white-space: nowrap; padding: 22px 0; }
.marquee .track { display: inline-flex; gap: 48px; animation: marquee 38s linear infinite; font-size: clamp(20px, 2.4vw, 30px); font-weight: 300; letter-spacing: -0.02em; }
.marquee span { display: inline-flex; align-items: center; gap: 48px; }
.marquee span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 18px var(--jade); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { position: relative; }
.pad { padding: clamp(96px, 14vw, 200px) 0; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; } }

/* ---------- Apps ---------- */
.apps { display: grid; gap: clamp(16px, 2vw, 28px); }
.app {
  position: relative; overflow: hidden; border-radius: clamp(28px, 3vw, 44px);
  display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(560px, 62vw, 760px);
  color: var(--light); text-decoration: none; isolation: isolate;
}
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } }
.app.jade { background: radial-gradient(120% 90% at 85% 10%, #145A47 0%, var(--jade-night) 45%, #04140F 100%); }
.app.amber { background: radial-gradient(120% 90% at 85% 10%, #5A3E0A 0%, #2A1D05 50%, #120C02 100%); }
.app .info { padding: clamp(28px, 4vw, 64px); display: flex; flex-direction: column; gap: 22px; z-index: 2; }
.app .info .icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.app .facts { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 0; border-top: 1px solid var(--night-line); }
.app .facts li { padding: 14px 0; border-bottom: 1px solid var(--night-line); color: var(--light-soft); font-size: 16px; display: flex; gap: 14px; }
.app .facts li b { color: var(--light); font-weight: 500; min-width: 1.6em; }
.app .go { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; font-weight: 500; }
.app .go .arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(243,242,238,0.3); transition: transform .8s var(--spring), background .4s; }
.app:hover .go .arrow { transform: translateX(8px) rotate(-45deg); background: var(--light); color: var(--night); }
.pill { align-self: flex-start; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(243,242,238,0.1); color: var(--light); }
.app.jade .pill { background: rgba(69,214,168,0.16); color: var(--jade); }
.app.amber .pill { background: rgba(242,184,75,0.16); color: var(--amber); }
.app .stage { position: relative; min-height: 420px; }
.app .stage .phone { position: absolute; width: clamp(200px, 22vw, 300px); }
.app .stage .phone.a { left: 8%; top: 12%; rotate: -6deg; }
.app .stage .phone.b { right: 6%; top: 26%; rotate: 5deg; }
@media (max-width: 860px) { .app .stage { min-height: 560px; margin-top: 48px; } .app .stage .phone.a { left: 4%; } .app .stage .phone.b { right: 2%; } }

.phone { border-radius: 38px; padding: 8px; background: #050504; box-shadow: 0 50px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) inset; will-change: transform; }
.phone img { width: 100%; height: auto; border-radius: 31px; }

/* ---------- Craft ---------- */
.craft-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(16px, 2vw, 28px); }
@media (max-width: 900px) { .craft-grid { grid-template-columns: 1fr; } }
.tile { background: var(--night-2); border: 1px solid var(--night-line); border-radius: 36px; padding: clamp(24px, 3vw, 44px); display: grid; gap: 22px; align-content: start; }
.tile p { color: var(--light-soft); margin: 0; max-width: 32em; }
.springs { display: grid; gap: 16px; margin-top: 8px; }
.track { cursor: pointer; position: relative; height: 56px; border-radius: 999px; background: rgba(243,242,238,0.04); border: 1px solid var(--night-line); }
.track .ball { position: absolute; top: 50%; left: 6px; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0%, rgba(255,255,255,0.3) 24%, var(--jade) 55%, #0B6B53 100%); will-change: transform; }
.spring-row { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.spring-row .label { font-size: 13px; color: var(--light-soft); letter-spacing: 0.04em; }
.track.bouncy .ball { background: radial-gradient(circle at 34% 28%, #fff 0%, rgba(255,255,255,0.3) 24%, var(--amber) 55%, #8A5A00 100%); }
.btn { font: inherit; font-weight: 500; color: var(--night); background: var(--light); border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; justify-self: start; transition: transform .6s var(--spring-bouncy); }
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(0.96); }
.dial { width: min(320px, 100%); justify-self: center; margin: 8px 0; }
.haptics { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.haptics div { border: 1px solid var(--night-line); border-radius: 18px; padding: 14px; font-size: 14px; color: var(--light-soft); }
.haptics b { display: block; color: var(--light); font-weight: 500; margin-bottom: 2px; }

/* ---------- Promises ---------- */
.promises { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--paper-line); }
.promises li { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 24px; padding: clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--paper-line); align-items: baseline; }
.promises .n { font-size: 15px; color: var(--jade-deep); font-weight: 500; }
.promises p { color: var(--ink-soft); margin: 0; max-width: 30em; }
@media (max-width: 800px) { .promises li { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Contact + footer ---------- */
.contact { text-align: left; }
.contact a.mail { display: inline-block; font-size: clamp(36px, 7vw, 112px); font-weight: 300; letter-spacing: -0.05em; line-height: 1; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .9s var(--spring), color .4s; padding-bottom: 8px; }
.contact a.mail:hover { background-size: 100% 1px; color: var(--jade); }
.wordmark { font-size: clamp(80px, 21vw, 340px); font-weight: 600; letter-spacing: -0.07em; line-height: 0.8; margin: clamp(64px, 10vw, 140px) 0 0; color: transparent; -webkit-text-stroke: 1px rgba(243,242,238,0.22); user-select: none; white-space: nowrap; }
footer { padding: 28px 0 40px; color: var(--light-soft); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer a { color: var(--light-soft); text-decoration: none; }
footer a:hover { color: var(--light); }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------- App pages ---------- */
.app-hero { padding: 150px 0 40px; position: relative; overflow: hidden; isolation: isolate; }
.app-hero.jade::before, .app-hero.amber::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.app-hero.jade::before { background: radial-gradient(70% 60% at 80% 0%, rgba(69,214,168,0.22), transparent 70%); }
.app-hero.amber::before { background: radial-gradient(70% 60% at 80% 0%, rgba(242,184,75,0.2), transparent 70%); }
.app-hero .head { display: flex; gap: 20px; align-items: center; margin-bottom: 36px; }
.app-hero .head img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 14px 40px rgba(0,0,0,0.4); }
.app-hero .lead { margin-top: 28px; }
.reel { display: flex; gap: clamp(14px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 56px var(--gutter) 40px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.reel img { flex: 0 0 auto; width: clamp(220px, 24vw, 300px); height: auto; border-radius: 26px; scroll-snap-align: center; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--paper-line); }
.features div { padding: 32px 0; border-bottom: 1px solid var(--paper-line); }
.features h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 12px; }
.features ul { margin: 0; padding: 0; list-style: none; color: var(--ink-soft); }
.features li { padding: 6px 0 6px 20px; position: relative; }
.features li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 8px; height: 8px; border-radius: 50%; background: var(--jade-deep); }
.amber-page .features li::before { background: var(--amber-deep); }
.note { margin-top: 40px; padding-left: 18px; border-left: 2px solid var(--jade-deep); color: var(--ink-soft); max-width: 46em; }
.paper a { color: var(--ink); }

/* ---------- Reveal on scroll (springs) ---------- */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform 1.1s var(--spring); transition-delay: var(--d, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--spring); transition-delay: calc(var(--i) * 55ms); }
.split.in .w > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .split .w > span { opacity: 1; transform: none; transition: none; }
  .marquee .track, .scroll-cue { animation: none; }
  .nav a::after, .app .go .arrow, .btn { transition: none; }
}