/* ───────── Brand home page: a cinematic, scroll-driven story ─────────
   Layout: a pinned stage where scroll plays the tap (card → phone → profile → saved), then feature panels with
   looping micro-scenes, a page-turning catalog, a moving strip of audiences, FAQ and a closing stage. */

body.landing { background: #07061A; color: #F4F3FF; color-scheme: dark; overflow-x: clip; }
.landing main { position: relative; z-index: 1; }
.landing .ltr { direction: ltr; }

/* ── Navigation ── */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding-top: env(safe-area-inset-top); transition: background-color .3s ease, box-shadow .3s ease; }
.lp-nav.solid { background: rgba(7, 6, 26, .66); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.lp-nav-in { max-width: 1240px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 20px; }
.lp-logo img { height: 38px; width: auto; }
.lp-links { margin-inline-start: auto; display: flex; align-items: center; gap: 24px; font-size: var(--fs-sm); font-weight: 700; }
.lp-links a { position: relative; text-decoration: none; color: #B8B5E3; transition: color .2s ease; }
.lp-links a:not(.lp-login)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: #12D6C3; transform: scaleX(0); transition: transform .35s var(--ease-out); }
.lp-links a:hover { color: #F4F3FF; }
.lp-links a:hover::after { transform: scaleX(1); }
.lp-links .lp-login { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: #F4F3FF; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lp-login .i { width: 17px; height: 17px; color: #12D6C3; }
@media (max-width: 720px) { .lp-links a:not(.lp-login) { display: none; } }

/* ── Shared type & buttons ── */
.lp-h1 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 8.4vw, 5rem); line-height: 1.18; text-wrap: balance;
  background: linear-gradient(180deg, #FFFFFF 30%, #B9B5FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motion .lp-h1 { background: none; color: #F4F3FF; }
.lp-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.25; color: #F4F3FF; text-wrap: balance; }
.lp-lead { font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 2; color: #B8B5E3; max-width: 36em; }
.sec-head { display: grid; gap: 12px; max-width: 720px; }
.sec-sub { color: #B8B5E3; line-height: 2; font-size: clamp(.98rem, 2vw, 1.1rem); max-width: 40em; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-btn { min-height: 56px; padding-inline: 1.5rem; border-radius: 18px; font-size: var(--fs-md); background: linear-gradient(150deg, #3B37F0, #6A2FE0); color: #fff; box-shadow: 0 18px 40px -16px rgba(74, 70, 242, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lp-btn-glass { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.lp-btn-light { background: #fff; color: #2F2BEA; box-shadow: 0 18px 40px -18px rgba(255, 255, 255, .6); }

/* ── Story (pinned) ── */
.story { position: relative; height: 320vh; }
.story-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px;
  padding: calc(84px + env(safe-area-inset-top)) 20px 18px;
}
.story-text { position: relative; z-index: 3; display: grid; gap: 14px; align-content: start; max-width: 600px; }
@media (max-width: 959px) {
  .story-text .lp-lead { font-size: .92rem; line-height: 1.85; }
  .story-text .lp-ctas .lp-btn { min-height: 50px; font-size: var(--fs-sm); }
}
@media (min-width: 960px) {
  .story-pin { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-items: center; padding: 90px max(5vw, 32px) 30px; max-width: 1400px; margin: 0 auto; }
  .story-text { gap: 22px; }
}
.story-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 12px; min-height: 0; perspective: 1500px; height: 100%; }
@media (min-width: 960px) { .story-stage { height: min(86svh, 760px); } }

/* The story's moving values. landing.js writes each one on the single part that uses it, and they are registered as
   not inherited, so a scroll step restyles just those few parts instead of everything inside the phone and the card.
   (A child that needs its parent's value says so with `inherit`.) */
@property --pry { syntax: '*'; inherits: false; }
@property --prx { syntax: '*'; inherits: false; }
@property --ps { syntax: '*'; inherits: false; }
@property --cx { syntax: '*'; inherits: false; }
@property --cy { syntax: '*'; inherits: false; }
@property --cz { syntax: '*'; inherits: false; }
@property --cry { syntax: '*'; inherits: false; }
@property --crx { syntax: '*'; inherits: false; }
@property --crz { syntax: '*'; inherits: false; }
@property --co { syntax: '*'; inherits: false; }
@property --unlock { syntax: '*'; inherits: false; }
@property --burst { syntax: '*'; inherits: false; }
@property --scroll { syntax: '*'; inherits: false; }
@property --save { syntax: '*'; inherits: false; }
@property --toast { syntax: '*'; inherits: false; }
@property --intro { syntax: '*'; inherits: false; }
@property --vr { syntax: '*'; inherits: false; }
.st-phone { --pry: -22deg; --prx: 8deg; --ps: 1; }
.st-card { --cx: 58%; --cy: 0%; --cz: 140px; --cry: -28deg; --crx: 10deg; --crz: -10deg; --co: 1; }
.st-lock, .st-app { --unlock: 1; }
.st-app-inner { --scroll: 0px; }
.st-save { --save: 0; }
.st-toast { --toast: 1; }
.st-burst { --burst: 0; }
.st-card-face, .st-burst i { --co: inherit; --burst: inherit; }
.st-card-front, .st-card-front::after { --cry: inherit; }
/* The float while the story waits at its start (paused, not removed, once it moves: nothing jumps). */
.motion .st-card { animation: st-bob 2.8s ease-in-out infinite alternate, st-sway 4.1s ease-in-out infinite alternate; }
.motion .st-phone { animation: st-sway-ph 6s ease-in-out infinite alternate; }
.motion .moving .st-card, .motion .moving .st-phone { animation-play-state: paused; }
@keyframes st-bob { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes st-sway { from { rotate: y -6deg; } to { rotate: y 6deg; } }
@keyframes st-sway-ph { from { rotate: y -3deg; } to { rotate: y 3deg; } }
.st-scene {
  position: relative; height: 100%; max-height: 640px; aspect-ratio: 9 / 18.6; align-self: center;
  /* The phone and the card each keep their own depth, but they are not placed in one shared 3D space: where two
     tilted planes cross, browsers draw them differently (Safari cut a dark wedge through the card). The card is
     in front of the phone, and goes behind it by changing places (.card-back, landing.js) while it is faded out. */
  perspective: 1500px; transform-style: flat;
}
.st-phone { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--pry)) rotateX(var(--prx)) scale(var(--ps)); }
.st-ph-edge { position: absolute; inset: 0; border-radius: 15% / 7.5%; background: #1A1745; }
.pe1 { transform: translateZ(-2px); } .pe2 { transform: translateZ(-4px); background: #151238; } .pe3 { transform: translateZ(-6px); background: #110F2E; } .pe4 { transform: translateZ(-8px); background: #0C0A22; box-shadow: 0 60px 80px -30px rgba(0, 0, 0, .9); }
.st-ph-body {
  position: absolute; inset: 0; padding: 3.2%; border-radius: 15% / 7.5%; transform: translateZ(0);
  background: linear-gradient(150deg, #2B2768, #14123A 60%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 2px 0 rgba(255, 255, 255, .2);
}
.st-screen { position: relative; height: 100%; border-radius: 12% / 5.8%; overflow: hidden; clip-path: inset(0 round 12% / 5.8%); background: #050414; }
.st-lock {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; justify-items: center; align-items: center;
  padding: 15% 8% 11%; color: #F4F3FF; opacity: calc(1 - var(--unlock)); transform: scale(calc(1 + var(--unlock) * .08));
  background: radial-gradient(120% 60% at 50% 52%, rgba(74, 70, 242, .38), transparent 62%), radial-gradient(120% 45% at 50% 108%, rgba(18, 214, 195, .2), transparent 60%), linear-gradient(180deg, #0B0930, #050414 70%);
}
.st-time { font-size: clamp(1.9rem, 6.6vw, 2.9rem); font-weight: 300; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(142, 139, 255, .55); }
.st-date { margin-top: 5px; font-size: clamp(.5rem, 1.9vw, .68rem); color: #B8B5E3; }
/* The brand mark as neon: it flickers on, then breathes; its rings light up one after another like a tap wave */
.st-neon { position: relative; width: 50%; aspect-ratio: 1; display: grid; place-items: center; }
.st-halo { position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 70, 242, .6), rgba(18, 214, 195, .14) 58%, transparent); animation: st-halo 3.2s ease-in-out infinite; }
.st-neon svg {
  position: relative; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 2px rgba(180, 178, 255, .95)) drop-shadow(0 0 10px rgba(74, 70, 242, .95)) drop-shadow(0 0 24px rgba(18, 214, 195, .45));
  animation: st-neon-on 1.6s .5s steps(1, end) backwards;
}
/* The tap wave: a ring of light leaves the chip again and again. It is an HTML ring the compositor scales, so the
   glowing icon itself (three soft shadows) is drawn once and never redrawn. */
.st-neon::after {
  content: ''; position: absolute; left: 37.5%; top: 62.5%; width: 60%; aspect-ratio: 1; margin: -30% 0 0 -30%; border-radius: 50%;
  border: 2px solid rgba(18, 214, 195, .85); box-shadow: 0 0 12px rgba(18, 214, 195, .5); opacity: 0; pointer-events: none;
  animation: st-wave 2.6s 2.1s var(--ease-out) infinite;
}
@keyframes st-wave { 0% { opacity: 0; transform: scale(.15); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.nn-frame { fill: rgba(47, 43, 234, .22); stroke: #9C99FF; stroke-width: 2.2; }
.nn-r { fill: none; stroke-width: 3.4; opacity: .85; }
.nn-r1 { stroke: #FFFFFF; }
.nn-r2 { stroke: #12D6C3; }
.nn-r3 { stroke: rgba(255, 255, 255, .55); }
.nn-r4 { stroke: rgba(255, 255, 255, .28); }
.nn-core { fill: #FFB020; filter: drop-shadow(0 0 3px #FFB020) drop-shadow(0 0 8px rgba(255, 176, 32, .8)); }
@keyframes st-neon-on { 0% { opacity: 0; } 12% { opacity: .9; } 16% { opacity: .15; } 24% { opacity: 1; } 30% { opacity: .4; } 38%, 100% { opacity: 1; } }
@keyframes st-halo { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.st-hint { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: clamp(.5rem, 1.9vw, .66rem); color: #D9D7FF; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.st-hint .i { width: 1.5em; height: 1.5em; color: #12D6C3; }
.st-app { position: absolute; inset: 0; background: #0B0A24; opacity: var(--unlock); transform: translateY(calc((1 - var(--unlock)) * 30px)) scale(calc(.94 + var(--unlock) * .06)); overflow: hidden; }
.st-app-inner { transform: translateY(var(--scroll)); }
.st-app-hero { display: grid; justify-items: center; gap: 2px; padding: 14% 8% 16%; text-align: center; color: #fff; background: linear-gradient(160deg, var(--h1), var(--h2)); }
.st-av { width: 26%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(18, 214, 195, .7); margin-bottom: 8%; }
.st-av .i { width: 50%; height: 50%; }
.st-app-hero b { font-size: clamp(.7rem, 2.6vw, .95rem); font-weight: 900; }
.st-app-hero small { font-size: clamp(.55rem, 2vw, .7rem); opacity: .9; }
.st-keys { display: flex; justify-content: center; gap: 6%; margin-top: -8%; padding: 6% 4% 4%; background: #0B0A24; border-radius: 14px 14px 0 0; }
.st-keys i { width: 16%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; color: #8E8BFF; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.st-keys .i { width: 55%; height: 55%; }
.st-rows { display: grid; gap: 7px; padding: 4% 7%; }
.st-rows span { height: clamp(22px, 6vw, 34px); border-radius: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.st-books { display: flex; justify-content: center; gap: 4%; padding: 4% 7% 30%; perspective: 300px; }
.st-books i { width: 28%; aspect-ratio: 3 / 4; border-radius: 6px; background: linear-gradient(160deg, #FF9A6B, #6A4BD8); transform: rotateY(var(--r, 0deg)); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .8); }
.st-books i:nth-child(1) { --r: 30deg; background: linear-gradient(160deg, #3BAE8C, #1D6FB8); }
.st-books i:nth-child(3) { --r: -30deg; background: linear-gradient(160deg, #E0507A, #F1B51E); }
.st-save {
  position: absolute; left: 6%; right: 6%; bottom: 4%; min-height: 9%; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: clamp(.6rem, 2.3vw, .82rem); font-weight: 900; background: linear-gradient(150deg, #2F2BEA, #6A2FE0);
  box-shadow: 0 0 calc(var(--save) * 30px) calc(var(--save) * 4px) rgba(18, 214, 195, .7), inset 0 0 0 calc(var(--save) * 2px) rgba(18, 214, 195, .9);
  transform: scale(calc(1 + var(--save) * .05));
}
.st-save .i { width: 1.5em; height: 1.5em; }
.st-toast {
  position: absolute; top: 3%; left: 5%; right: 5%; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 16px;
  font-size: clamp(.55rem, 2.2vw, .75rem); color: #14123A; background: rgba(244, 243, 255, .97); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .7);
  opacity: var(--toast); transform: translateY(calc((1 - var(--toast)) * -140%));
}
.st-toast .i { flex: none; width: 1.8em; height: 1.8em; padding: 3px; border-radius: 50%; color: #fff; background: #0B8A6B; }
.st-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.st-burst i { position: absolute; width: 120px; height: 120px; left: -60px; top: -60px; border-radius: 50%; border: 2px solid rgba(18, 214, 195, .95); box-shadow: 0 0 30px rgba(18, 214, 195, .7), inset 0 0 20px rgba(18, 214, 195, .4); opacity: 0; }
.st-burst i:nth-child(1) { transform: scale(calc(var(--burst) * 3)); opacity: calc(var(--burst) * (1 - var(--burst)) * 3.6); }
.st-burst i:nth-child(2) { transform: scale(calc(var(--burst) * 2)); opacity: calc(var(--burst) * (1 - var(--burst)) * 3); }
.st-burst i:nth-child(3) { transform: scale(calc(var(--burst) * 1.2)); opacity: calc(var(--burst) * (1 - var(--burst)) * 2.4); }

.st-card {
  position: absolute; left: 4%; top: 52%; width: 92%; aspect-ratio: 1.586; transform-style: preserve-3d;
  transform: translate3d(var(--cx), var(--cy), var(--cz)) rotateZ(var(--crz)) rotateY(var(--cry)) rotateX(var(--crx));
}
.st-card-face { position: absolute; inset: 0; border-radius: 9% / 14%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; opacity: var(--co); }
.st-card-front {
  display: grid; grid-template-rows: auto 1fr auto; padding: 8% 9%; color: #fff;
  background: linear-gradient(150deg, #2F2BEA, #6A2FE0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .5), 0 40px 60px -26px rgba(47, 43, 234, .95);
}
.st-card-front::before { content: ''; position: absolute; left: -30%; top: -45%; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(18, 214, 195, .7); box-shadow: 0 0 0 26px rgba(255, 255, 255, .04), 0 0 0 27.5px rgba(255, 255, 255, .12); }
.st-card-front::after { content: ''; position: absolute; inset: -60% -80%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .45) 50%, transparent 58%); transform: translateX(calc(var(--cry) * -2.4)); mix-blend-mode: soft-light; }
.st-card-top { position: relative; display: flex; justify-content: space-between; align-items: center; }
.st-card-top img { width: 18%; height: auto; border-radius: 22%; }
.st-card-top .i { width: 14%; height: auto; }
.st-card-name { position: relative; align-self: end; font-weight: 900; font-size: clamp(.8rem, 3.4vw, 1.2rem); }
.st-card-sub { position: relative; font-size: clamp(.55rem, 2.3vw, .8rem); opacity: .85; }
.st-card-back { transform: rotateY(180deg); display: grid; place-items: center; background: linear-gradient(150deg, #1D1A52, #0B0A26); box-shadow: inset 0 0 0 1px rgba(18, 214, 195, .4); }
.st-qr { width: 42%; aspect-ratio: 1; border-radius: 10%; background: repeating-conic-gradient(#14123A 0 25%, #fff 0 50%) 0 0 / 22% 22%, #fff; box-shadow: 0 0 0 6px #fff; }
.st-phone { z-index: 2; }
.st-card { z-index: 3; }
.st-scene.card-back .st-card { z-index: 1; }
.st-floor { position: absolute; left: 50%; bottom: -4%; width: 0; height: 0; transform: translateZ(-80px) rotateX(78deg); transform-style: preserve-3d; pointer-events: none; }
.st-floor span { position: absolute; width: 420px; height: 420px; left: -210px; top: -210px; border-radius: 50%; border: 2px solid rgba(18, 214, 195, .85); box-shadow: 0 0 30px rgba(18, 214, 195, .5); opacity: 0; animation: lp-floor 5s var(--ease-out) infinite; }
.st-floor span:nth-child(2) { animation-delay: 1.66s; }
.st-floor span:nth-child(3) { animation-delay: 3.33s; }
@keyframes lp-floor { 0% { opacity: 0; transform: scale(.15); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(1.15); } }

.st-captions { list-style: none; margin: 0; padding: 0; position: relative; height: 2.2em; width: 100%; max-width: 420px; text-align: center; font-size: clamp(.92rem, 2.6vw, 1.1rem); font-weight: 800; }
.st-captions li { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), filter .5s var(--ease-out); }
.st-captions li.on { opacity: 1; transform: none; filter: none; }
.st-captions span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; color: #07061A; background: #12D6C3; box-shadow: 0 0 18px rgba(18, 214, 195, .7); }
/* With motion, the scene starts at the first frame of the story (landing.js then drives it with scroll). */
.motion .st-phone { --pry: -30deg; --prx: 12deg; --ps: .9; }
.motion .st-card { --cx: 30%; --cy: 46%; --cz: 260px; --cry: -26deg; --crx: 24deg; --crz: -14deg; }
.motion .st-lock, .motion .st-app { --unlock: 0; }
.motion .st-toast { --toast: 0; }
.story-cue { display: none; }
.motion .story-cue {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: #8C89BF; pointer-events: none;
  transform: translateX(-50%); opacity: calc(1 - var(--intro, 0) * 5);
}
.story-cue i { position: relative; width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.story-cue i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #12D6C3; box-shadow: 0 0 8px #12D6C3; animation: cue 1.8s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(13px); opacity: 0; } }
/* Phones: the headline owns the first screen with the phone peeking below it; scrolling lifts the phone to the centre. */
@media (max-width: 959px) {
  .motion .story-pin { display: block; }
  .motion .st-card { --cx: 10%; }
  .motion .story-cue { display: none; }
  .motion .story-text {
    position: absolute; top: calc(84px + env(safe-area-inset-top)); left: 20px; right: 20px; transform-origin: 50% 0;
    opacity: calc(1 - var(--intro, 0) * 1.5); transform: translate3d(0, calc(var(--intro, 0) * -70px), 0) scale(calc(1 - var(--intro, 0) * .06));
  }
  .motion .story-text.away { visibility: hidden; pointer-events: none; }
  .motion .story-stage {
    position: absolute; left: 12px; right: 12px; top: calc(66px + env(safe-area-inset-top)); bottom: 12px; height: auto; transform-origin: 50% 0;
    transform: translate3d(0, calc((1 - var(--intro, 0)) * var(--drop, 50vh)), 0) scale(calc(.84 + var(--intro, 0) * .16));
  }
}
html:not(.motion) .story { height: auto; }
html:not(.motion) .story-pin { position: relative; height: auto; min-height: 100svh; }
html:not(.motion) .st-captions { height: auto; display: grid; gap: 8px; }
html:not(.motion) .st-captions li { position: static; opacity: 1; transform: none; filter: none; }

/* ── Features ── */
.feat { max-width: 1240px; margin: 0 auto; padding: 120px 20px 70px; display: grid; gap: 36px; }
.feat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; perspective: 1400px; }
.ft {
  position: relative; display: grid; align-content: start; gap: 10px; padding: 18px 18px 22px; border-radius: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 70px -50px rgba(0, 0, 0, .9);
}
.ft h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.5; margin-top: 6px; }
.ft p { color: #B8B5E3; font-size: var(--fs-sm); line-height: 1.95; }
.ft-art { position: relative; display: block; height: 150px; border-radius: 22px; overflow: hidden; clip-path: inset(0 round 22px); background: radial-gradient(90% 120% at 50% 100%, rgba(47, 43, 234, .35), transparent 70%), rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); perspective: 600px; }
.ft-art i { position: absolute; display: block; }
.ft:not(.in) .ft-art *, .ft:not(.in) .ft-art { animation-play-state: paused !important; }
html:not(.motion) .ft .ft-art * { animation-play-state: running !important; }

/* save: a card slides to a phone, a check pops */
.ft-save .fs-phone { left: 50%; top: 18px; width: 64px; height: 118px; margin-left: -32px; border-radius: 14px; background: linear-gradient(160deg, #2B2768, #14123A); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15); }
.ft-save .fs-card { left: 50%; top: 52px; width: 70px; height: 44px; margin-left: -110px; border-radius: 8px; background: linear-gradient(150deg, #2F2BEA, #6A2FE0); box-shadow: 0 10px 20px -8px rgba(47, 43, 234, .9); animation: fs-card 3.4s var(--ease-in-out) infinite; }
.ft-save .fs-dot { left: 50%; top: 40px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #12D6C3; box-shadow: 0 0 20px rgba(18, 214, 195, .9); animation: fs-dot 3.4s var(--ease-out) infinite; }
@keyframes fs-card { 0%, 10% { transform: translateX(0) rotate(-12deg); opacity: 0; } 25% { opacity: 1; } 50%, 62% { transform: translateX(76px) rotate(0) scale(.7); opacity: 1; } 75%, 100% { transform: translateX(76px) scale(.4); opacity: 0; } }
@keyframes fs-dot { 0%, 55% { transform: scale(0); } 66% { transform: scale(1.25); } 76%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
/* book */
.ft-book { transform-style: preserve-3d; }
.ft-book i { left: 50%; top: 25px; width: 72px; height: 98px; margin-left: -36px; border-radius: 4px 9px 9px 4px; transform-origin: 100% 50%; background: linear-gradient(160deg, #FFFFFF, #DAD8F0); box-shadow: -6px 8px 16px -6px rgba(0, 0, 0, .6); }
.ft-book i:nth-child(1) { background: linear-gradient(160deg, #3BAE8C, #1D6FB8); }
.ft-book i:nth-child(2) { background: linear-gradient(160deg, #FF9A6B, #6A4BD8); animation: ft-leaf 3.6s var(--ease-in-out) infinite; }
.ft-book i:nth-child(3) { background: linear-gradient(160deg, #F1B51E, #E0507A); animation: ft-leaf 3.6s var(--ease-in-out) .6s infinite; }
@keyframes ft-leaf { 0%, 15% { transform: rotateY(0); } 50%, 80% { transform: rotateY(165deg); } 100% { transform: rotateY(0); } }
/* bars */
.ft-bars i { bottom: 26px; width: 22px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #12D6C3, #6E6BFF); box-shadow: 0 0 16px rgba(18, 214, 195, .45); transform-origin: bottom; animation: ft-bar 2.8s var(--ease-in-out) infinite alternate; }
.ft-bars i:nth-child(1) { right: calc(50% + 50px); height: 40px; }
.ft-bars i:nth-child(2) { right: calc(50% + 20px); height: 62px; animation-delay: .25s; }
.ft-bars i:nth-child(3) { right: calc(50% - 10px); height: 52px; animation-delay: .5s; }
.ft-bars i:nth-child(4) { right: calc(50% - 40px); height: 84px; animation-delay: .75s; }
.ft-bars i:nth-child(5) { right: calc(50% - 70px); height: 98px; animation-delay: 1s; }
@keyframes ft-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
/* power toggle */
.ft-power .fp-track { left: 50%; top: 50%; width: 120px; height: 56px; margin: -28px 0 0 -60px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); animation: fp-track 4s var(--ease-in-out) infinite; }
.ft-power .fp-knob { top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .6); animation: fp-knob 4s var(--ease-spring) infinite; }
@keyframes fp-track { 0%, 40% { background: rgba(18, 214, 195, .45); } 50%, 90% { background: rgba(255, 59, 92, .35); } 100% { background: rgba(18, 214, 195, .45); } }
@keyframes fp-knob { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(-64px); } 100% { transform: translateX(0); } }
/* flip to QR */
.ft-flip { transform-style: preserve-3d; }
.ft-flip .ff-in { left: 50%; top: 50%; width: 120px; height: 76px; margin: -38px 0 0 -60px; transform-style: preserve-3d; animation: ff-spin 4.4s var(--ease-in-out) infinite; }
.ft-flip .ff-front, .ft-flip .ff-back { inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ft-flip .ff-front { background: linear-gradient(150deg, #2F2BEA, #6A2FE0); box-shadow: 0 16px 26px -10px rgba(47, 43, 234, .9); }
.ft-flip .ff-back { transform: rotateY(180deg); background: repeating-conic-gradient(#14123A 0 25%, #fff 0 50%) 50% 50% / 14px 14px; box-shadow: inset 0 0 0 6px #fff; }
@keyframes ff-spin { 0%, 25% { transform: rotateY(0) rotateX(10deg); } 50%, 75% { transform: rotateY(180deg) rotateX(-10deg); } 100% { transform: rotateY(360deg) rotateX(10deg); } }
/* colours fan */
.ft-colors i { left: 50%; top: 50%; width: 92px; height: 58px; margin: -29px 0 0 -46px; border-radius: 9px; background: linear-gradient(150deg, var(--h1), var(--h2)); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .2); transform-origin: 50% 160%; animation: ft-fan 6s var(--ease-in-out) infinite; }
.ft-colors i:nth-child(1) { --a: -50deg; } .ft-colors i:nth-child(2) { --a: -30deg; } .ft-colors i:nth-child(3) { --a: -10deg; }
.ft-colors i:nth-child(4) { --a: 10deg; } .ft-colors i:nth-child(5) { --a: 30deg; } .ft-colors i:nth-child(6) { --a: 50deg; }
@keyframes ft-fan { 0%, 100% { transform: rotate(0); } 35%, 65% { transform: rotate(var(--a)); } }

/* ── Catalog showcase ── */
.showcase { max-width: 1240px; margin: 0 auto; padding: 80px 20px; display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .showcase { grid-template-columns: 1fr 1fr; } }
.show-text { display: grid; gap: 16px; }
.show-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.show-points li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.show-points .i { width: 38px; height: 38px; padding: 9px; border-radius: 12px; flex: none; color: #12D6C3; background: rgba(18, 214, 195, .1); box-shadow: inset 0 0 0 1px rgba(18, 214, 195, .2); }
.show-book { position: relative; display: grid; place-items: center; min-height: 420px; perspective: 1600px; }
.bk { position: relative; width: min(40vw, 270px); aspect-ratio: 3 / 4; transform-style: preserve-3d; transform: translateX(-46%) rotateX(16deg) rotateY(-14deg) rotateZ(2deg); }
.bk-page { position: absolute; inset: 0; border-radius: 6px 3px 3px 6px; overflow: hidden; transform-origin: 100% 50%; transform-style: preserve-3d; background: #fff; }
.bk-page img { width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-base { box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .95), -2px 2px 0 #D7D5EA, -4px 4px 0 #C8C6DE, -6px 6px 0 #B9B7D2; }
.bk-leaf { overflow: visible; background: transparent; }
.bk-leaf img { position: absolute; inset: 0; border-radius: inherit; }
.bk-leaf i { position: absolute; inset: 0; overflow: hidden; border-radius: 3px 6px 6px 3px; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #F4F3FA; }
.bk-leaf i img { position: absolute; inset: 0; }
/* the fold: a soft shadow along the spine on both pages */
.bk-leaf i::after, .bk-base::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.bk-leaf i::after { background: linear-gradient(to right, rgba(20, 18, 58, .32), transparent 14%); }
.bk-base::after { background: linear-gradient(to left, rgba(20, 18, 58, .32), transparent 14%); }
.bk-leaf[data-leaf="0"] { transform: translateZ(1px); animation: bk-0 12s var(--ease-in-out) infinite; }
.bk-leaf[data-leaf="1"] { transform: translateZ(2px); animation: bk-1 12s var(--ease-in-out) infinite; }
.bk-leaf[data-leaf="2"] { transform: translateZ(3px); animation: bk-2 12s var(--ease-in-out) infinite; }
.bk-leaf[data-leaf="3"] { transform: translateZ(4px); animation: bk-3 12s var(--ease-in-out) infinite; }
.bk-leaf[data-leaf="4"] { transform: translateZ(5px); animation: bk-4 12s var(--ease-in-out) infinite; }
/* Each leaf turns over the spine in turn, then they come back in reverse order. A turned leaf changes its
   stacking depth on the way over, so the most recently turned page always lies on top on the other side. */
@keyframes bk-4 { 0%, 4% { transform: translateZ(5px) rotateY(0); } 14%, 92% { transform: translateZ(1px) rotateY(180deg); } 98%, 100% { transform: translateZ(5px) rotateY(0); } }
@keyframes bk-3 { 0%, 16% { transform: translateZ(4px) rotateY(0); } 26%, 89% { transform: translateZ(2px) rotateY(180deg); } 95%, 100% { transform: translateZ(4px) rotateY(0); } }
@keyframes bk-2 { 0%, 28% { transform: translateZ(3px) rotateY(0); } 38%, 86% { transform: translateZ(3px) rotateY(180deg); } 92%, 100% { transform: translateZ(3px) rotateY(0); } }
@keyframes bk-1 { 0%, 40% { transform: translateZ(2px) rotateY(0); } 50%, 83% { transform: translateZ(4px) rotateY(180deg); } 89%, 100% { transform: translateZ(2px) rotateY(0); } }
@keyframes bk-0 { 0%, 52% { transform: translateZ(1px) rotateY(0); } 62%, 80% { transform: translateZ(5px) rotateY(180deg); } 86%, 100% { transform: translateZ(1px) rotateY(0); } }
.bk-floor { position: absolute; left: 50%; bottom: 6%; width: min(84vw, 560px); height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(18, 214, 195, .35), transparent); filter: blur(2px); }
.show-book:not(.in) .bk-leaf { animation-play-state: paused; }
html:not(.motion) .show-book .bk-leaf { animation-play-state: running; }

/* ── Paper vs Lamso: a face-off that plays with scroll, then rows that light up one by one ── */
.vs { --vq: 0; max-width: 1100px; margin: 0 auto; padding: 100px 20px 70px; display: grid; gap: 30px; }
.vs-head { display: grid; gap: 12px; justify-items: center; text-align: center; }
.vs-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(8px, 4vw, 56px); padding: 18px 0 28px; perspective: 1100px; }
.vs-side { display: grid; justify-items: center; gap: 16px; min-width: 0; }
.vs-card { position: relative; width: min(100%, 300px); aspect-ratio: 1.586; border-radius: 16px; }
.vs-tag { padding: 5px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 800; color: #8C89BF; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: color .4s ease; }
.vs-side-old .vs-tag { transform: translateY(calc(var(--vq) * 28px)); }
.vs-tag-new { color: #07061A; background: #12D6C3; box-shadow: 0 0 calc(10px + var(--vq) * 26px) rgba(18, 214, 195, calc(.3 + var(--vq) * .5)); }

/* paper: wilts, greys, gets a coffee ring as the section scrolls past */
.vs-paper {
  display: grid; align-content: start; gap: 4%; padding: 9% 10%; overflow: hidden; color: #4A4436;
  background: repeating-linear-gradient(0deg, rgba(120, 100, 60, .045) 0 2px, transparent 2px 5px), linear-gradient(160deg, #F6F0E2, #E7DCC3);
  box-shadow: 0 30px 40px -26px rgba(0, 0, 0, .9);
  transform: rotate(calc(-4deg - var(--vq) * 12deg)) translateY(calc(var(--vq) * 30px)) scale(calc(1 - var(--vq) * .1));
  filter: grayscale(calc(var(--vq) * .85)) brightness(calc(1 - var(--vq) * .35)); opacity: calc(1 - var(--vq) * .35);
}
.vp-name { font-weight: 800; font-size: clamp(.7rem, 2.6vw, 1.05rem); }
.vp-sub { font-size: clamp(.55rem, 1.9vw, .78rem); color: #7A715E; }
.vp-lines { display: grid; gap: 7px; margin-top: 8%; }
.vp-lines i { height: 5px; border-radius: 3px; background: rgba(90, 80, 60, .25); }
.vp-lines i:nth-child(1) { width: 70%; } .vp-lines i:nth-child(2) { width: 52%; } .vp-lines i:nth-child(3) { width: 61%; }
.vp-stain { position: absolute; left: 8%; bottom: -14%; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 7px solid rgba(120, 72, 30, .32); filter: blur(.5px); opacity: calc(var(--vq) * 1.6 - .3); transform: scale(calc(.6 + var(--vq) * .4)); }
.vp-fold { position: absolute; inset: 0; background: linear-gradient(118deg, transparent 46%, rgba(0, 0, 0, .14) 50%, rgba(255, 255, 255, .25) 51%, transparent 56%); opacity: var(--vq); }

/* Lamso: rises, turns to face you, glows; tap waves never stop */
.vs-glow {
  display: grid; grid-template-rows: auto 1fr auto; padding: 8% 9%; color: #fff; overflow: hidden;
  background: radial-gradient(70% 90% at 0% 0%, rgba(18, 214, 195, .35), transparent 60%), linear-gradient(150deg, #3B37F0, #6A2FE0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 calc(20px + var(--vq) * 20px) calc(40px + var(--vq) * 40px) calc(-20px + var(--vq) * 4px) rgba(74, 70, 242, calc(.6 + var(--vq) * .35));
  transform: translateY(calc(20px - var(--vq) * 34px)) rotateY(calc(-22deg + var(--vq) * 22deg)) rotateX(calc(8deg - var(--vq) * 8deg)) scale(calc(.94 + var(--vq) * .08));
  animation: vs-float 5s ease-in-out infinite;
}
.vs-glow::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .4) 50%, transparent 58%); transform: translateX(calc(60% - var(--vq) * 120%)); mix-blend-mode: soft-light; pointer-events: none; }
@keyframes vs-float { 50% { translate: 0 -8px; } }
.vs-glow img { width: 17%; height: auto; border-radius: 22%; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.vg-name { align-self: end; font-weight: 900; font-size: clamp(.75rem, 2.8vw, 1.15rem); }
.vg-sub { font-size: clamp(.55rem, 2vw, .8rem); opacity: .85; }
.vg-waves { position: absolute; top: 14%; left: 12%; width: 0; height: 0; }
.vg-waves i { position: absolute; width: 60px; height: 60px; left: -30px; top: -30px; border-radius: 50%; border: 2px solid rgba(18, 214, 195, .9); opacity: 0; animation: vs-wave 2.6s var(--ease-out) infinite; }
.vg-waves i:nth-child(2) { animation-delay: .85s; } .vg-waves i:nth-child(3) { animation-delay: 1.7s; }
@keyframes vs-wave { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

.vs-orb { position: relative; width: clamp(52px, 9vw, 76px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #1B1850, #0B0A26); box-shadow: 0 0 30px rgba(74, 70, 242, .5); }
.vs-orb b { position: relative; font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 2.6vw, 1.4rem); color: #F4F3FF; }
.vs-orb i { position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, #12D6C3 75%, #8E8BFF 90%, transparent); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: vs-spin 3s linear infinite; }
.vs-orb i:nth-child(2) { inset: -14px; opacity: .45; animation-duration: 5s; animation-direction: reverse; }
@keyframes vs-spin { to { transform: rotate(360deg); } }

/* rows: label in the middle, paper on one side, Lamso on the other; a beam fills down the middle as you scroll */
.vs-rows { --vr: 0; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vs-rows::after { --vr: inherit; }
.vs-rows::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(255, 255, 255, .06); }
.vs-rows::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(to bottom, #12D6C3, #8E8BFF); box-shadow: 0 0 14px #12D6C3; transform: scaleY(var(--vr)); transform-origin: 50% 0; }
.vs-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(0, 1fr); grid-template-areas: "old label new"; align-items: stretch; gap: 14px; } /* both answers share one height */
.vs-label {
  grid-area: label; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  font-weight: 800; font-size: var(--fs-sm); white-space: nowrap; background: #14123A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px -14px rgba(0, 0, 0, .9);
}
.vs-label { align-self: center; }
.vs-label .i { width: 18px; height: 18px; color: #12D6C3; }
.vs-old, .vs-new { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 18px; font-size: var(--fs-sm); line-height: 1.7; }
.vs-old { grid-area: old; color: #8C89BF; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.vs-new { grid-area: new; position: relative; overflow: hidden; color: #F4F3FF; font-weight: 700; background: linear-gradient(120deg, rgba(18, 214, 195, .14), rgba(74, 70, 242, .2)); box-shadow: inset 0 0 0 1px rgba(18, 214, 195, .3), 0 18px 36px -24px rgba(18, 214, 195, .7); }
.vs-new::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%) 160% 0 / 250% 100% no-repeat; pointer-events: none; }
.vs-mark { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.vs-old .vs-mark { color: #FF7D97; background: rgba(255, 59, 92, .1); }
.vs-old .vs-mark .i { width: 14px; height: 14px; }
.vs-new .vs-mark { color: #07061A; background: #12D6C3; box-shadow: 0 0 16px rgba(18, 214, 195, .7); }
.vs-new .vs-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.vs-row:hover .vs-new { box-shadow: inset 0 0 0 1px rgba(18, 214, 195, .6), 0 22px 44px -22px rgba(18, 214, 195, .9); }

/* entrance (only with motion): label pops, paper slides in and settles grey, Lamso unrolls from the middle and lights up */
.motion .vs-row > * { transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), clip-path .9s var(--ease-out); }
.motion .vs-row .vs-label { transition-delay: calc(var(--d, 0) * 90ms); transition-timing-function: var(--ease-out), var(--ease-spring); }
.motion .vs-row .vs-old { transition-delay: calc(var(--d, 0) * 90ms + 140ms); }
.motion .vs-row .vs-new { transition-delay: calc(var(--d, 0) * 90ms + 340ms); }
.motion .vs-row:not(.in) .vs-label { opacity: 0; transform: scale(.5); }
.motion .vs-row:not(.in) .vs-old { opacity: 0; transform: translateX(46px) rotate(2deg); }
.motion .vs-row:not(.in) .vs-new { opacity: 0; clip-path: inset(0 0 0 100% round 18px); }
.motion .vs-row:not(.in) .vs-new .vs-mark svg { stroke-dashoffset: 24; }
.motion .vs-row.in .vs-new .vs-mark svg { transition: stroke-dashoffset .5s var(--ease-out) calc(var(--d, 0) * 90ms + 900ms); }
.motion .vs-row.in .vs-new::after { animation: vs-sweep 1s var(--ease-out) calc(var(--d, 0) * 90ms + 800ms) both; }
.motion .vs-row.in .vs-old .vs-mark { animation: vs-shake .5s ease calc(var(--d, 0) * 90ms + 650ms) backwards; }
@keyframes vs-sweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes vs-shake { 20%, 60% { transform: translateX(-3px) rotate(-8deg); } 40%, 80% { transform: translateX(3px) rotate(8deg); } }

@media (max-width: 720px) {
  .vs { padding-top: 70px; gap: 22px; }
  .vs-stage { gap: 8px; }
  .vs-tag { font-size: var(--fs-xs); padding: 4px 10px; }
  .vs-rows::before, .vs-rows::after { display: none; }
  .vs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "label label" "old new"; gap: 8px; padding: 12px; border-radius: 22px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
  .vs-label { justify-self: start; padding: 6px 12px; font-size: var(--fs-xs); }
  .vs-old, .vs-new { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 12px; font-size: .8rem; line-height: 1.65; }
  .vs-mark { width: 26px; height: 26px; }
  .motion .vs-row:not(.in) .vs-old { transform: translateX(26px); }
}

/* ── Audiences marquee ── */
.who { padding: 60px 0; display: grid; gap: 26px; }
.who .lp-h2 { padding: 0 20px; max-width: 1240px; margin: 0 auto; width: 100%; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-track { list-style: none; margin: 0; padding: 6px 0; display: flex; gap: 12px; width: max-content; animation: mq 46s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(50%); } }
.mq-track li { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; white-space: nowrap; font-weight: 800; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.mq-track .i { width: 22px; height: 22px; color: #12D6C3; }

/* ── FAQ: glass accordion with a living border, and a scene for the open question (wide screens) ── */
.fq-sec { max-width: 1140px; margin: 0 auto; padding: 80px 20px; display: grid; gap: 30px; }
.fq-head { display: grid; gap: 12px; max-width: 640px; }
.fq-wrap { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .fq-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; } .fq-stage { position: sticky; top: 96px; } }
.fq-list { display: grid; gap: 10px; }
.fq {
  position: relative; border-radius: 24px; isolation: isolate;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow .45s ease, background-color .45s ease, transform .45s var(--ease-spring);
}
/* a light runs around the border of the open question */
.fq::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from 300deg, transparent 0 62%, #12D6C3 80%, #8E8BFF 92%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .45s ease;
}
.fq.open::before { animation: fq-breathe 1.8s ease-in-out infinite alternate; }
@keyframes fq-breathe { from { opacity: .45; } to { opacity: 1; } }
.fq.open { background: linear-gradient(160deg, rgba(74, 70, 242, .2), rgba(18, 214, 195, .06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -36px rgba(18, 214, 195, .55); }
.fq.open::before { opacity: 1; }
.fq:not(.open):hover { transform: translateX(-4px); background-color: rgba(255, 255, 255, .03); }
.fq-h { margin: 0; font-size: inherit; }
.fq-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: none; color: #F4F3FF; font: inherit; font-weight: 800; line-height: 1.7; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fq-q:focus-visible { outline: 2px solid #12D6C3; outline-offset: 2px; border-radius: 22px; }
.fq-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: #12D6C3; background: rgba(18, 214, 195, .1); box-shadow: inset 0 0 0 1px rgba(18, 214, 195, .22); transition: background .4s ease, color .4s ease, transform .5s var(--ease-spring), box-shadow .4s ease; }
.fq-ic .i { width: 22px; height: 22px; }
.fq.open .fq-ic { color: #fff; background: linear-gradient(150deg, #3B37F0, #12D6C3); box-shadow: 0 10px 24px -10px rgba(18, 214, 195, .9); transform: rotate(-8deg) scale(1.08); }
.fq-t { flex: 1; min-width: 0; }
.fq-pm { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background-color .35s ease, transform .5s var(--ease-spring); }
.fq-pm i { position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #12D6C3; transition: transform .45s var(--ease-spring), background-color .3s ease; }
.fq-pm i:nth-child(2) { transform: rotate(90deg); }
.fq.open .fq-pm { background: #12D6C3; transform: rotate(180deg); }
.fq.open .fq-pm i { background: #07061A; }
.fq.open .fq-pm i:nth-child(2) { transform: rotate(0deg); }
.fq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease-out); }
.fq-list.ready .fq:not(.open) .fq-a { grid-template-rows: 0fr; }
.fq-a-in { min-height: 0; overflow: hidden; }
.fq-a p { padding: 0 16px 20px; padding-inline-start: 76px; color: #C9C6F0; font-size: var(--fs-sm); line-height: 2.05; }
.fq.open .fq-a p { animation: fq-in .6s .12s var(--ease-out) backwards; }
@keyframes fq-in { from { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@media (max-width: 600px) { .fq-a p { padding-inline-start: 16px; } .fq-q { gap: 12px; padding: 12px; } .fq-ic { width: 40px; height: 40px; border-radius: 13px; } }

/* stage */
.fq-stage { position: relative; aspect-ratio: 1; border-radius: 34px; overflow: hidden; clip-path: inset(0 round 34px); perspective: 900px; background: radial-gradient(80% 80% at 50% 40%, rgba(74, 70, 242, .22), transparent 70%), rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
@media (max-width: 959px) { .fq-stage { display: none; } }
.fq-glow { position: absolute; inset: -30%; background: conic-gradient(rgba(18, 214, 195, .14), transparent 30%, rgba(142, 139, 255, .18) 60%, transparent 80%); animation: fq-turn 14s linear infinite; filter: blur(30px); will-change: transform; }
@keyframes fq-turn { to { transform: rotate(1turn); } }
.fqs { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.82) rotateX(16deg); transition: opacity .5s ease, transform .8s var(--ease-out); }
.fqs.on { opacity: 1; transform: none; }
.fqs:not(.on) * { animation-play-state: paused !important; }
.fqs span, .fqs i, .fqs b { position: absolute; display: block; }
.s-badge { position: absolute; top: 12%; left: 10%; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: var(--fs-sm); color: #07061A; background: #12D6C3; box-shadow: 0 0 24px rgba(18, 214, 195, .7); animation: s-pop 4s var(--ease-spring) infinite; }
@keyframes s-pop { 0%, 30% { transform: scale(0) rotate(-12deg); } 42%, 90% { transform: scale(1) rotate(-6deg); } 100% { transform: scale(0); } }

/* 0 · phones: card meets phone, waves; the second way in is a QR scan */
.fqs-0 .s-phone { left: 44%; top: 15%; width: 30%; aspect-ratio: 9 / 18.5; border-radius: 22px; background: linear-gradient(160deg, #2B2768, #14123A); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 30px 40px -20px rgba(0, 0, 0, .9); overflow: hidden; }
.fqs-0 .s-qr { inset: 26% 16% auto; aspect-ratio: 1; border-radius: 8px; background: repeating-conic-gradient(#14123A 0 25%, #fff 0 50%) 0 0 / 22% 22%, #fff; box-shadow: 0 0 0 5px #fff; }
.fqs-0 .s-scan { left: 10%; right: 10%; top: 26%; height: 3px; border-radius: 3px; background: #12D6C3; box-shadow: 0 0 14px #12D6C3; animation: s-scan 2.4s ease-in-out infinite alternate; }
@keyframes s-scan { to { transform: translateY(1400%); } }
.fqs-0 .s-card { left: 10%; top: 52%; width: 42%; aspect-ratio: 1.586; border-radius: 12px; background: linear-gradient(150deg, #3B37F0, #6A2FE0); box-shadow: 0 20px 30px -14px rgba(74, 70, 242, .9), inset 0 0 0 1px rgba(255, 255, 255, .25); animation: s-tap 3.2s var(--ease-in-out) infinite; }
@keyframes s-tap { 0%, 100% { transform: translate(0, 0) rotate(-14deg); } 45%, 60% { transform: translate(34%, -46%) rotate(-4deg); } }
.fqs-0 .s-waves { left: 48%; top: 34%; }
.fqs-0 .s-waves i { width: 70px; height: 70px; left: -35px; top: -35px; border-radius: 50%; border: 2px solid #12D6C3; opacity: 0; animation: s-wave 3.2s var(--ease-out) infinite; }
.fqs-0 .s-waves i:nth-child(2) { animation-delay: .2s; } .fqs-0 .s-waves i:nth-child(3) { animation-delay: .4s; }
@keyframes s-wave { 0%, 44% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; } 80%, 100% { opacity: 0; transform: scale(2.4); } }

/* 1 · no app: a browser opens straight onto the profile */
.fqs-1 .s-browser { left: 18%; top: 18%; width: 64%; height: 66%; border-radius: 20px; overflow: hidden; background: #0E0C2C; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 30px 50px -24px rgba(0, 0, 0, .9); }
.fqs-1 .s-bar { position: relative; height: 15%; background: rgba(255, 255, 255, .06); }
.fqs-1 .s-bar b { left: 12%; top: 30%; height: 40%; width: 0; border-radius: 999px; background: rgba(255, 255, 255, .22); animation: s-type 4s steps(14, end) infinite; }
@keyframes s-type { 0% { width: 0; } 30%, 100% { width: 76%; } }
.fqs-1 .s-hero { position: relative; margin: 8% 8% 0; height: 30%; border-radius: 14px; background: linear-gradient(150deg, #3B37F0, #6A2FE0); transform-origin: 50% 0; animation: s-drop 4s var(--ease-spring) infinite; }
@keyframes s-drop { 0%, 30% { transform: scaleY(0); opacity: 0; } 42%, 100% { transform: none; opacity: 1; } }
.fqs-1 .s-row { position: relative; margin: 5% 8% 0; height: 8%; border-radius: 8px; background: rgba(255, 255, 255, .08); animation: s-fade 4s ease infinite; }
.fqs-1 .s-row + .s-row { animation-delay: .15s; }
@keyframes s-fade { 0%, 40% { opacity: 0; transform: translateY(8px); } 52%, 100% { opacity: 1; transform: none; } }
.fqs-1 .s-btn { left: 8%; right: 8%; bottom: 7%; height: 12%; border-radius: 12px; background: linear-gradient(150deg, #12D6C3, #3B37F0); animation: s-glow 4s ease infinite; }
@keyframes s-glow { 0%, 55% { box-shadow: none; opacity: 0; } 65%, 100% { opacity: 1; box-shadow: 0 0 24px rgba(18, 214, 195, .8); } }

/* 2 · catalog: pages turning */
.fqs-2 .s-book { left: 30%; top: 20%; width: 40%; aspect-ratio: 3 / 4; perspective: 900px; transform: rotateX(10deg) rotateY(-14deg); transform-style: preserve-3d; }
.fqs-2 .s-book i { inset: 0; border-radius: 4px 10px 10px 4px; transform-origin: 100% 50%; box-shadow: -8px 12px 24px -10px rgba(0, 0, 0, .7); }
.fqs-2 .s-book i:nth-child(1) { background: linear-gradient(160deg, #3BAE8C, #1D6FB8); }
.fqs-2 .s-book i:nth-child(2) { background: linear-gradient(160deg, #FF9A6B, #6A4BD8); animation: s-leaf 4.8s var(--ease-in-out) 1.2s infinite; }
.fqs-2 .s-book i:nth-child(3) { background: linear-gradient(160deg, #F1B51E, #E0507A); animation: s-leaf 4.8s var(--ease-in-out) .6s infinite; }
.fqs-2 .s-book i:nth-child(4) { background: linear-gradient(160deg, #FBFAFF, #DAD8F0); animation: s-leaf 4.8s var(--ease-in-out) infinite; }
@keyframes s-leaf { 0%, 10% { transform: rotateY(0); } 40%, 75% { transform: rotateY(172deg); } 95%, 100% { transform: rotateY(0); } }

/* 3 · editing: a line on the card is rewritten, then saved */
.fqs-3 .s-edit { left: 16%; top: 30%; width: 68%; aspect-ratio: 1.586; border-radius: 16px; background: linear-gradient(150deg, #3B37F0, #6A2FE0); box-shadow: 0 30px 50px -24px rgba(74, 70, 242, .9), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.fqs-3 .s-l1 { right: 9%; top: 18%; width: 46%; height: 9%; border-radius: 5px; background: rgba(255, 255, 255, .95); }
.fqs-3 .s-l2 { right: 9%; top: 38%; height: 7%; border-radius: 4px; background: rgba(18, 214, 195, .9); animation: s-retype 4s steps(10, end) infinite; }
.fqs-3 .s-l2 b { left: -4px; top: -30%; width: 3px; height: 160%; background: #fff; animation: s-caret .5s steps(1) infinite; }
@keyframes s-retype { 0%, 12% { width: 52%; } 30% { width: 0; } 70%, 100% { width: 62%; } }
@keyframes s-caret { 50% { opacity: 0; } }
.fqs-3 .s-l3 { right: 9%; top: 56%; width: 34%; height: 6%; border-radius: 4px; background: rgba(255, 255, 255, .45); }
.fqs-3 .s-ok { left: 8%; bottom: 10%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #12D6C3 radial-gradient(circle, transparent 0 0) center / 50% no-repeat; box-shadow: 0 0 22px rgba(18, 214, 195, .8); animation: s-okpop 4s var(--ease-spring) infinite; }
.fqs-3 .s-ok::after { content: ''; position: absolute; left: 30%; top: 22%; width: 22%; height: 40%; border: solid #07061A; border-width: 0 4px 4px 0; transform: rotate(45deg); }
@keyframes s-okpop { 0%, 72% { transform: scale(0); } 80%, 94% { transform: scale(1); } 100% { transform: scale(0); } }

/* 4 · lost card: switched off from the panel */
.fqs-4 .s-lost { inset: 0; }
.fqs-4 .s-lcard { left: 18%; top: 18%; width: 64%; aspect-ratio: 1.586; border-radius: 16px; background: linear-gradient(150deg, #3B37F0, #6A2FE0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); animation: s-dim 4s ease infinite; }
@keyframes s-dim { 0%, 40% { filter: none; } 55%, 92% { filter: grayscale(1) brightness(.45); } 100% { filter: none; } }
.fqs-4 .s-switch { left: 34%; top: 68%; width: 32%; height: 13%; border-radius: 999px; background: rgba(18, 214, 195, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); animation: s-track 4s ease infinite; }
.fqs-4 .s-switch b { top: 10%; right: 6%; width: 32%; aspect-ratio: 1; height: auto; border-radius: 50%; background: #fff; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .6); animation: s-knob 4s var(--ease-spring) infinite; }
@keyframes s-track { 0%, 40% { background: rgba(18, 214, 195, .5); } 50%, 92% { background: rgba(255, 59, 92, .55); } 100% { background: rgba(18, 214, 195, .5); } }
@keyframes s-knob { 0%, 40% { transform: translateX(0); } 50%, 92% { transform: translateX(-170%); } 100% { transform: translateX(0); } }
.fqs-4 .s-lock { left: 42%; top: 27%; width: 16%; aspect-ratio: 1; border-radius: 6px; background: #FF7D97; box-shadow: 0 0 24px rgba(255, 59, 92, .8); animation: s-lockin 4s var(--ease-spring) infinite; }
.fqs-4 .s-lock::before { content: ''; position: absolute; left: 20%; right: 20%; top: -55%; height: 70%; border: 4px solid #FF7D97; border-bottom: 0; border-radius: 40px 40px 0 0; }
@keyframes s-lockin { 0%, 48% { transform: scale(0); } 58%, 90% { transform: scale(1); } 100% { transform: scale(0); } }

/* 5 · no battery: the phone's field powers the chip */
.fqs-5 .s-chip { left: 22%; top: 30%; width: 56%; aspect-ratio: 1.586; border-radius: 16px; background: linear-gradient(150deg, #1D1A52, #0B0A26); box-shadow: inset 0 0 0 1.5px rgba(18, 214, 195, .4), 0 30px 50px -24px rgba(0, 0, 0, .9); }
.fqs-5 .s-coil { inset: 16% 22%; border-radius: 14px; border: 2px solid rgba(18, 214, 195, .7); box-shadow: 0 0 0 7px rgba(18, 214, 195, .12), 0 0 0 9px rgba(18, 214, 195, .5), 0 0 0 16px rgba(18, 214, 195, .08), 0 0 0 18px rgba(18, 214, 195, .35); animation: s-charge 2s ease-in-out infinite; }
@keyframes s-charge { 50% { filter: drop-shadow(0 0 10px #12D6C3); border-color: #fff; } }
.fqs-5 .s-core { left: 42%; top: 36%; width: 16%; height: 28%; border-radius: 4px; background: linear-gradient(160deg, #FFD15C, #F08A00); box-shadow: 0 0 18px rgba(255, 176, 32, .8); }
.fqs-5 .s-flow { top: -60%; width: 8px; height: 8px; border-radius: 50%; background: #12D6C3; box-shadow: 0 0 12px #12D6C3; animation: s-flow 2s linear infinite; }
.fqs-5 .s-flow:nth-of-type(3) { left: 30%; } .fqs-5 .s-flow:nth-of-type(4) { left: 50%; animation-delay: .6s; } .fqs-5 .s-flow:nth-of-type(5) { left: 70%; animation-delay: 1.2s; }
@keyframes s-flow { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(260%); opacity: 0; } }

/* ── Closing stage ── */
.lp-final {
  position: relative; overflow: hidden; isolation: isolate; margin: 40px 16px 0; padding: 110px 22px 90px; border-radius: 40px; text-align: center;
  background: radial-gradient(90% 80% at 50% 120%, rgba(18, 214, 195, .28), transparent 60%), linear-gradient(160deg, #2F2BEA, #4A1FB8 60%, #14123A);
  display: grid; justify-items: center; gap: 16px; box-shadow: 0 60px 120px -60px rgba(47, 43, 234, .9);
}
@media (min-width: 1280px) { .lp-final { max-width: 1240px; margin-inline: auto; } }
.lp-final .lp-h2 { color: #fff; }
.lp-final p { color: rgba(255, 255, 255, .88); line-height: 1.9; }
.lp-final .lp-ctas { justify-content: center; margin-top: 8px; }
.final-orbit { position: absolute; left: 50%; top: 36%; width: 0; height: 0; z-index: -1; transform-style: preserve-3d; transform: rotateX(70deg); animation: orbit 18s linear infinite; }
.fo-card { position: absolute; width: 110px; height: 70px; left: -55px; top: -35px; border-radius: 10px; background: linear-gradient(150deg, var(--h1), var(--h2)); box-shadow: 0 20px 30px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .25); opacity: .55; }
.fo-card:nth-child(1) { transform: rotateZ(0deg) translateX(min(42vw, 420px)) rotateX(-70deg); }
.fo-card:nth-child(2) { transform: rotateZ(90deg) translateX(min(42vw, 420px)) rotateX(-70deg); }
.fo-card:nth-child(3) { transform: rotateZ(180deg) translateX(min(42vw, 420px)) rotateX(-70deg); }
.fo-card:nth-child(4) { transform: rotateZ(270deg) translateX(min(42vw, 420px)) rotateX(-70deg); }
@keyframes orbit { to { transform: rotateX(70deg) rotateZ(360deg); } }
.final-floor { position: absolute; left: 50%; bottom: -10px; width: 0; height: 0; z-index: -1; transform: perspective(600px) rotateX(75deg); }
/* Phones and tablets: the orbiting cards would pass through the headline on a narrower screen, so a small fanned
   hand of cards sits above it instead, breathing gently. */
.final-fan { display: none; }
@media (max-width: 1023px) {
  .lp-final { padding: 40px 20px 46px; gap: 14px; clip-path: inset(0 round 40px); }
  .final-orbit { display: none; }
  .final-fan { display: block; position: relative; width: 236px; height: 132px; margin-bottom: 6px; }
  .ffan {
    position: absolute; left: 50%; top: 20px; width: 128px; height: 81px; margin-left: -64px; border-radius: 12px;
    background: linear-gradient(150deg, var(--h1), var(--h2));
    box-shadow: 0 18px 30px -14px rgba(7, 6, 26, .8), inset 0 0 0 1px rgba(255, 255, 255, .28);
    transform-origin: 50% 130%;
  }
  .ffan:nth-child(1) { transform: rotate(-16deg) translateX(-14px); opacity: .9; }
  .ffan:nth-child(2) { transform: rotate(16deg) translateX(14px); opacity: .9; }
  .ffan:nth-child(3) { display: flex; align-items: flex-start; justify-content: space-between; padding: 11px 12px; transform: translateY(-8px); }
  .ffan img { width: 26px; height: 26px; border-radius: 8px; }
  .ffan .i { width: 20px; height: 20px; color: rgba(255, 255, 255, .9); }
  .motion .final-fan.in .ffan:nth-child(1) { animation: fan-l 4.8s var(--ease-in-out) infinite alternate; }
  .motion .final-fan.in .ffan:nth-child(2) { animation: fan-r 4.8s var(--ease-in-out) infinite alternate; }
  .motion .final-fan.in .ffan:nth-child(3) { animation: fan-c 4.8s var(--ease-in-out) infinite alternate; }
  @keyframes fan-l { to { transform: rotate(-21deg) translateX(-20px); } }
  @keyframes fan-r { to { transform: rotate(21deg) translateX(20px); } }
  @keyframes fan-c { to { transform: translateY(-14px); } }
  .lp-final-ask { line-height: 2.2; }
}
/* Phones: the two buttons stack with the same width. */
@media (max-width: 719px) {
  .lp-final .lp-ctas { display: grid; justify-content: stretch; width: 100%; max-width: 320px; margin-top: 4px; }
  .lp-final .lp-ctas .lp-btn { width: 100%; justify-content: center; }
}
.final-floor span { position: absolute; width: 700px; height: 700px; left: -350px; top: -350px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); opacity: 0; animation: lp-floor 5.4s var(--ease-out) infinite; }
.final-floor span:nth-child(2) { animation-delay: 1.8s; }
.final-floor span:nth-child(3) { animation-delay: 3.6s; }

.lp-foot { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 40px 20px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; color: #8C89BF; font-size: var(--fs-xs); }
.lp-foot img { height: 30px; width: auto; }
.lp-foot p { flex: 1; min-width: 200px; }
.lp-foot a { color: #9A97FF; font-weight: 700; text-decoration: none; }

/* ── Packages & prices ──
   Pick the card material (photo + three options), and every package's price follows. Works without script
   (:has); the script only rolls the numbers. */
.pk { max-width: 1240px; margin: 0 auto; padding: 100px 20px 80px; display: grid; gap: 34px; }
.pk-config { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .pk-config { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; } }
/* clip-path (not only overflow + radius) so Safari also rounds the corners of the moving photos inside. */
.pk-show { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; clip-path: inset(0 round 28px); isolation: isolate; background: #0B0A24; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); perspective: 1200px; }
.pk-show img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06) rotateY(-8deg); transition: opacity .7s var(--ease-out), transform 1s var(--ease-out); }
.pk:has(#pk-m-pvc:checked) .pk-show img[data-mat="pvc"],
.pk:has(#pk-m-metal:checked) .pk-show img[data-mat="metal"],
.pk:has(#pk-m-wood:checked) .pk-show img[data-mat="wood"] { opacity: 1; transform: none; }
@supports not selector(:has(*)) { .pk-show img:first-of-type { opacity: 1; transform: none; } }
.pk-show-glow { display: none; } /* a light patch at the top-left spoiled the photo's own gradient */
.pk-mats { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.pk-legend { padding: 0; margin-bottom: 10px; color: #B8B5E3; font-size: var(--fs-sm); font-weight: 700; }
.pk-mat {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background-color .3s ease, box-shadow .3s ease, transform .45s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.pk-mat:hover { background: rgba(255, 255, 255, .08); }
.pk-mat input { position: absolute; opacity: 0; pointer-events: none; }
.pk-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); display: grid; place-items: center; transition: box-shadow .3s ease; }
.pk-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #12D6C3; transform: scale(0); transition: transform .45s var(--ease-spring); box-shadow: 0 0 12px rgba(18, 214, 195, .9); }
.pk-mat-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pk-mat-name { font-weight: 900; font-size: 1.1rem; line-height: 1.6; }
.pk-mat-desc { color: #B8B5E3; font-size: .875rem; line-height: 1.8; }
.pk-swatch { flex: none; width: 46px; height: 30px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 16px -8px rgba(0, 0, 0, .9); transform: rotate(-8deg); transition: transform .5s var(--ease-spring); }
.pk-sw-pvc { background: linear-gradient(150deg, #FFFFFF 0 48%, #3B37F0 48% 100%); }
.pk-sw-metal { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 3px), linear-gradient(150deg, #E9CB7E, #B98B32 50%, #2B2D32 50%, #16171A); }
.pk-sw-wood { background: repeating-linear-gradient(170deg, rgba(60, 30, 10, .35) 0 2px, transparent 2px 6px), linear-gradient(150deg, #D9B27C, #8E5C36); }
.pk-mat:has(input:checked) { background: linear-gradient(120deg, rgba(59, 55, 240, .3), rgba(18, 214, 195, .12)); box-shadow: inset 0 0 0 1.5px rgba(18, 214, 195, .65), 0 20px 40px -26px rgba(18, 214, 195, .7); transform: translateX(-4px); }
.pk-mat:has(input:checked) .pk-radio { box-shadow: inset 0 0 0 2px #12D6C3; }
.pk-mat:has(input:checked) .pk-radio::after { transform: scale(1); }
.pk-mat:has(input:checked) .pk-swatch { transform: rotate(0) scale(1.1); }
.pk-mat:has(input:focus-visible) { outline: 3px solid #8E8BFF; outline-offset: 3px; }

.pk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; perspective: 1400px; align-items: stretch; }
@media (min-width: 760px) { .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pk-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 24px; border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 70px -50px rgba(0, 0, 0, .9);
}
.pk-card.is-hot { background: linear-gradient(165deg, rgba(59, 55, 240, .38), rgba(106, 47, 224, .16) 55%, rgba(255, 255, 255, .03)); }
/* The best seller wears a slowly turning ring of light. */
.pk-card.is-hot::before {
  content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: 29.5px; padding: 1.5px;
  background: conic-gradient(from 30deg, #12D6C3, transparent 30%, #8E8BFF 50%, transparent 70%, #12D6C3);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pk-breathe 2.6s ease-in-out infinite alternate;
}
@keyframes pk-breathe { from { opacity: .5; } to { opacity: 1; } }
@media (min-width: 760px) { .pk-card.is-hot { transform: translateY(-14px); } }
.pk-badge { position: absolute; top: -13px; inset-inline-start: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #0B0A24; background: linear-gradient(120deg, #FFB020, #FFD27A); box-shadow: 0 10px 20px -10px rgba(255, 176, 32, .9); }
.pk-badge .i { width: 15px; height: 15px; }
.pk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pk-name { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.3; }
.pk-count { color: #B8B5E3; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.pk-price { display: none; gap: 6px; }
.pk:has(#pk-m-pvc:checked) .pk-price[data-mat="pvc"],
.pk:has(#pk-m-metal:checked) .pk-price[data-mat="metal"],
.pk:has(#pk-m-wood:checked) .pk-price[data-mat="wood"] { display: grid; }
@supports not selector(:has(*)) { .pk-price[data-first] { display: grid; } }
.pk-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pk-amount b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 7vw, 2.9rem); line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #FFFFFF 35%, #B9B5FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-amount small { color: #B8B5E3; font-size: .9rem; font-weight: 700; }
.pk-per { color: #B8B5E3; font-size: .85rem; line-height: 1.7; }
.pk-save { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #3FE0BC; background: rgba(63, 224, 188, .12); box-shadow: inset 0 0 0 1px rgba(63, 224, 188, .3); }
.pk-cta { margin-top: 8px; min-height: 52px; border-radius: 16px; width: 100%; background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.pk-card.is-hot .pk-cta { background: #fff; color: #2F2BEA; box-shadow: 0 16px 34px -16px rgba(255, 255, 255, .55); }
.pk-cta:hover { background: rgba(255, 255, 255, .14); }
.pk-card.is-hot .pk-cta:hover { background: #EDEBFF; }
.pk-feats { list-style: none; margin: 4px 0 0; padding: 14px 0 0; display: grid; gap: 9px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pk-feats li { display: flex; gap: 9px; align-items: flex-start; color: #DCDAF7; font-size: .9rem; line-height: 1.8; }
.pk-feats .i { flex: none; width: 18px; height: 18px; margin-top: 4px; color: #12D6C3; stroke-width: 2.4; }
.pk-note { display: flex; gap: 8px; align-items: flex-start; justify-content: center; color: #8C89BF; font-size: .875rem; line-height: 1.9; text-align: center; }
.pk-note .i { flex: none; width: 18px; height: 18px; margin-top: 3px; }

.pk-gal { display: grid; gap: 16px; margin-top: 10px; }
.pk-gal-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 4.6vw, 2rem); line-height: 1.4; }
.pk-strip { list-style: none; margin: 0 -20px; padding: 6px 20px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pk-strip::-webkit-scrollbar { display: none; }
.pk-strip li { scroll-snap-align: center; }
@media (min-width: 640px) { .pk-strip { grid-auto-columns: 46%; } }
@media (min-width: 980px) { .pk-strip { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
.pk-strip figure { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: #0B0A24; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 50px -36px rgba(0, 0, 0, .9); }
.pk-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease-out); }
.pk-strip figure:hover img { transform: scale(1.05); }
.pk-strip figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 16px 12px; font-size: .85rem; font-weight: 700; color: #F4F3FF; background: linear-gradient(to top, rgba(7, 6, 26, .85), transparent); }
.lp-final-ask { margin-top: 4px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .78) !important; }
.lp-final-ask a { margin-inline: 6px; color: #fff; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.lp-final-ask a:hover { text-decoration-color: #fff; }