/* NFC Crypto Kit demo page: black metal, white primary, card first (the kit's own look, brand_config.dart).
   Its own design: the phone and a tray of metal cards you "tap" to it, two more phones, then a MacBook that opens
   on scroll with Card Studio. Only external files (the demo hosts send a strict CSP). */
:root {
  --bg: #000; --ink: #f5f5f7; --muted: #8e8e93; --line: rgba(255, 255, 255, .1); --panel: #0c0c0d;
  --ok: #30d158; --warn: #ffb340;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", Menlo, "Roboto Mono", monospace;
  --metal: linear-gradient(115deg, #fff 0%, #c7c7cc 38%, #fff 52%, #8e8e93 80%, #e5e5ea 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; background: radial-gradient(900px 640px at 70% 420px, rgba(255, 255, 255, .07), transparent 70%) no-repeat, #000; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
.eyebrow { margin: 0; font: 600 12px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---------- top bar ---------- */
.top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 18px; padding: 20px clamp(16px, 4vw, 44px); font-size: 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.brand i { width: 30px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #3a3a3c, #0a0a0b); border: 1px solid rgba(255, 255, 255, .25); position: relative; }
.brand i::after { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 5px; border-radius: 1px; background: linear-gradient(135deg, #f3d98b, #c9a54a); }
.badge { font: 700 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #000; background: #fff; border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.top nav { margin-left: auto; display: flex; gap: 22px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

/* ---------- intro ---------- */
.intro { position: relative; overflow: hidden; min-height: 92vh; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; max-width: 1240px; margin: 0 auto;
  padding: 120px clamp(16px, 4vw, 44px) 40px; }
.intro h1 { margin: 18px 0 18px; font-size: clamp(42px, 6.4vw, 86px); line-height: .98; letter-spacing: -.04em; font-weight: 700; }
.intro h1 em { font-style: normal; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 560px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; }
.demo-note { max-width: 560px; margin: 24px 0 0; padding: 14px 18px; border: 1px dashed rgba(255, 255, 255, .4); border-radius: 14px; background: rgba(255, 255, 255, .03); font-size: 15px; line-height: 1.5; }
.demo-note strong { display: block; margin-bottom: 4px; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.cta { margin-top: 26px; border: 0; border-radius: 999px; padding: 15px 28px; font-weight: 700; font-size: 16px; background: #fff; color: #000; box-shadow: 0 12px 40px rgba(255, 255, 255, .15); }
.hero-card { perspective: 1200px; display: grid; place-items: center; }
.hero-card .waves { width: min(420px, 100%); }
.hero-card .mcard { width: 100%; transform: rotateY(-18deg) rotateX(8deg) rotateZ(-4deg); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: rotateY(-8deg) rotateX(4deg) rotateZ(-2deg) translateY(-12px); } }
.hero-card .waves { position: relative; }
.hero-card .waves > span { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; animation: wave 4s ease-out infinite; pointer-events: none; }
.hero-card .waves > span:nth-child(2) { animation-delay: 1.3s; }
.hero-card .waves > span:nth-child(3) { animation-delay: 2.6s; }
@keyframes wave { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.55); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }

/* ---------- metal card (the same art as the apps' NfcCardArt) ---------- */
.mcard { position: relative; aspect-ratio: 1.586; border-radius: 6.5% / 10.3%; overflow: hidden; color: #fff; container-type: inline-size; user-select: none;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
  background: linear-gradient(135deg, #3a3a3c, #1c1c1e 55%, #111112); }
.mcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .1) 45%, transparent 60%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.mcard .b { position: absolute; left: 7%; top: 9%; font-weight: 700; font-size: 7.5cqw; }
.mcard .w { position: absolute; right: 6.5%; top: 8%; width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #000; }
.mcard .w svg { width: 62%; height: 62%; }
.mcard .chip { position: absolute; left: 7%; top: 38%; width: 13cqw; height: 10cqw; border-radius: 1.6cqw; background: linear-gradient(135deg, #f3d98b, #c9a54a); box-shadow: inset 0 0 0 .4cqw rgba(140, 106, 47, .55); }
.mcard .r { position: absolute; left: 7%; bottom: 23%; font: 700 4cqw/1 var(--mono); letter-spacing: .14em; padding: 1cqw 2cqw; border: 1px solid currentColor; border-radius: 99px; opacity: .8; }
.mcard .l { position: absolute; left: 7%; bottom: 10%; font-weight: 600; font-size: 5.6cqw; letter-spacing: .1em; text-transform: uppercase; }
.mcard .id { position: absolute; right: 7%; bottom: 10%; font: 500 4cqw/1 var(--mono); opacity: .75; }
.mcard.silver { background: linear-gradient(135deg, #f2f2f7, #c7c7cc 55%, #8e8e93); color: #111112; }
.mcard.silver .w { background: rgba(0, 0, 0, .85); color: #fff; }
.mcard.midnight { background: linear-gradient(135deg, #1a1a1c, #050505 55%, #000); }
.mcard.aurora { background: linear-gradient(135deg, #30d158, #0a84ff 55%, #5e5ce6); }

/* ---------- section heads ---------- */
.sec { max-width: 1240px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 44px) 24px; }
.sec h2 { margin: 12px 0 12px; font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -.03em; }
.sec > p { max-width: 640px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }

/* ---------- iPhone ---------- */
.iphone { --u: calc(var(--pw, 360px) / 100); position: relative; flex: none; width: var(--pw, 360px); container-type: inline-size; padding: calc(var(--u) * 3.2);
  border-radius: calc(var(--u) * 15); background: #050506;
  box-shadow: inset 0 0 0 calc(var(--u) * .6) #2c2e33, 0 0 0 calc(var(--u) * .5) #4a4d54, 0 40px 90px rgba(0, 0, 0, .7), 0 0 120px rgba(255, 255, 255, .05); }
.iphone::before { content: ""; position: absolute; z-index: 3; top: calc(var(--u) * 5.6); left: 50%; width: 30%; height: calc(var(--u) * 8.4); transform: translateX(-50%); border-radius: calc(var(--u) * 6); background: #000; }
.iphone .screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 390 / 844; border-radius: 12cqw; overflow: hidden; background: #000; }
.iphone .sb { flex: none; height: 12.5cqw; display: flex; align-items: center; justify-content: space-between; padding: 1.5cqw 8cqw 0 10cqw; color: #fff; font: 600 4.3cqw/1 var(--sans); }
.iphone .sb svg { height: 3.4cqw; width: auto; fill: currentColor; }
.iphone .sb .r { display: flex; gap: 1.6cqw; align-items: center; }
.vp { position: relative; flex: 1; overflow: hidden; background: #000; }
.vp iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #000; }
.phone-note { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------- main phone + card tray ---------- */
.play { max-width: 1240px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 44px) 40px; display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.play .iphone { --pw: min(380px, 86vw, calc((100vh - 60px) * .46)); position: sticky; top: 30px; }
.tray { padding: 26px; border-radius: 26px; background: var(--panel); border: 1px solid var(--line); }
.tray h3 { margin: 10px 0 6px; font-size: 24px; letter-spacing: -.01em; }
.tray > p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 15px; }
.wait { display: flex; align-items: center; gap: 10px; margin: 18px 0 18px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font: 13px/1.4 var(--mono); color: var(--muted); }
.wait i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #48484a; }
.wait.on { color: var(--ink); border-color: rgba(255, 255, 255, .35); }
.wait.on i { background: var(--ok); box-shadow: 0 0 0 4px rgba(48, 209, 88, .2); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tcard { display: block; padding: 0; border: 0; background: none; text-align: left; border-radius: 16px; transition: transform .2s, opacity .2s, filter .2s; }
.tcard .mcard { box-shadow: 0 14px 30px rgba(0, 0, 0, .6); transition: box-shadow .2s; }
.tcard:hover { transform: translateY(-4px); }
.tcard .cap { display: block; margin-top: 9px; font-size: 14px; font-weight: 600; }
.tcard .cap small { display: block; margin-top: 2px; color: var(--muted); font: 12px var(--mono); font-weight: 400; }
.cards.waiting .tcard.want .mcard { box-shadow: 0 0 0 2px #fff, 0 0 40px rgba(255, 255, 255, .25); }
.cards.waiting .tcard:not(.want) { opacity: .45; }
.tcard.tapped { animation: tapped .55s ease; }
@keyframes tapped { 40% { transform: translate(-18px, -10px) rotate(-6deg) scale(.96); } }
.steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: s; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.steps li::before { content: "0" counter(s); font: 600 12px/1.8 var(--mono); color: #48484a; }
.steps b { color: var(--ink); font-weight: 600; }
.ghost { margin-top: 18px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; border-radius: 999px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; }
.ghost:hover { background: rgba(255, 255, 255, .08); }

/* ---------- two more apps ---------- */
.pair { max-width: 1240px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 44px) 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.app2 { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 26px; border-radius: 26px; border: 1px solid var(--line); background: var(--panel); }
.app2 .iphone { --pw: min(260px, 70vw); }
.app2 h3 { margin: 10px 0 8px; font-size: 22px; }
.app2 p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.app2 ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.simbtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; border: 1px dashed rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; }
.simbtn::before { content: "SIMULATED TAP"; font: 700 9.5px var(--mono); letter-spacing: .1em; padding: 3px 6px; border-radius: 4px; background: #fff; color: #000; }
.simbtn.want { border-style: solid; border-color: #fff; box-shadow: 0 0 24px rgba(255, 255, 255, .2); }

/* ---------- Card Studio: a MacBook that opens as you scroll ---------- */
.stage { position: relative; height: 260vh; }
.sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 0 8px 74px; }
.glow { position: absolute; inset: auto 0 0 0; height: 70vh; pointer-events: none; opacity: var(--glow, 0); background: radial-gradient(50% 60% at 50% 72%, rgba(255, 255, 255, .12), transparent 70%); }
.mac { position: relative; width: min(1500px, 100%, calc((100vh - 110px) * 1.6)); container-type: inline-size; transform: translateY(calc((1 - var(--p, 0)) * 6vh)) scale(calc(.94 + var(--p, 0) * .06)); }
.mac::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -3.5cqw; height: 5cqw; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .9), transparent); filter: blur(6px); }
.hinge { perspective: 2600px; perspective-origin: 50% 120%; }
.lid { position: relative; margin: 0 6.2%; padding: 1.25cqw 1.25cqw 1.9cqw; border-radius: 2.6cqw 2.6cqw .8cqw .8cqw; background: #050506;
  box-shadow: inset 0 0 0 .18cqw #2c2e33, inset 0 0 0 .35cqw #0b0b0d, 0 0 0 .12cqw #54575e, 0 40px 90px rgba(0, 0, 0, .6); transform-origin: 50% 100%; transform: rotateX(var(--lid, -88deg)); will-change: transform; }
.lid::before { content: ""; position: absolute; top: 1.2cqw; left: 50%; width: 10%; height: 2.3cqw; transform: translateX(-50%); z-index: 4; border-radius: 0 0 .9cqw .9cqw; background: #050506; }
.mscreen { position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1.3cqw 1.3cqw 0 0; background: #000; }
.menubar { flex: none; display: flex; justify-content: space-between; align-items: center; height: 2.4cqw; padding: 0 1.6cqw 0 1.4cqw; background: #0b0c0e; color: #e6e8eb; font: 600 1.05cqw/1 var(--sans); }
.menubar .l, .menubar .r { display: flex; align-items: center; gap: 1.5cqw; }
.menubar .l span:nth-child(n+3) { font-weight: 400; opacity: .85; }
.menubar .tag { font-weight: 700; font-size: .85cqw; letter-spacing: .08em; color: #000; background: #fff; border-radius: 999px; padding: .32cqw .75cqw; }
.base { position: relative; height: 2.3cqw; border-radius: .3cqw .3cqw 2cqw 2cqw / .3cqw .3cqw 1.8cqw 1.8cqw;
  background: linear-gradient(180deg, #d9dce1 0%, #c3c7cd 22%, #a9aeb6 55%, #7d828a 82%, #50545b 100%); box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .8), inset 0 -.2cqw .3cqw rgba(0, 0, 0, .35); }
.base::before { content: ""; position: absolute; left: 6.2%; right: 6.2%; top: -.55cqw; height: .55cqw; border-radius: .3cqw .3cqw 0 0; background: linear-gradient(#2a2c30, #6b6f76); }
.base i { position: absolute; left: 50%; top: 0; width: 15%; height: 45%; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: linear-gradient(180deg, #8d9199, #b7bbc2); }
.mac .vp iframe { pointer-events: none; }
.mac.open .vp iframe { pointer-events: auto; }
.controls { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 0 16px;
  opacity: var(--ctl, 0); transform: translateY(calc((1 - var(--ctl, 0)) * 10px)); pointer-events: none; }
.controls.on { pointer-events: auto; }
.controls button { font-weight: 600; font-size: 14px; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 10px 18px; }
.controls button.primary { background: #fff; color: #000; border-color: #fff; }
.controls .note { width: 100%; text-align: center; color: var(--muted); font-size: 12.5px; }
.controls .note b { color: var(--ink); }
.controls .small-only { display: none; }
.close { display: none; }
body.expanded { overflow: hidden; }
body.expanded .mac { position: fixed; inset: 0 0 58px 0; width: auto; transform: none; z-index: 60; }
body.expanded .mac::after, body.expanded .base, body.expanded .menubar, body.expanded .lid::before { display: none; }
body.expanded .hinge { perspective: none; height: 100%; }
body.expanded .lid { transform: none; margin: 0; padding: 0; height: 100%; border-radius: 0; box-shadow: none; }
body.expanded .mscreen { aspect-ratio: auto; height: 100%; border-radius: 0; }
body.expanded .controls { display: none; }
body.expanded .glow { display: none; }
body.expanded::after { content: ""; position: fixed; z-index: 59; left: 0; right: 0; bottom: 0; height: 58px; background: #000; border-top: 1px solid var(--line); }
body.expanded .close { display: inline-flex; position: fixed; z-index: 70; left: 50%; bottom: 10px; transform: translateX(-50%); font-weight: 600; font-size: 13px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25); background: #111; color: #fff; }

/* ---------- after ---------- */
.after { max-width: 1100px; margin: 0 auto; padding: 56px 16px 36px; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.after div { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--panel); }
.after h2 { margin: 0 0 6px; font-size: 16px; }
.after p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.foot { max-width: 1100px; margin: 0 auto; padding: 0 16px 80px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.foot b { color: var(--ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .pair { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; min-height: 0; padding-top: 100px; }
  .hero-card { order: -1; }
  .hero-card .waves { width: min(320px, 78vw); }
  .top nav { display: none; }
  .play { grid-template-columns: 1fr; justify-items: center; }
  .play .iphone { position: relative; top: 0; --pw: min(380px, 88vw); }
  .tray { width: 100%; max-width: 560px; }
}
@media (max-width: 720px) {
  .top { padding: 16px; }
  .app2 { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .app2 ul { text-align: left; }
  .stage { height: 200vh; }
  .controls .small-only { display: block; }
  .sticky { padding-bottom: 112px; }
  .after { grid-template-columns: 1fr; }
  .cards { gap: 12px; }
}
@media (max-width: 420px) {
  .brand { font-size: 12px; letter-spacing: .08em; gap: 8px; }
  .badge { font-size: 9.5px; padding: 5px 8px; }
  .tray { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card .mcard, .hero-card .waves > span, .wait.on i { animation: none; }
}