/* BT LABS landing page.
 * Direction: Deep field — machined, luminous, quiet. Reference feel: a hardware maker's product
 * page (Teenage Engineering, Nothing) rather than a SaaS brochure. The hero is kept from the
 * live site: a titanium emblem in a dark-blue void over a hex lattice that lights where you
 * point. Everything below it is one family: void and navy, titanium text, arc blue as the only
 * accent and only on what you can click. Montserrat throughout; tracked caps (from the wordmark)
 * are the one typographic motif. Real screens, no renders, no pills, no feature grids. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
}

:root {
  --void: #02040a;
  --navy: #0b1530;
  --deep: #050b1c;
  --surface: #0a1226;
  --ti-light: #dfe5ee;
  --ti: #9aa4b5;
  --ti-dim: #6b7585;
  --arc: #7fb2ff;
  --arc-hi: #a6c9ff;
  --line: rgba(223, 229, 238, 0.08);
  --line-strong: rgba(223, 229, 238, 0.16);
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --max: 1280px;
  --gutter: clamp(16px, 5vw, 80px);
  --r: 12px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* the lattice tile (pointy-top hexes, circumradius 24px), a file rather than a data: URI so img-src 'self' allows it */
  --hex: url('../assets/img/hex.svg');
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--ti-light);
  font-family: var(--font);
  font-size: clamp(16px, 0.3vw + 13px, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
::selection { background: rgba(127, 178, 255, 0.28); color: #fff; }
:focus-visible { outline: 2px solid var(--arc); outline-offset: 4px; border-radius: 4px; }
main:focus { outline: none; }
[id] { scroll-margin-top: 24px; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 20;
  padding: 12px 16px; border-radius: 8px;
  background: var(--arc); color: var(--void); font-weight: 600;
}
.skip:focus { top: 16px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Header: floats over the hero ------------------------------------------------------ */

.top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.top-in {
  max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ti-light); }
.brand-symbol { width: 28px; height: 28px; }
.brand-word { width: auto; height: 13px; margin-top: 1px; }
.nav ul { display: flex; gap: 4px; margin-right: -12px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ti-light); font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  opacity: 0.86; transition: opacity 0.15s;
}
.nav a:hover { opacity: 1; color: var(--arc-hi); }

/* ---- Hero: kept from the live site ------------------------------------------------------ */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(58% 52% at 50% 40%, var(--navy) 0%, var(--deep) 48%, var(--void) 100%);
}
.hero-art { position: absolute; inset: 0; z-index: -1; }
.lattice, .lattice-css { position: absolute; inset: 0; width: 100%; height: 100%; }
.lattice-css {
  background-image: var(--hex); background-size: 51.96px 90px; background-position: center top;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(70% 72% at 50% 42%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 72% at 50% 42%, #000 20%, transparent 100%);
}
.lattice { opacity: 0; }
.lattice.is-on { opacity: 1; }
.hero-art.is-live .lattice-css { display: none; }

.hero-in {
  position: relative; width: 100%; max-width: 1760px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(84px, 11vh, 132px) var(--gutter) clamp(72px, 10vh, 132px);
}
.emblem {
  width: min(720px, 50svh, 92vw);
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  animation: emblem-in 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.emblem img { width: 100%; }
@keyframes emblem-in { from { opacity: 0; } to { opacity: 1; } }

/* The kit's wordmark (outlined Montserrat, flat titanium, for dark backgrounds), used as supplied. */
.wordmark { margin-top: calc(min(720px, 50svh, 92vw) * -0.09); line-height: 0; }
.wordmark img { width: clamp(300px, 39vw, 780px); height: auto; }
.hero-line {
  margin-top: clamp(16px, 2.4vh, 32px);
  font-weight: 500; letter-spacing: -0.01em; line-height: 1.3;
  font-size: clamp(19px, 1.55vw, 34px); color: var(--ti-light); text-wrap: balance;
}
.hero-down {
  position: absolute; left: 50%; bottom: clamp(16px, 3vh, 32px); transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: var(--ti); opacity: 0.7; transition: opacity 0.15s, color 0.15s;
}
.hero-down svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-down:hover { opacity: 1; color: var(--arc-hi); }

/* ---- Shared: eyebrow labels, section rhythm --------------------------------------------- */

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ti-dim); line-height: 1;
  display: flex; align-items: center; gap: 16px;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--arc); opacity: 0.7; flex: none; }

/* ---- Products: two rows on a 12-column grid, mirrored ----------------------------------- */

.products { padding: clamp(96px, 14vh, 200px) 0; border-top: 1px solid var(--line); }
.lead {
  margin-top: clamp(20px, 3vh, 36px); max-width: 20ch;
  font-size: clamp(27px, 3.4vw, 54px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12;
  color: var(--ti-light); text-wrap: balance;
}
.product {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center;
  column-gap: clamp(16px, 2.5vw, 40px); row-gap: 40px;
  margin-top: clamp(48px, 7vh, 96px);
}
.product + .product { margin-top: clamp(72px, 10vh, 140px); }
.product-text { grid-column: 1 / span 5; }
.product-wallet .shot { grid-column: 6 / -1; }
.product-jaitalk .product-text { grid-column: 8 / span 5; grid-row: 1; }
.product-jaitalk .shot { grid-column: 1 / span 7; grid-row: 1; }

.product h3 {
  font-size: clamp(28px, 2.6vw, 42px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--ti-light); text-wrap: balance;
}
.product h3 .for { display: block; font-weight: 400; color: var(--ti); letter-spacing: -0.015em; }
.product-line {
  margin-top: 18px; max-width: 34ch;
  font-size: clamp(16px, 1.05vw, 19px); color: var(--ti); line-height: 1.6; text-wrap: pretty;
}
.product-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 28px; }
.product-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 500; font-size: 15px; color: var(--ti);
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: color 0.15s, background-size 0.25s var(--ease-out);
}
.product-links a:hover { color: var(--arc-hi); background-size: 100% 1px; }
.product-links .link-main { color: var(--arc); font-weight: 600; }
.product-links .link-main:hover { color: var(--arc-hi); }
.arrow { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.product-links a:hover .arrow { transform: translate(2px, -2px); }

/* Real screens with a hairline and a deep, tinted shadow; a soft pool of arc light under them. */
.shot { position: relative; isolation: isolate; }
.shot::before {
  content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; top: 20%; bottom: -10%;
  background: radial-gradient(50% 50% at 50% 60%, rgba(127, 178, 255, 0.14), rgba(127, 178, 255, 0.04) 45%, transparent 72%);
}
.screen {
  border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow:
    0 1px 0 rgba(223, 229, 238, 0.05) inset,
    0 30px 60px -24px rgba(0, 0, 0, 0.85),
    0 60px 120px -40px rgba(2, 4, 10, 0.9);
}
.screen-desktop { width: 100%; border-radius: var(--r); }
.screen-phone { border-radius: clamp(14px, 6%, 24px); }

.shot-wallet { padding: 0 0 12% 0; }
.shot-wallet .screen-desktop { width: 88%; }
.shot-wallet .screen-phone {
  position: absolute; right: 0; bottom: 0; width: 26%;
  border-radius: 8% / 3.6%;
}

.shot-jaitalk { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3%, 28px); padding: 0 7% 14%; }
.shot-jaitalk .screen-phone { width: 100%; border-radius: 9% / 4.3%; background: #0a0d14; }
.shot-jaitalk .phone-back { transform: translateY(12%) scale(0.94); transform-origin: top center; opacity: 0.82; }
/* The front phone: the settled call as the base, four earlier moments stacked on top that fade in
 * and out in turn (opacity only; the border and shadow sit on the container, not the frames). */
.shot-jaitalk .phone-front {
  position: relative; overflow: hidden; aspect-ratio: 404 / 720; isolation: isolate;
  border: 1px solid var(--line-strong); border-radius: 9% / 4.3%; background: #0a0d14;
  box-shadow: 0 1px 0 rgba(223, 229, 238, 0.05) inset, 0 30px 60px -24px rgba(0, 0, 0, 0.85), 0 60px 120px -40px rgba(2, 4, 10, 0.9);
}
.shot-jaitalk .frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.shot-jaitalk .frame-base { position: relative; opacity: 1; }
.shot-jaitalk .frame.is-on { opacity: 1; }
.jaitalk-lockup { display: flex; align-items: center; gap: 14px; }
.jaitalk-icon { width: clamp(36px, 2.8vw, 44px); height: auto; border-radius: 22%; flex: none; }
.jaitalk-mark { width: clamp(140px, 10vw, 176px); height: auto; }

/* ---- Footer: the close, over the faint lattice ------------------------------------------- */

.foot { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--void), var(--deep)); }
.tex {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hex); background-size: 41.569px 72px; opacity: 0.08;
  -webkit-mask-image: radial-gradient(60% 90% at 50% 100%, #000 0%, transparent 100%);
  mask-image: radial-gradient(60% 90% at 50% 100%, #000 0%, transparent 100%);
}
.foot-in { position: relative; z-index: 1; padding-top: clamp(72px, 11vh, 150px); padding-bottom: 28px; }
.foot-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px;
  padding-bottom: clamp(56px, 8vh, 110px);
}
.close-line { font-size: clamp(34px, 4.2vw, 68px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.follow { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-right: -14px; }
.follow a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  color: var(--ti-light); font-weight: 500; font-size: 15px; border-radius: 8px;
  transition: color 0.15s, background-color 0.15s;
}
.follow a:hover { color: var(--arc-hi); background: rgba(127, 178, 255, 0.06); }
.ico { width: 16px; height: 16px; fill: currentColor; flex: none; }
.legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--ti-dim); font-size: 13px; letter-spacing: 0.02em;
}
.legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ti); }
.legal a:hover { color: var(--arc-hi); }

/* ---- Reveal on scroll: a short rise and fade, only with JS ------------------------------- */

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .product.reveal { transition-duration: 0.8s; }

/* ---- Smaller screens -------------------------------------------------------------------- */

@media (max-width: 960px) {
  .product { grid-template-columns: 1fr; row-gap: 36px; }
  .product-text, .product-wallet .shot, .product-jaitalk .product-text, .product-jaitalk .shot { grid-column: 1 / -1; grid-row: auto; }
  .product-jaitalk .shot { grid-row: 2; }
  .shot { max-width: 640px; }
}
@media (max-width: 640px) {
  .brand-symbol { width: 24px; height: 24px; }
  .brand-word { height: 12px; }
  .nav a { padding: 0 10px; }
  .shot-jaitalk { padding: 0 6% 12%; }
  .shot-wallet { padding-bottom: 16%; }
  .shot-wallet .screen-desktop { width: 86%; }
  .shot-wallet .screen-phone { width: 30%; }
  .foot-row { align-items: flex-start; flex-direction: column; }
  .follow { margin-left: -14px; margin-right: 0; }
  .legal { justify-content: flex-start; gap: 4px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .emblem { animation: none; }
  .js .reveal { transform: none; transition: opacity 0.4s ease-out; }
  .shot-jaitalk .frame { transition: none; }
  .arrow, .product-links a, .nav a, .follow a, .hero-down { transition: none; }
}