/* Smart TimeCard — cinematic landing page.
   First-party only: no web fonts, no CDNs, no third-party requests. The whole
   film is CSS 3D + a tiny scroll script that maps scroll progress onto a handful
   of custom properties. Under prefers-reduced-motion the film collapses to a
   single readable tableau and the page reads as an ordinary document.

   The opening reproduces the app's Smart Setup mood (BrandIntroView): a calm,
   airy near-white field with soft luminous blue-white bands drifting past.

   Film beats:
     1. calm open — THE Smart TimeCard
     2. on scroll — THE cross-fades to YOUR
     3. the phone rises with the app icon already on its screen, then opens
     4. brand lines fly out of the phone, toward the viewer */

:root {
  --depth-ease: cubic-bezier(.22, .61, .36, 1);
  --glass:      color-mix(in srgb, var(--surface-2) 82%, transparent);
  --glass-line: color-mix(in srgb, var(--ink) 12%, transparent);
  --grad:       linear-gradient(120deg, var(--teal), var(--rust));

  /* scroll-driven stage variables, set by JS. Defaults = calm open. */
  --p: 0; --word: 0; --intro: 1; --morph: 0; --feat: 0; --badge: 0; --nav: 0;
  --S: clamp(180px, 32vmin, 240px);
}

/* ================================================================== *
 * Airy Smart-Setup background — fixed, always gently drifting.
 * ================================================================== */
/* clip (not hidden) prevents sideways scroll WITHOUT making these a scroll
   container — hidden would break the film's position:sticky pinning. */
html, body { overflow-x: clip; }

.airy {
  position: fixed; inset: 0; z-index: -3; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, #ffffff, #eef5ff 45%, #ffffff 100%);
}
@media (prefers-color-scheme: dark) {
  .airy { background: radial-gradient(130% 100% at 50% -10%, #101216, #000 60%, #000 100%); }
  /* On the home page, dark surfaces go near-black (not navy) so cards, chips
     and the band read as black elevation, matching the black field. */
  :root {
    --surface:   #050506;
    --surface-2: #14161b;
    --line:      rgba(250, 237, 227, .12);
  }
  .siteheader { background: transparent; }
}
.airy__band {
  position: absolute; left: 50%; height: 150px; width: 170%; border-radius: 999px;
  filter: blur(34px); opacity: .9; will-change: transform;
  background: linear-gradient(90deg, transparent 0%, rgba(183,212,255,.10) 18%,
    rgba(255,255,255,.95) 42%, rgba(146,194,250,.55) 60%, rgba(255,255,255,.78) 78%, transparent 100%);
}
@media (prefers-color-scheme: dark) {
  /* Black field with a living cool shimmer that clearly drifts. */
  .airy__band { opacity: .3;
    background: linear-gradient(90deg, transparent 0%, rgba(74,180,186,.32) 40%,
      rgba(120,170,240,.26) 62%, transparent 100%); }
}
.airy__band--1 { top: 16%; animation: drift1 17s ease-in-out infinite alternate; }
.airy__band--2 { top: 52%; height: 180px; animation: drift2 21s ease-in-out infinite alternate; }
.airy__band--3 { top: 78%; height: 120px; animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translateX(-62%) rotate(-16deg); } to { transform: translateX(-38%) rotate(-11deg); } }
@keyframes drift2 { from { transform: translateX(-34%) rotate(-19deg) scaleX(-1); } to { transform: translateX(-58%) rotate(-25deg) scaleX(-1); } }
@keyframes drift3 { from { transform: translateX(-60%) rotate(-27deg); } to { transform: translateX(-42%) rotate(-32deg); } }

/* teal warmth that rises only while the icon is on stage, then clears so it
   never sits behind the content sections. */
.airy__warm {
  position: absolute; left: 50%; top: 50%; width: 80vmin; height: 80vmin;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 60%, transparent), transparent 62%);
  filter: blur(60px);
  opacity: calc(var(--morph) * (1 - var(--badge)) * .28);
  transition: opacity .3s linear;
}

/* ================================================================== *
 * Header — fades in after the calm open.
 * ================================================================== */
/* No banner — the airy field runs edge to edge. The header stays hidden through
   the calm open and fades in only as the words assemble into the icon, reaching
   full strength exactly as the icon is complete. */
.siteheader {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent; background: transparent;
  opacity: var(--morph);
  transition: background .3s linear, backdrop-filter .3s linear, border-color .3s linear;
}
/* Solid, legible nav once the film is behind us. */
.siteheader.solid {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
@media (prefers-color-scheme: dark) {
  .siteheader.solid { background: color-mix(in srgb, #0a0a0c 90%, transparent); }
}
/* Pull the wordmark to the left margin (nav stays at the right). */
.siteheader__inner { max-width: none; padding-inline: clamp(20px, 3.5vw, 46px); }
/* The top accent line also stays out of the calm open, appearing with the header. */
.accentbar { opacity: var(--morph); }

/* ================================================================== *
 * CINEMA — the pinned scroll film.
 * ================================================================== */
/* Proximity snap: the page settles gently on the film's rest states when the
   scroll comes to rest, but never fights a slow, deliberate scroll. */
html { scroll-snap-type: y proximity; }
.snap { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }

.cinema { position: relative; height: 560vh; }
.cinema__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
  perspective: 1400px; perspective-origin: 50% 44%;
}
.cinema__layer { grid-area: 1 / 1; display: grid; place-items: center; transform-style: preserve-3d; }

/* ---- The forge : the wordmark whose words settle into the app icon ---- *
 * The whole stage fades in on load and never flies; the words themselves are
 * moved into the icon by the script (per-word transforms) so the name
 * literally becomes the app icon.                                          */
/* The icon is the centre of gravity — it forms and then stays put. The lines
   spread out around it (left, right, under). */
.forge { text-align: center; }

/* --exit (0..1, set in home.js): the hero clears out — phrases fly away and the
   icon fades — as the words leave to assemble the title below. */
.forge   { opacity: calc(1 - var(--exit, 0)); }
.phrases { opacity: calc(1 - var(--exit, 0)); }
.filmcta { opacity: calc(var(--badge, 0) * (1 - var(--exit, 0))); }

/* Word-morph overlay: fixed, full-viewport; each word is absolutely placed and
   transformed by home.js from its icon slot to its heading slot. */
.wordmorph { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; }
.wmw { position: absolute; top: 0; left: 0; white-space: nowrap; font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: #f5f5f7; transform-origin: left top;
  will-change: transform, opacity; }
.wmw-gold { background: linear-gradient(100deg, #ecd0a6, #cd9b6b);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The ice plate — the app icon's background — draws in as the words arrive.
   It carries its own drifting airy flow, like the app icon does. */
.iconplate {
  grid-area: 1 / 1; align-self: center; justify-self: center; z-index: 1;
  width: var(--S, 240px); height: var(--S, 240px); border-radius: 23%;
  overflow: hidden; isolation: isolate;
  opacity: clamp(0, calc(var(--morph) * 1.6), 1);
  transform: scale(calc(.58 + var(--morph) * .42));
  background: radial-gradient(125% 100% at 28% 12%, #ffffff, #eef4ff 60%, #ffffff);
  box-shadow: 0 44px 90px -34px rgba(2,27,72,.4), inset 0 2px 3px rgba(255,255,255,.9),
    inset 0 -6px 16px rgba(120,170,235,.25);
}
/* Airy ice flow inside the icon — soft luminous bands drifting slowly. */
.iconplate .ice {
  position: absolute; left: 50%; width: 190%; height: 42%; border-radius: 999px;
  filter: blur(18px); will-change: transform;
}
.iconplate .ice--1 { top: 4%;  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 45%, rgba(150,195,250,.5) 65%, transparent);
  animation: iceflow1 14s ease-in-out infinite alternate; }
.iconplate .ice--2 { top: 44%; background: linear-gradient(90deg, transparent, rgba(180,212,255,.55) 40%, rgba(255,255,255,.85) 68%, transparent);
  animation: iceflow2 18s ease-in-out infinite alternate; }
.iconplate .ice--3 { top: 74%; height: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 50%, rgba(150,195,250,.4) 72%, transparent);
  animation: iceflow3 22s ease-in-out infinite alternate; }
@keyframes iceflow1 { from { transform: translateX(-58%) rotate(-16deg); } to { transform: translateX(-42%) rotate(-12deg); } }
@keyframes iceflow2 { from { transform: translateX(-44%) rotate(-22deg) scaleX(-1); } to { transform: translateX(-56%) rotate(-25deg) scaleX(-1); } }
@keyframes iceflow3 { from { transform: translateX(-56%) rotate(-30deg); } to { transform: translateX(-46%) rotate(-33deg); } }

/* The crisp wordmark (flow layout = the loved opening). */
.wm { grid-area: 1 / 1; position: relative; z-index: 2; line-height: 1; }
.wm__l1 { display: block; white-space: nowrap; font-size: clamp(24px, 6.4vw, 50px); font-weight: 300; letter-spacing: .16em; }
.wm__l2 { display: block; white-space: nowrap; font-size: clamp(42px, 11.4vw, 88px); font-weight: 700; letter-spacing: .04em; margin-top: .06em; }
/* Open on black: the words are cream (--ink). As they settle onto the white
   ice plate they turn navy, so the icon reads correctly in either theme. */
.word { display: inline-block; will-change: transform; transform-origin: 50% 50%;
  color: color-mix(in srgb, #021B48 calc(var(--morph) * 100%), var(--ink)); }
.w-smart { font-weight: 300; opacity: calc(.62 + var(--morph) * .38); }
.w-time, .w-card { font-weight: 700; }

.bm__pre { position: relative; display: inline-block; margin-right: .36em; }
.bm__pre .slot { visibility: hidden; font-weight: 700; }
.bm__pre .the, .bm__pre .your { position: absolute; left: 0; right: 0; top: 0; text-align: center; }
/* Sequential swap: THE leaves entirely before YOUR arrives; both fade as the
   words begin their journey into the icon. */
.bm__pre .the  { opacity: calc((1 - min(1, var(--word) * 2)) * (1 - min(1, var(--morph) * 2))); transform: translateY(calc(var(--word) * -14px)); color: var(--ink-soft); }
/* YOUR is the statement — this app is built for you. Gradient, heavier, lit. */
.bm__pre .your {
  opacity: calc(clamp(0, calc((var(--word) - .5) * 2), 1) * (1 - min(1, var(--morph) * 2)));
  transform: translateY(calc((1 - var(--word)) * 14px));
  font-weight: 700;
  background: linear-gradient(100deg, var(--teal), var(--rust));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 18px color-mix(in srgb, var(--teal) 55%, transparent));
}
/* When YOUR lands, it pops — a small overshoot that settles a touch larger. */
.forge.is-you .your { animation: youpop .64s var(--depth-ease) both; }
@keyframes youpop {
  0%   { transform: translateY(4px) scale(.82); }
  55%  { transform: translateY(0) scale(1.22); }
  100% { transform: translateY(0) scale(1.08); }
}

/* Signature teal→rust glow behind the wordmark; fades as the words scatter.
   It beats like a heart — a double-thump pulse in size and brightness. */
.wmglow {
  --gblur: .4em;
  grid-area: 1 / 1; position: relative; z-index: 1; pointer-events: none; line-height: 1;
  opacity: calc(1 - min(1, var(--morph) * 3));
  background: linear-gradient(90deg, var(--teal), var(--rust));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: blur(var(--gblur)) brightness(1.1);
  animation: glowbeat 1.25s ease-in-out infinite;
}
@keyframes glowbeat {
  0%, 42%, 100% { transform: scale(1);    filter: blur(var(--gblur)) brightness(1.05); }
  9%            { transform: scale(1.09); filter: blur(var(--gblur)) brightness(1.55); }
  18%           { transform: scale(1.0);  filter: blur(var(--gblur)) brightness(1.12); }
  27%           { transform: scale(1.06); filter: blur(var(--gblur)) brightness(1.36); }
}
.wg__l1 { display: block; white-space: nowrap; font-size: clamp(24px, 6.4vw, 50px); font-weight: 300; letter-spacing: .16em; }
.wg__l2 { display: block; white-space: nowrap; font-size: clamp(42px, 11.4vw, 88px); font-weight: 700; letter-spacing: .04em; margin-top: .06em; }
.wg__l1 .pre { display: inline-block; margin-right: .36em; }
.wg__l1 .pre .slot { visibility: hidden; font-weight: 700; }
@media (prefers-color-scheme: dark) { .wmglow { --gblur: .56em; } }

.forge__static { display: none; width: var(--S, 260px); height: auto; border-radius: 23%; grid-area: 1 / 1;
  box-shadow: 0 44px 90px -34px rgba(2,27,72,.4); }

/* Resting call to action, under the icon. */
.filmcta {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  opacity: var(--badge, 0); pointer-events: none;
  transition: opacity .2s linear;
}
.filmcta.on { pointer-events: auto; }

.scrollcue {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
  opacity: calc(var(--intro) * .9);
}
.scrollcue .mouse { width: 22px; height: 34px; border: 2px solid currentColor; border-radius: 12px; position: relative; opacity: .7; }
.scrollcue .mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; border-radius: 2px;
  background: currentColor; transform: translateX(-50%); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 70% { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- brand lines appear AROUND the icon (never over it) ---- */
.phrases { grid-area: 1 / 1; position: relative; width: 100%; height: 100%; pointer-events: none; transform-style: preserve-3d; }
/* The lines fly out of the icon and settle into fixed spots around it (left,
   right, under), then stay. left / top / width / text-align / transform are all
   set per line by the script. */
.phrase {
  position: absolute; left: 50%; top: 50%; margin: 0; opacity: 0;
  transform: translate(-50%, -50%);
  font-size: clamp(1.2rem, 3.6vw, 1.95rem); font-weight: 800; line-height: 1.14; letter-spacing: -.015em;
  color: var(--ink);
  text-shadow: 0 2px 18px var(--surface), 0 0 30px var(--surface);
}
.phrase .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* "Learn more" doorway into the highlights zone. No box — just gradient type
   and an arrow, lit softly so it reads as part of the luminous field rather
   than a chip stuck on top of it. Inherits the phrase's alignment. The
   underline draws in on hover; pointer-events are gated in home.js. */
/* "Learn more" doorway — no box, so it never competes with the icon/phrases
   spotlight. Just a quiet label with the moving underline as the hover tell.
   The label is a muted neutral (distinct from the phrase's ink + teal→rust
   wording); the underline is teal. */
/* Absolutely positioned so it never adds height to the phrase (which would
   shove the text off its mark). Top-row phrases carry it above, bottom-row
   below — so the four phrase texts keep their original symmetric spacing.
   It inherits the phrase's text-align, so it stays flush with the last period. */
.phrase__more {
  position: absolute; left: 0; right: 0; display: block;
  font-size: clamp(.82rem, 1.4vw, .92rem); font-weight: 600; letter-spacing: .02em;
  line-height: 1; text-decoration: none; text-shadow: none; color: var(--ink-soft);
  transition: color .25s var(--depth-ease);
}
.phrase--top .phrase__more    { bottom: calc(100% + 12px); }
.phrase--bottom .phrase__more { top: calc(100% + 12px); }
.phrase__more:hover, .phrase__more:focus-visible { color: var(--ink); }
.phrase__more .lbl { position: relative; }
.phrase__more .lbl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; border-radius: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--depth-ease);
}
.phrase__more:hover .lbl::after, .phrase__more:focus-visible .lbl::after { transform: scaleX(1); }

/* ================================================================== *
 * The phone (device + launch screen + recreated Clock UI).
 * ================================================================== */
.device {
  position: relative; width: clamp(248px, 30vmin, 320px); aspect-ratio: 300 / 610;
  border-radius: 46px; background: linear-gradient(150deg, #0d1524, #05070d); padding: 12px;
  box-shadow: 0 2px 2px rgba(255,255,255,.14) inset, 0 -2px 3px rgba(0,0,0,.5) inset,
    0 60px 100px -34px rgba(0,0,0,.6), 0 24px 60px -30px color-mix(in srgb, var(--teal) 60%, transparent);
}
.device::before {
  content: ""; position: absolute; inset: 3px; border-radius: 43px; padding: 1px;
  background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%, rgba(255,255,255,.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.device__screen {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--teal) 22%, var(--navy)), var(--navy) 60%);
  color: var(--cream); display: flex; flex-direction: column;
}
.device__island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 16px; background: #04060c; z-index: 6; }

/* launch screen: the app icon already on the phone */
.launch {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff, #e9f2ff 60%, #ffffff);
  opacity: calc(1 - var(--appopen)); transition: opacity .12s linear;
}
.launch img { width: 60%; height: auto; border-radius: 22%; box-shadow: 0 20px 40px -18px rgba(2,27,72,.35); }

.appui { position: relative; z-index: 3; padding: 46px 20px 20px; display: flex; flex-direction: column; height: 100%; opacity: var(--appopen); }
.appui__status { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; opacity: .7; margin-bottom: 16px; }
.appui .mark { --mark-size: 15px; align-self: center; margin-bottom: 18px; }
.appui .mark__crisp { color: var(--cream); }

.ring { position: relative; width: 168px; height: 168px; margin: 2px auto 8px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(250,237,227,.12); stroke-width: 12; }
.ring__val { fill: none; stroke: url(#stcgrad); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 458; stroke-dashoffset: 128;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 70%, transparent)); }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring__time { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ring__label { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 3px; }

.statuschip { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  background: rgba(74,180,186,.16); border: 1px solid rgba(74,180,186,.4); font-size: .74rem; font-weight: 600; margin: 4px auto 14px; }
.statuschip .live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,180,186,.55); } 70% { box-shadow: 0 0 0 8px rgba(74,180,186,0); } 100% { box-shadow: 0 0 0 0 rgba(74,180,186,0); } }

.jobcard { background: rgba(255,255,255,.06); border: 1px solid rgba(250,237,227,.12); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.jobcard .swatch { width: 32px; height: 32px; border-radius: 9px; background: var(--grad); flex: none; }
.jobcard .jc__name { font-size: .8rem; font-weight: 600; }
.jobcard .jc__sub { font-size: .66rem; opacity: .65; }
.jobcard .jc__rate { margin-left: auto; font-size: .78rem; font-weight: 700; }

.appui__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: auto; }
.appui__stats .cell { background: rgba(255,255,255,.05); border: 1px solid rgba(250,237,227,.1); border-radius: 12px; padding: 8px 10px; }
.appui__stats .cell .n { font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.appui__stats .cell .n small { font-size: .6rem; font-weight: 500; opacity: .6; }
.appui__stats .cell .t { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.appui__stats .cell.ot .n { color: var(--rust); }

.clockbtn { margin-top: 10px; text-align: center; padding: 12px; border-radius: 15px; background: var(--grad); color: #04060c; font-weight: 700; font-size: .9rem;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--rust) 60%, transparent); }

/* ================================================================== *
 * Content sections after the film.
 * ================================================================== */
.section { max-width: 1120px; margin: 0 auto; padding: 84px 24px; }
.section__head { max-width: 62ch; margin-bottom: 40px; }
.section__head h2 { margin-top: 0; }
.section__head .lede { max-width: 54ch; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-bottom: 18px; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--teal); }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.card3d { position: relative; border-radius: 18px; padding: 26px 24px; background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform-style: preserve-3d;
  transition: transform .3s var(--depth-ease), box-shadow .3s var(--depth-ease), border-color .3s; will-change: transform; }
.card3d:hover { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--ink) 60%, transparent); }
.card3d__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px;
  background: color-mix(in srgb, var(--teal) 14%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); transform: translateZ(40px); }
.card3d__ico svg { width: 24px; height: 24px; color: var(--teal); }
.card3d h3 { margin: 0 0 8px; font-size: 1.12rem; letter-spacing: -.01em; transform: translateZ(28px); }
.card3d p { margin: 0; color: var(--ink-soft); font-size: .96rem; transform: translateZ(16px); }

/* Language marquee pinned to the bottom of the first screen (inside the film).
   Runs the nine languages, then Smart TimeCard nine times, forever. Fades in as
   the icon assembles; scrolls away with the film when you reach the next page. */
.langmarq {
  position: absolute; left: 0; right: 0; bottom: 6%; z-index: 3; overflow: hidden;
  pointer-events: none;
  opacity: clamp(0, calc((var(--morph) - .55) * 2.6), .82);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.langmarq__track {
  display: flex; align-items: baseline; width: max-content;
  animation: marq 46s linear infinite;
  /* every item — languages and brand names — is the same size */
  font-size: clamp(.72rem, 1.3vw, .9rem); font-weight: 500; color: var(--ink-soft);
}
/* A trailing margin on EVERY item (not flex gap) keeps each copy exactly half
   the track, so translateX(-50%) loops with no pause. */
.langmarq__track > * { white-space: nowrap; margin-right: 34px; }
/* brand names differ by colour/weight only, not size */
.langmarq .brand {
  font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(100deg, var(--teal), var(--rust));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes marq { to { transform: translateX(-50%); } }

.band { position: relative; border-radius: 26px; padding: 56px 40px; overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--teal) 12%, var(--surface-2)), var(--surface-2)); border: 1px solid var(--line); }
.band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: var(--grad); filter: blur(60px); opacity: .22; }
.band__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; position: relative; }
.band h2 { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip { font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

.paper { position: relative; background: #fff; color: #1a2338; border-radius: 10px; padding: 18px 18px 16px;
  box-shadow: 0 40px 70px -34px rgba(2,27,72,.6); transform: rotateX(6deg) rotateY(-9deg); transform-style: preserve-3d;
  transition: transform .4s var(--depth-ease); max-width: 340px; margin-inline: auto; font-size: .7rem; }
.paper:hover { transform: rotateX(2deg) rotateY(-3deg); }
.paper__top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #021B48; padding-bottom: 8px; margin-bottom: 10px; }
.paper__top b { font-size: .82rem; letter-spacing: .02em; color: #021B48; }
.paper__top span { font-size: .62rem; color: #64708a; }
.paper table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.paper th { text-align: left; font-size: .56rem; text-transform: uppercase; letter-spacing: .05em; color: #8a94a8; padding: 3px 4px; border-bottom: 1px solid #e2e6ee; }
.paper td { padding: 4px 4px; border-bottom: 1px solid #eef1f6; }
.paper td:last-child, .paper th:last-child { text-align: right; }
.paper__tot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 2px solid #021B48; font-weight: 700; color: #021B48; }
.paper__tot .ot { color: #E66638; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: step; }
.step { position: relative; padding: 24px 22px 22px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  margin-bottom: 14px; font-weight: 700; color: #04060c; background: var(--grad); }
.step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .93rem; }

.storebadge { display: inline-flex; align-items: center; gap: 11px; padding: 11px 18px; border-radius: 14px; background: var(--ink); color: var(--surface);
  text-decoration: none; border: 1px solid transparent; transition: transform .3s var(--depth-ease); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ink) 60%, transparent); }
.storebadge:hover { transform: translateY(-2px); }
.storebadge svg { width: 26px; height: 26px; flex: none; }
.storebadge .l1 { display: block; font-size: .68rem; opacity: .8; line-height: 1.2; }
.storebadge .l2 { display: block; font-size: 1.06rem; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.badgerow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.cta { text-align: center; max-width: 620px; margin: 0 auto; padding: 96px 24px; }
.cta h2 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); letter-spacing: -.03em; }
.cta .lede { margin-inline: auto; }
.cta .badgerow { justify-content: center; margin-top: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--depth-ease), transform .7s var(--depth-ease); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ================================================================== *
 * IT'S YOUR TIMECARD — the highlights zone.
 * A self-contained dark section with its own colour variables, so it reads
 * as "another room" in both light and dark themes. Rounded top + a lit edge
 * and accent wash announce the boundary as you scroll in from the film.
 * ================================================================== */
.hl {
  --hl-bg:    #0a0b0f;
  --hl-card:  #16181f;
  --hl-fg:    #f5f5f7;
  --hl-muted: #9b9ba4;
  --hl-line:  rgba(255, 255, 255, .10);
  position: relative; z-index: 1; isolation: isolate; overflow: hidden;
  background: var(--hl-bg); color: var(--hl-fg);
  padding: clamp(60px, 8.5vw, 124px) 0 clamp(46px, 6vw, 80px);
  border-radius: 44px 44px 0 0;
  scroll-margin-top: 76px;   /* clear the fixed header on a "Learn more" jump */
}
/* teal wash pooling at the top of the zone */
.hl::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 360px; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 60%);
  opacity: .55;
}
/* a thin lit edge along the rounded top lip */
.hl::after {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 75%, transparent), color-mix(in srgb, var(--rust) 75%, transparent), transparent);
  opacity: .7;
}
.hl__head { max-width: 1120px; margin: 0 auto 38px; padding: 0 clamp(24px, 4vw, 46px); }
.hl__title { margin: 0; color: var(--hl-fg); font-size: clamp(2.1rem, 6.2vw, 4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; }
/* "Smart." in a soft champagne→gold — a more elegant, understated accent than
   the loud teal→rust used elsewhere. The dust particles reuse these colours. */
.hl__title .grad { background: linear-gradient(100deg, #ecd0a6, #cd9b6b); -webkit-background-clip: text; background-clip: text; color: transparent; }


.hl__lede { margin: .55em 0 0; max-width: 42ch; color: var(--hl-muted); font-size: clamp(1rem, 1.8vw, 1.2rem); }

/* The rail: native horizontal scroll-snap. Cards centre as they settle. */
.hl__rail {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 10px clamp(24px, 4vw, 46px) 16px; scroll-padding-inline: clamp(24px, 4vw, 46px);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hl__rail::-webkit-scrollbar { display: none; }

.hl__card {
  flex: 0 0 clamp(270px, 40vw, 440px); scroll-snap-align: start;
  position: relative; overflow: hidden; min-height: clamp(376px, 50vw, 452px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  padding: 32px 30px; border-radius: 26px; text-decoration: none;
  background: transparent; border: 1px solid var(--hl-line); color: var(--hl-fg);
  transition: transform .3s var(--depth-ease), border-color .3s, background .3s;
}
.hl__card::after {
  content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: var(--grad); filter: blur(64px); opacity: .16; pointer-events: none; transition: opacity .3s;
}
.hl__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--teal) 42%, var(--hl-line)); background: rgba(255, 255, 255, .03); }
.hl__card:hover::after { opacity: .3; }
.hl__ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--teal) 18%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent); }
.hl__ico svg { width: 26px; height: 26px; color: var(--teal); }
.hl__cap { display: block; position: relative; }
.hl__lead { display: block; margin-bottom: .4em; font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hl__body { display: block; color: var(--hl-muted); font-size: clamp(.98rem, 1.35vw, 1.06rem); line-height: 1.5; }

/* Controls — a dot reel + play/pause, echoing the film's scrubber. */
.hl__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 38px; }
.hl__dots { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--hl-line); }
.hl__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .32);
  cursor: pointer; transition: width .35s var(--depth-ease), background .35s; }
.hl__dot[aria-current="true"] { width: 30px; background: var(--hl-fg); }
.hl__play { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--hl-line); color: var(--hl-fg); }
.hl__play:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--hl-line)); }
.hl__play svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.hl__play .i-pause { display: none; }
.hl__play.is-playing .i-play { display: none; }
.hl__play.is-playing .i-pause { display: block; }

/* ================================================================== *
 * Responsive
 * ================================================================== */
@media (max-width: 720px) {
  .hl { border-radius: 32px 32px 0 0; }
  .hl__card { flex-basis: 84%; min-height: 348px; padding: 28px 24px; }
  .band__grid { grid-template-columns: 1fr; }
  .paper { order: -1; margin-bottom: 8px; }
  .section { padding: 60px 20px; }

  /* Compact header so the fixed bar doesn't eat the screen on phones. */
  .siteheader__inner { min-height: 50px; gap: 4px 12px; padding-block: 6px; }
  .siteheader .mark { --mark-size: 13px; }
  .nav { font-size: 13px; gap: 0; }
  .nav a { padding: 7px 9px; min-height: 38px; }

  /* --- Phone hero: icon stays centred; two lines above it, two below. --- */
  :root { --S: clamp(118px, 40vw, 152px); }        /* no-JS / first-paint size */
  .phrase { font-size: clamp(1rem, 4.2vw, 1.3rem); line-height: 1.22; }
  .langmarq { bottom: 3.5%; }
  .langmarq__track { font-size: clamp(.72rem, 3vw, .85rem); }
  /* Smaller wordmark in the calm open so it never crowds the edges. */
  .bm__line1 { font-size: clamp(20px, 6vw, 34px); }
  .bm__line2 { font-size: clamp(34px, 12vw, 60px); }
}

/* ================================================================== *
 * Reduced motion — collapse the film to one readable tableau.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cinema { height: auto; }
  .cinema__sticky { position: static; height: auto; min-height: auto; padding: 90px 0 40px; grid-auto-flow: row; gap: 30px; }
  .airy__band, .airy__warm, .wmglow, .iconplate .ice { animation: none; }
  :root { --word: 1; --intro: 0; --morph: 1; --feat: 1; --badge: 1; --nav: 1; }
  .scrollcue, .wm, .wmglow, .iconplate { display: none; }
  /* Show the finished icon flat, then the lines, then the badge — in flow. */
  .forge { position: static; }
  .forge__static { display: block; margin: 0 auto; }
  .phrases { position: static; height: auto; display: flex; flex-direction: column; gap: 18px; margin-top: 4px; pointer-events: auto; }
  .phrase { position: static; transform: none; opacity: 1; width: auto; top: auto !important; font-size: clamp(1.3rem, 5vw, 2rem); pointer-events: auto; }
  .filmcta { position: static; transform: none; opacity: 1; margin-top: 8px; text-align: center; }
  .langmarq { position: static; opacity: 1; margin-top: 20px; }
  .langmarq__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .reveal { opacity: 1; transform: none; }
}