/* ============================================================
CastInk — design tokens
============================================================ */
:root{
--bg: #161618;
--bg-2: #101012;
--surface: #141416;
--surface-2: #1B1B1E;
--slate: #26262A;
--slate-2: #36363B;
--paper: #E8E4DA; /* warm e-ink paper */
--paper-2: #D8D2C4;
--ink: #D8A24A; /* warm orange-gold accent */
--ink-deep: #A96B1C; /* deeper orange-gold */
--gold: #E2B35E; /* bright gold-orange */
--gold-2: #C9892F;
--green: #05A66B; /* primary CTA */
--green-2: #04C079;
--text: #F4F1EA;
--text-2: #9C9A95;
--text-3: #6B6964;
--line: rgba(244,241,234,.08);
--line-2: rgba(244,241,234,.14);
--serif: "Instrument Serif", "Times New Roman", serif;
--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
--sans: "Inter", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* smooth anchor scrolling + room for the fixed nav (64px) when jumping to #sections.
The prefers-reduced-motion block below resets scroll-behavior to auto. */
html{scroll-behavior:smooth;scroll-padding-top:84px}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
/* subtle paper-grain noise — used inside e-ink screens */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,")}
.grain-dark{position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml;utf8,")}
/* ============================================================
Layout primitives
============================================================ */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.row{display:flex;gap:24px}
.col{display:flex;flex-direction:column;gap:24px}
/* eyebrow / kicker */
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);display:inline-flex;align-items:center;gap:10px}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(5,166,107,.6)}
.kicker .num{color:var(--ink);font-weight:500}
/* big serif display */
.display{font-family:var(--serif);font-weight:400;line-height:.96;letter-spacing:-.02em;font-size:clamp(48px,7.4vw,120px)}
.display .it{font-style:italic;color:var(--ink)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em;font-size:clamp(40px,5.5vw,84px)}
.h2 .it{font-style:italic;color:var(--ink)}
.h3{font-family:var(--serif);font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.01em}
.lead{font-size:19px;line-height:1.55;color:var(--text-2);max-width:56ch}
.small{font-family:var(--mono);font-size:12px;color:var(--text-3);letter-spacing:.04em}
/* ============================================================
Top nav
============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(14,15,17,.6);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;letter-spacing:-.01em;white-space:nowrap}
.logo-img{width:28px;height:28px;object-fit:contain;display:block}
.nav-links{display:flex;gap:24px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.nav-links a{white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0B0B0C;background:var(--green);border-radius:999px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.nav-cta:hover{transform:translateY(-1px);background:var(--green-2);box-shadow:0 8px 24px -8px rgba(5,166,107,.55)}
.nav-cta .arr{display:inline-block;transition:transform .2s ease}
.nav-cta:hover .arr{transform:translateX(2px)}
/* mobile hamburger */
.nav-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:rgba(20,20,22,.5);align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* mobile drop-down panel */
.mobile-menu{display:none;flex-direction:column;gap:6px;padding:18px 32px 24px;border-top:1px solid var(--line);background:rgba(11,11,12,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mobile-menu a{padding:14px 4px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a:hover,.mobile-menu a:active{color:var(--text)}
.mobile-menu .nav-cta{margin-top:10px;align-self:flex-start;color:#0B0B0C}
.mobile-menu[hidden]{display:none}
.nav.open .mobile-menu{display:flex}
@media (max-width:880px){
.nav-links,.nav-inner > .nav-cta{display:none}
.nav-toggle{display:flex}
}
/* ============================================================
Section frame
============================================================ */
section{position:relative;padding:140px 0;border-top:1px solid var(--line);background:var(--bg)}
section:first-of-type{border-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:64px;flex-wrap:wrap}
.sec-head .lead{margin-top:24px}
.sec-num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--text-3);text-transform:uppercase}
.minimal-head{max-width:760px;margin:0 auto;text-align:center}
.minimal-head .h2{margin-top:18px}
.minimal-head .lead{margin:26px auto 0}
/* ============================================================
1. HERO
============================================================ */
.hero{padding:160px 0 120px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:22px}}
@media (max-width:980px){
/* on mobile the device leads, then the copy follows below it */
.stage{order:-1;margin:0 auto}
.stage::before,.stage::after{display:none}
.stage .device-hero{width:100%}
}
.hero h1{margin-top:28px}
.hero h1 .line{display:block;overflow:hidden;white-space:nowrap}
.hero h1 .line span{display:inline-block;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .line:nth-child(2) span{animation-delay:.08s}
.hero h1 .line:nth-child(3) span{animation-delay:.16s}
@keyframes rise{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}
.hero-tag{margin-top:32px;max-width:42ch}
.hero-cta-row{margin-top:40px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn-gold{display:inline-flex;align-items:center;gap:12px;padding:18px 24px;background:var(--green);color:#0B0B0C;border:1px solid var(--green);border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;box-shadow:0 0 0 1px rgba(5,166,107,.4),0 12px 40px -12px rgba(5,166,107,.45)}
.btn-gold:hover{transform:translateY(-1px);background:#0B0B0C;color:var(--green);box-shadow:0 0 0 1px rgba(5,166,107,.7),0 18px 48px -10px rgba(5,166,107,.4)}
.btn-gold .arr{transition:transform .25s ease}
.btn-gold:hover .arr{transform:translateX(3px)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:18px 22px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);transition:border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--text-2);color:var(--text)}
.hero-meta{margin-top:48px;display:flex;gap:36px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase}
.hero-meta b{color:var(--ink);font-weight:500;display:block;font-family:var(--sans);font-size:22px;letter-spacing:-.01em;text-transform:none;margin-bottom:4px}
/* hero card stage */
.stage{position:relative;aspect-ratio: 4/5;perspective:1600px;min-height:620px}
.stage::before,.stage::after{display:none}
.stage::before{inset:8% 14%;border-color:var(--line)}
.stage::after{inset:18% 24%;border-style:dashed;border-color:rgba(232,228,218,.05)}
.stage .glow{position:absolute;inset:-10%;background:radial-gradient(50% 40% at 50% 55%,rgba(216,162,74,.20),transparent 70%);filter:blur(20px);pointer-events:none}
.hand{position:absolute;left:50%;top:62%;width:62%;transform:translateX(-50%);opacity:.55;pointer-events:none}
/* product device render (3D) — the card lives inside the real case */
.stage .device-hero{position:absolute;left:50%;top:50%;width:84%;
transform:translate(-50%,-50%);
filter:drop-shadow(0 44px 70px rgba(0,0,0,.55)) drop-shadow(0 18px 36px rgba(216,162,74,.12));
animation:floatDevice 8s ease-in-out infinite;will-change:transform}
/* the fanned hand reads wider than a single card; it's interactive
(hover on desktop, tap on mobile both trigger the e-ink refresh). Kill the
mobile tap-highlight / selection box so tapping doesn't flash blue. */
.stage .device-hero.fan{width:108%;cursor:pointer;
-webkit-tap-highlight-color:transparent;
-webkit-touch-callout:none;
-webkit-user-select:none;user-select:none}
/* two stacked layers: static plastic bodies (.dh-base, in flow → sizes the
wrapper) + the swappable e-ink art (.dh-art, overlaid pixel-for-pixel) */
.stage .device-hero img{display:block;width:100%;height:auto;
-webkit-user-drag:none;user-select:none;pointer-events:none}
.stage .device-hero .dh-art{position:absolute;inset:0;will-change:filter}
@keyframes floatDevice{
0%,100%{transform:translate(-50%,-50%)}
50%{transform:translate(-50%,calc(-50% - 16px))}
}
/* e-ink "refresh": discrete black/white flashes (steps, not a smooth fade),
confined to the ART layer — only the screens rewrite, the plastic bodies
stay put. app.js swaps the art at the dark peak; no fill-mode, so it
settles to the new art when it ends. */
@keyframes einkRefresh{
0% {filter:none}
9% {filter:invert(1) brightness(.58)}
20% {filter:brightness(.04)}
34% {filter:invert(1) brightness(.68)}
47% {filter:brightness(.04)}
62% {filter:invert(1) brightness(.6)}
78% {filter:brightness(.4)}
100%{filter:none}
}
.stage .device-hero .dh-art.eink-refresh{animation:einkRefresh .6s steps(1,end)}
@media (prefers-reduced-motion:reduce){
.stage .device-hero .dh-art.eink-refresh{animation:none}
}
/* e-ink card — the canonical card visual */
.card{
position:relative;
width:62%;
aspect-ratio: 5/7;
border-radius:18px;
background:var(--paper);
box-shadow:
0 1px 0 rgba(255,255,255,.04) inset,
0 0 0 1px rgba(0,0,0,.4),
0 30px 60px -20px rgba(0,0,0,.7),
0 60px 120px -30px rgba(216,162,74,.20);
color:#1a1a1a;
overflow:hidden;
transform-style:preserve-3d;
}
.card.float{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateZ(-6deg) rotateY(8deg) rotateX(4deg);animation:floatcard 8s ease-in-out infinite}
@keyframes floatcard{0%,100%{transform:translate(-50%,-52%) rotateZ(-6deg) rotateY(8deg) rotateX(4deg)}50%{transform:translate(-50%,-48%) rotateZ(-4deg) rotateY(10deg) rotateX(2deg)}}
.card-inner{position:relative;width:100%;height:100%;padding:18px;display:flex;flex-direction:column}
.card .grain{opacity:.7}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#3d3d3d;text-transform:uppercase}
.card-art{flex:1;display:grid;place-items:center;margin:8px 0}
.card-name{font-family:var(--serif);font-size:clamp(20px,3.4vw,34px);line-height:1;color:#1a1a1a}
.card-name .it{font-style:italic;color:var(--ink-deep)}
.card-bot{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#3d3d3d;text-transform:uppercase}
.card-corner{position:absolute;width:22px;height:22px;border:1px solid #2a2a2a;border-radius:6px;display:grid;place-items:center;font-family:var(--serif);font-size:14px;color:#1a1a1a}
.card-corner.tl{top:14px;left:14px}
.card-corner.br{bottom:14px;right:14px;transform:rotate(180deg)}
.card.card-showcase{width:48%;aspect-ratio:128 / 296;border-radius:24px;background:var(--paper);box-shadow:
0 1px 0 rgba(255,255,255,.04) inset,
0 0 0 1px rgba(0,0,0,.38),
0 30px 60px -20px rgba(0,0,0,.72),
0 60px 120px -30px rgba(216,162,74,.20)}
.card-showcase .card-full-img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04)}
.card.card-showcase::before,
.card::before,
.vcard::before,
.frozen-card::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.44;mix-blend-mode:multiply;
background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.03) 2px 3px);
}
.card-showcase .card-full-img{position:absolute;inset:0;z-index:1}
.card .grain,.vcard .grain,.frozen-card .grain{z-index:6}
/* ============================================================
Medieval-fantasy woodcut SVG illustrations — pure B/W for e-ink
============================================================ */
.art-svg{width:78%;aspect-ratio:1;display:block;color:#0a0a0a}
.art-svg svg{width:100%;height:100%;display:block}
.art-svg svg *{vector-effect:non-scaling-stroke}
/* hero rune kept for backwards-compat but unused */
.art-rune{width:64%;aspect-ratio:1;position:relative}
/* scan refresh line — the e-ink "flash" sweep */
.scan{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(26,26,26,.85) 50%,transparent);mix-blend-mode:multiply;animation:scan 6s ease-in-out infinite;animation-delay:2s;pointer-events:none}
@keyframes scan{
0%,18%{transform:translateY(0);opacity:0}
20%{transform:translateY(0);opacity:1}
32%{transform:translateY(440%);opacity:1}
34%,100%{transform:translateY(440%);opacity:0}
}
.card.invert{position:relative}
.card .invert-flash{position:absolute;inset:0;background:#1a1a1a;mix-blend-mode:difference;opacity:0;animation:flash 6s ease-in-out infinite;animation-delay:2s;pointer-events:none}
@keyframes flash{0%,18%,34%,100%{opacity:0}20%,32%{opacity:1}}
/* hero side ticker */
.ticker{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:rgba(19,21,24,.4)}
/* two identical spans, each with a trailing 48px pad, so the -50% loop
point lands exactly on the copy — no half-gap jump at the seam */
.ticker-track{display:flex;padding:14px 0;animation:ticker 30s linear infinite;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.ticker-track span{display:inline-flex;gap:48px;padding-right:48px}
.ticker-track b{color:var(--ink);font-weight:400}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ============================================================
2. PROBLEMA — split paper / digital
============================================================ */
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}
.problem-cell{padding:56px 48px;min-height:480px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.problem-cell + .problem-cell{border-left:1px solid var(--line)}
.problem-cell .label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.problem-cell h3{font-family:var(--serif);font-size:clamp(32px,3.6vw,52px);line-height:1.05;letter-spacing:-.01em;margin-top:18px;max-width:18ch}
.problem-cell .visual{flex:1;display:grid;place-items:center;margin:32px 0}
.problem-cell.left .visual{filter:saturate(0)}
/* Cartas reales del deck: 2.9 pulgadas · 128×296 px */
.problem-card,
.frozen-card,
.digital-card{
width:min(58%,190px);
aspect-ratio:128 / 296;
background:var(--paper);
border-radius:14px;
position:relative;
overflow:hidden;
isolation:isolate;
box-shadow:
0 1px 0 rgba(255,255,255,.08) inset,
0 0 0 1px rgba(0,0,0,.55),
0 24px 54px -18px rgba(0,0,0,.72);
}
.problem-card img,
.frozen-card img,
.digital-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.frozen-card .grain,
.digital-card .grain{z-index:6;opacity:.55}
.card-chip{
position:absolute;left:50%;bottom:8px;z-index:9;transform:translateX(-50%);
padding:5px 8px;border:1px solid rgba(10,10,10,.25);border-radius:999px;
background:rgba(232,228,218,.82);color:#111;font-family:var(--mono);
font-size:8px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
box-shadow:0 6px 18px -10px rgba(0,0,0,.7);
}
.frozen-card::after{
content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 28%,transparent 70%,rgba(0,0,0,.08));
}
.digital-card{border:1px solid rgba(216,162,74,.35);box-shadow:0 0 60px -12px rgba(216,162,74,.32),0 30px 60px -20px rgba(0,0,0,.72)}
.digital-card .card-cycle{position:absolute;inset:0;z-index:1}
.digital-card .card-cycle img{opacity:0;animation:eInkCycle 16s steps(1,end) infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes eInkCycle{0%,12.49%{opacity:1}12.5%,100%{opacity:0}}
.digital-card::before{
content:"";position:absolute;inset:0;z-index:7;pointer-events:none;mix-blend-mode:multiply;
background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.035) 2px 3px);
}
.digital-card .refresh-flash{
position:absolute;inset:0;z-index:8;background:#0a0a0a;mix-blend-mode:difference;opacity:0;
animation:eInkFlash 2s ease-in-out infinite;pointer-events:none;
}
.digital-card .refresh-scan{
position:absolute;left:0;right:0;top:-32%;height:32%;z-index:9;
background:linear-gradient(180deg,transparent,rgba(10,10,10,.75),transparent);
mix-blend-mode:multiply;opacity:0;animation:eInkScan 2s ease-in-out infinite;pointer-events:none;
}
@keyframes eInkFlash{0%,69%,100%{opacity:0}72%,82%{opacity:.72}88%{opacity:0}}
@keyframes eInkScan{0%,68%{transform:translateY(0);opacity:0}72%{opacity:1}88%{transform:translateY(420%);opacity:1}92%,100%{transform:translateY(420%);opacity:0}}
.digital-card .card-chip{background:rgba(11,11,12,.78);border-color:rgba(216,162,74,.42);color:var(--ink)}
.vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);z-index:2}
@media (max-width:880px){.vs{display:none}}
.problem-resolve{margin-top:64px;text-align:center}
.problem-resolve .h2{max-width:18ch;margin:0 auto}
.problem-resolve .h2 .underline{position:relative;display:inline-block}
.problem-resolve .h2 .underline::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:1px;background:var(--ink)}
/* ============================================================
3. CÓMO FUNCIONA — 3 steps
============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:880px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:32px;border:1px solid var(--line);border-radius:20px;background:var(--surface);min-height:420px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .3s,transform .3s}
.step:hover{border-color:var(--line-2);transform:translateY(-2px)}
.step .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink);text-transform:uppercase}
.step h4{font-family:var(--serif);font-size:32px;line-height:1.05;letter-spacing:-.01em;margin-top:18px}
.step h4 .it{font-style:italic;color:var(--ink)}
.step p{margin-top:14px;color:var(--text-2);font-size:15px;line-height:1.55;max-width:30ch}
.step .visual{margin-top:28px;height:160px;border:1px solid var(--line);border-radius:12px;position:relative;overflow:hidden;background:var(--bg-2)}
/* Step 01 — fan of cards, images fade in on scroll (e-ink rewrite) */
.v-deck{display:flex;justify-content:center;align-items:center;height:100%;position:relative}
.v-deck .mini{width:36px;aspect-ratio:128/296;background:var(--paper);border-radius:5px;box-shadow:0 6px 14px -4px rgba(0,0,0,.6);position:relative;border:1px solid rgba(0,0,0,.2);overflow:hidden}
.v-deck .mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);opacity:0;transition:opacity .55s ease}
.step.in .v-deck .mini img{opacity:1}
.step.in .v-deck .mini:nth-child(1) img{transition-delay:.05s}
.step.in .v-deck .mini:nth-child(2) img{transition-delay:.15s}
.step.in .v-deck .mini:nth-child(3) img{transition-delay:.25s}
.step.in .v-deck .mini:nth-child(4) img{transition-delay:.35s}
.step.in .v-deck .mini:nth-child(5) img{transition-delay:.45s}
.v-deck .mini::after{content:"";position:absolute;inset:0;background:#0a0a0a;mix-blend-mode:difference;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}
.step.in .v-deck .mini::after{animation:miniFlash .9s ease-in-out forwards}
.step.in .v-deck .mini:nth-child(2)::after{animation-delay:.1s}
.step.in .v-deck .mini:nth-child(3)::after{animation-delay:.2s}
.step.in .v-deck .mini:nth-child(4)::after{animation-delay:.3s}
.step.in .v-deck .mini:nth-child(5)::after{animation-delay:.4s}
@keyframes miniFlash{0%,30%{opacity:0}45%,55%{opacity:.55}70%,100%{opacity:0}}
.v-deck .mini:nth-child(1){transform:translateX(28px) rotate(-12deg)}
.v-deck .mini:nth-child(2){transform:translateX(12px) rotate(-4deg);z-index:2}
.v-deck .mini:nth-child(3){transform:translateX(-2px) rotate(2deg);z-index:3}
.v-deck .mini:nth-child(4){transform:translateX(-16px) rotate(8deg);z-index:2}
.v-deck .mini:nth-child(5){transform:translateX(-32px) rotate(14deg)}
/* Step 02 — app-store style game list */
.v-app{padding:10px 10px 8px;height:100%;display:flex;flex-direction:column;gap:6px;background:#0f1115;border-radius:8px;overflow:hidden}
.v-app .va-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px 6px;border-bottom:1px solid var(--line)}
.v-app .va-title{font-family:var(--serif);font-size:13px;color:var(--text);letter-spacing:-.01em}
.v-app .va-sub{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.v-app .va-list{display:flex;flex-direction:column;gap:3px;flex:1;justify-content:center}
.v-app .va-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;transition:background .2s}
.v-app .va-row.on{background:rgba(216,162,74,.10)}
.v-app .va-icon{width:26px;height:26px;border-radius:5px;overflow:hidden;background:var(--paper);position:relative;flex-shrink:0;box-shadow:0 2px 6px -2px rgba(0,0,0,.5)}
.v-app .va-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.v-app .va-icon.va-icon-logo{background:#11141a;border:1px solid var(--line)}
.v-app .va-icon.va-icon-logo img{object-fit:contain;filter:none;padding:2px}
.v-app .va-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1;overflow:hidden}
.v-app .va-meta b{font-family:var(--sans);font-size:10px;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-app .va-meta span{font-family:var(--mono);font-size:7px;letter-spacing:.04em;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-app .va-get{font-family:var(--mono);font-size:8px;letter-spacing:.1em;padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-2);font-style:normal;flex-shrink:0}
.v-app .va-row.on .va-get{background:var(--ink);color:#0B0B0C;border-color:var(--ink)}
/* Step 03 — phone hovers, NFC arcs, cards rewrite */
.v-sync{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden}
.v-sync .nfc-phone{position:relative;width:54px;height:84px;background:#0a0a0c;border-radius:10px;border:1px solid #2a2a2a;flex-shrink:0;margin-right:14px;box-shadow:0 8px 20px -8px rgba(216,162,74,.35);z-index:3}
.v-sync .nfc-phone::before{content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);width:18px;height:3px;background:#000;border-radius:2px;z-index:2}
.v-sync .nfc-phone::after{content:"NFC";position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--mono);font-size:7px;letter-spacing:.18em;color:var(--ink);text-transform:uppercase;z-index:2}
.v-sync .nfc-screen{position:absolute;inset:9px 4px 18px;border-radius:4px;background:radial-gradient(circle at 50% 35%,rgba(216,162,74,.18),#0a0d12);overflow:hidden}
.v-sync .nfc-screen::before,.v-sync .nfc-screen::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border:1px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%);animation:nfcPulse 1.6s ease-out infinite}
.v-sync .nfc-screen::after{animation-delay:.8s}
@keyframes nfcPulse{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
.v-sync .nfc-arcs{position:relative;width:30px;height:50px;pointer-events:none;flex-shrink:0;margin-right:6px}
.v-sync .nfc-arcs span{position:absolute;left:0;top:50%;border:1.4px solid var(--ink);border-color:transparent var(--ink) transparent transparent;border-radius:0 100% 100% 0/0 50% 50% 0;transform:translateY(-50%);opacity:0;animation:nfcWave 1.6s ease-out infinite}
.v-sync .nfc-arcs span:nth-child(1){width:8px;height:16px;animation-delay:0s}
.v-sync .nfc-arcs span:nth-child(2){width:14px;height:26px;left:4px;animation-delay:.25s}
.v-sync .nfc-arcs span:nth-child(3){width:20px;height:38px;left:8px;animation-delay:.5s}
@keyframes nfcWave{0%{opacity:0;transform:translateY(-50%) scale(.7)}30%{opacity:1}100%{opacity:0;transform:translateY(-50%) scale(1.4)}}
.v-sync .nfc-deck{display:flex;align-items:center;justify-content:flex-start;gap:4px;position:relative;z-index:1}
.v-sync .nfc-card{width:28px;aspect-ratio:128/296;background:var(--paper);border-radius:4px;position:relative;overflow:hidden;box-shadow:0 4px 10px -3px rgba(0,0,0,.6);border:1px solid rgba(0,0,0,.18);flex-shrink:0}
.v-sync .nfc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);opacity:0;animation:nfcSwap 4.8s steps(1,end) infinite}
.v-sync .nfc-card:nth-child(1){transform:rotate(-8deg) translateY(2px)}
.v-sync .nfc-card:nth-child(2){transform:rotate(-1deg);z-index:2}
.v-sync .nfc-card:nth-child(3){transform:rotate(7deg) translateY(2px)}
.v-sync .nfc-card img:nth-child(1){animation-delay:0s}
.v-sync .nfc-card img:nth-child(2){animation-delay:1.6s}
.v-sync .nfc-card img:nth-child(3){animation-delay:3.2s}
@keyframes nfcSwap{0%,33%{opacity:1}33.01%,100%{opacity:0}}
.v-sync .nfc-card::after{content:"";position:absolute;inset:0;background:#0a0a0a;mix-blend-mode:difference;opacity:0;animation:nfcFlashS 1.6s ease-in-out infinite;pointer-events:none}
.v-sync .nfc-card:nth-child(2)::after{animation-delay:.08s}
.v-sync .nfc-card:nth-child(3)::after{animation-delay:.16s}
@keyframes nfcFlashS{0%,88%,100%{opacity:0}92%{opacity:.6}96%{opacity:0}}
.v-sync .nfc-label{position:absolute;left:14px;bottom:8px;font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--ink);text-transform:uppercase}
.v-sync .nfc-label::before{content:"";display:inline-block;width:5px;height:5px;background:var(--ink);border-radius:50%;box-shadow:0 0 8px var(--ink);margin-right:6px;vertical-align:middle}
.how-points{
max-width:1080px;margin:72px auto 0;
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.how-point{padding:34px 32px 38px;border-right:1px solid var(--line)}
.how-point:last-child{border-right:0}
.how-num{
display:block;margin-bottom:42px;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink);
}
.how-point h3{font-family:var(--serif);font-size:clamp(28px,2.7vw,38px);font-weight:400;line-height:1.05;letter-spacing:-.01em}
.how-point p{max-width:28ch;margin-top:16px;font-size:15px;line-height:1.55;color:var(--text-2)}
/* ============================================================
4. LA VARITA
============================================================ */
.varita{overflow-x:clip}
.varita .varita-vis{width:min(620px,100%);margin:64px auto 0}
.nfc-modes{
max-width:620px;margin:24px auto 0;padding-top:20px;border-top:1px solid var(--line);
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--text-3);
}
@media (max-width:680px){
.minimal-head .lead{margin-top:20px}
.how-points{margin-top:48px;grid-template-columns:1fr}
.how-point{padding:26px 0 28px;border-right:0;border-bottom:1px solid var(--line)}
.how-point:last-child{border-bottom:0}
.how-num{margin-bottom:18px}
.how-point h3{font-size:28px}
.how-point p{margin-top:10px;font-size:14px}
.varita .varita-vis{margin-top:48px}
.nfc-modes{grid-template-columns:repeat(2,1fr);row-gap:18px}
}
/* ============================================================
The Wand — phone slides over card, NFC triggers transform
============================================================ */
.varita-vis{position:relative;aspect-ratio:1/1;perspective:1600px}
.varita-vis .vcard{position:absolute;left:16%;top:2%;width:38%;aspect-ratio:128 / 296;background:var(--paper);border-radius:18px;transform:rotateZ(-6deg) rotateX(14deg) rotateY(-4deg);box-shadow:0 40px 80px -20px rgba(0,0,0,.7);overflow:hidden}
.varita-vis .phone{position:absolute;width:38%;aspect-ratio:9/19;background:linear-gradient(145deg,#333338 0%,#111114 15%,#070708 72%,#29292e 100%);border-radius:34px;border:1px solid #414147;box-shadow:0 60px 100px -20px rgba(216,162,74,.18),0 0 0 1px rgba(244,241,234,.05),inset 1px 1px 0 rgba(255,255,255,.08),inset -1px -1px 0 rgba(0,0,0,.8);overflow:visible;padding:7px;z-index:5;
animation:phoneSweep 7s ease-in-out infinite}
.varita-vis .phone::before,
.varita-vis .phone::after{
content:"";
position:absolute;
display:block;
background:linear-gradient(180deg,#4a4a50,#17171a 28%,#0b0b0d 78%,#343439);
border:1px solid #38383e;
box-shadow:0 1px 2px rgba(0,0,0,.8);
}
.varita-vis .phone::before{
left:-4px;
top:23%;
width:3px;
height:7%;
border-radius:2px 0 0 2px;
box-shadow:0 clamp(24px,4vw,44px) 0 #202024;
}
.varita-vis .phone::after{
right:-4px;
top:31%;
width:3px;
height:13%;
border-radius:0 2px 2px 0;
}
@keyframes phoneSweep{
0%{right:-8%;top:-2%;transform:rotateZ(14deg) rotateX(6deg) rotateY(-6deg);opacity:.95}
35%{right:18%;top:22%;transform:rotateZ(6deg) rotateX(8deg) rotateY(-4deg);opacity:1}
50%,62%{right:24%;top:30%;transform:rotateZ(2deg) rotateX(8deg) rotateY(-3deg);opacity:1}
85%{right:48%;top:46%;transform:rotateZ(-6deg) rotateX(8deg) rotateY(-2deg);opacity:.95}
100%{right:62%;top:60%;transform:rotateZ(-12deg) rotateX(6deg) rotateY(0);opacity:0}
}
.varita-vis .phone .screen{width:100%;height:100%;background:radial-gradient(circle at 50% 30%,#1a2330,#0a0d12);border-radius:28px;position:relative;overflow:hidden;border:1px solid #1a1a1a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -18px 28px rgba(0,0,0,.22)}
.varita-vis .phone .screen::before{
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:linear-gradient(118deg,rgba(255,255,255,.055),transparent 18%,transparent 76%,rgba(255,255,255,.018));
}
.varita-vis .phone .screen::after{
content:"";
position:absolute;
z-index:5;
left:50%;
bottom:7px;
width:27%;
height:3px;
transform:translateX(-50%);
border-radius:999px;
background:rgba(244,241,234,.48);
box-shadow:0 0 7px rgba(244,241,234,.08);
}
.varita-vis .phone .notch{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:50px;height:12px;background:#000;border-radius:8px;z-index:3}
.varita-vis .phone .notch::before{
content:"";
position:absolute;
left:22%;
top:50%;
width:36%;
height:2px;
transform:translateY(-50%);
border-radius:2px;
background:#19191d;
box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.varita-vis .phone .notch::after{
content:"";
position:absolute;
right:14%;
top:50%;
width:4px;
height:4px;
transform:translateY(-50%);
border-radius:50%;
background:radial-gradient(circle at 35% 35%,#29405b,#07101b 58%,#000 72%);
box-shadow:0 0 3px rgba(53,92,132,.45);
}
/* pantalla del móvil: mini UI real de la app (misma gramática visual que el
mockup de la sección 01) — la escritura avanza en sincronía con el barrido */
.varita-vis .p-ui{position:absolute;inset:26px 10px 44px;display:flex;flex-direction:column;gap:9px;z-index:2}
.varita-vis .p-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.varita-vis .p-live{color:var(--green)}
.varita-vis .p-card{display:flex;align-items:center;gap:8px;padding:7px 8px;background:rgba(216,162,74,.08);border:1px solid rgba(216,162,74,.22);border-radius:8px}
.varita-vis .p-thumb{width:18px;aspect-ratio:128/296;border-radius:3px;overflow:hidden;background:var(--paper);flex-shrink:0;position:relative}
.varita-vis .p-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.varita-vis .p-meta{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.1}
.varita-vis .p-meta b{font-family:var(--sans);font-size:10px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.varita-vis .p-meta i{font-family:var(--mono);font-size:7px;letter-spacing:.08em;color:var(--text-3);font-style:normal;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.varita-vis .p-prog{height:3px;background:var(--slate);border-radius:99px;overflow:hidden}
.varita-vis .p-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ink-deep),var(--ink));border-radius:99px;animation:pFill 7s linear infinite}
@keyframes pFill{0%,44%{width:0}58%{width:100%}90%{width:100%}94%,100%{width:0}}
.varita-vis .p-states{position:relative;height:12px;font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.varita-vis .st{position:absolute;inset:0;opacity:0;white-space:nowrap}
.varita-vis .st.a{opacity:1;color:var(--text-2);animation:stA 7s steps(1,end) infinite}
.varita-vis .st.b{color:var(--ink);animation:stB 7s steps(1,end) infinite}
.varita-vis .st.c{color:var(--green);animation:stC 7s steps(1,end) infinite}
@keyframes stA{0%,44%{opacity:1}44.01%,96%{opacity:0}96.01%,100%{opacity:1}}
@keyframes stB{0%,44%{opacity:0}44.01%,58%{opacity:1}58.01%,100%{opacity:0}}
@keyframes stC{0%,58%{opacity:0}58.01%,96%{opacity:1}96.01%,100%{opacity:0}}
/* The phone mirrors the real app's full-screen NfcVortex while writing. */
.varita-vis .phone .screen{
background:
radial-gradient(circle at 50% 45%,rgba(216,162,74,.11),transparent 38%),
#0b0b0c;
}
.varita-vis .p-ui,
.varita-vis .phone .label{
display:none;
}
.varita-vis .nfc-vortex-demo{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:rgba(11,11,12,.72);
}
.nfc-vortex-art{
position:absolute;
left:50%;
top:45%;
width:88%;
overflow:visible;
transform:translate(-50%,-50%);
filter:drop-shadow(0 0 12px rgba(216,162,74,.22));
}
.nfc-vortex-guide,
.nfc-vortex-counter,
.nfc-vortex-main,
.nfc-vortex-core{
transform-box:view-box;
transform-origin:100px 100px;
}
.nfc-vortex-guide{animation:nfcVortexGuide 24s linear infinite}
.nfc-vortex-counter{animation:nfcVortexCounter 7s linear infinite}
.nfc-vortex-main{animation:nfcVortexMain 7s linear infinite}
.nfc-vortex-logo-glow{opacity:.2;filter:blur(3px)}
.nfc-vortex-core{animation:nfcVortexCore 1.4s ease-in-out infinite}
@keyframes nfcVortexGuide{
to{transform:rotate(-360deg)}
}
@keyframes nfcVortexMain{
0%{transform:rotate(0deg)}
35%{transform:rotate(171deg)}
68%{transform:rotate(650deg)}
92%{transform:rotate(1500deg)}
100%{transform:rotate(1800deg)}
}
@keyframes nfcVortexCounter{
0%{transform:rotate(0deg)}
35%{transform:rotate(-103deg)}
68%{transform:rotate(-390deg)}
92%{transform:rotate(-900deg)}
100%{transform:rotate(-1080deg)}
}
@keyframes nfcVortexCore{
0%,100%{opacity:.72;transform:scale(1)}
50%{opacity:1;transform:scale(1.17)}
}
.nfc-vortex-messages{
position:absolute;
left:8px;
right:8px;
bottom:11%;
height:26px;
font-family:var(--sans);
font-size:8px;
font-weight:500;
line-height:1.35;
text-align:center;
color:var(--text);
}
.nfc-vortex-messages span{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
}
.nfc-vortex-messages .approach{animation:nfcVortexApproach 7s steps(1,end) infinite}
.nfc-vortex-messages .casting{animation:nfcVortexCasting 7s steps(1,end) infinite}
.nfc-vortex-messages .settling{animation:nfcVortexSettling 7s steps(1,end) infinite;color:var(--ink)}
.nfc-vortex-messages .updated{animation:nfcVortexUpdated 7s steps(1,end) infinite;color:var(--green)}
@keyframes nfcVortexApproach{0%,34.99%{opacity:1}35%,100%{opacity:0}}
@keyframes nfcVortexCasting{0%,34.99%{opacity:0}35%,79.99%{opacity:1}80%,100%{opacity:0}}
@keyframes nfcVortexSettling{0%,79.99%{opacity:0}80%,91.99%{opacity:1}92%,100%{opacity:0}}
@keyframes nfcVortexUpdated{0%,91.99%{opacity:0}92%,100%{opacity:1}}
.varita-vis .phone .label{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ink);text-transform:uppercase}
.varita-vis .phone .label::before{content:"";display:block;margin:0 auto 6px;width:5px;height:5px;background:var(--ink);border-radius:50%;box-shadow:0 0 12px var(--ink)}
/* card content with two states (orc → frog) */
.vcard .vc-stage{position:relative;width:100%;height:100%;padding:0;display:block;color:#0a0a0a}
.vc-frame{position:absolute;inset:0;animation:vSwap 7s steps(1,end) infinite;opacity:0;color:#0a0a0a}
.vc-frame:nth-child(1){animation-delay:0s}
.vc-frame:nth-child(2){animation-delay:3.5s}
@keyframes vSwap{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.vc-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
/* refresco e-ink real: el panel invierte la imagen varias veces (parpadeos
duros, sin fundido) antes de asentar la imagen nueva en el 50% del ciclo */
.vcard .nfc-flash{position:absolute;inset:0;background:#fff;mix-blend-mode:difference;opacity:0;animation:nfcFlash 7s steps(1,end) infinite;pointer-events:none}
@keyframes nfcFlash{0%,45.5%{opacity:0}46%{opacity:1}47%{opacity:0}48%{opacity:1}49%{opacity:0}50%{opacity:1}51.5%,100%{opacity:0}}
/* NFC card as the real 3D device — orc render flickers (e-ink refresh) into
the frog render; no extra tilt/frame (both are baked into the render) */
.varita-vis .vcard.device-card{left:10%;top:0;width:48%;aspect-ratio:565 / 905;
background:none;border-radius:0;box-shadow:none;overflow:visible;transform:none}
.device-card::before{display:none}
.device-card .dev-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
filter:drop-shadow(0 34px 56px rgba(0,0,0,.55))}
.device-card .dev-orc{animation:devOrc 7s linear infinite}
.device-card .dev-frog{animation:devFrog 7s linear infinite}
@keyframes devOrc{0%,44%{opacity:1}45%{opacity:0}46%{opacity:1}47%{opacity:0}48%{opacity:1}49%{opacity:0}50%,100%{opacity:0}}
@keyframes devFrog{0%,44%{opacity:0}45%{opacity:1}46%{opacity:0}47%{opacity:1}48%{opacity:0}49%{opacity:1}50%,100%{opacity:1}}
.pixel-fog{position:absolute;inset:-8%;pointer-events:none;z-index:8;opacity:0;animation:fogBurst 7s ease-in-out infinite}
@keyframes fogBurst{0%,38%{opacity:0}42%,66%{opacity:1}76%,100%{opacity:0}}
.pixel-fog .fog{position:absolute;width:12px;height:12px;background:rgba(10,10,10,.34);image-rendering:pixelated;opacity:0;filter:drop-shadow(0 0 10px rgba(216,162,74,.2));}
.pixel-fog .fog::after{content:"";position:absolute;inset:0;background:rgba(216,162,74,.24)}
.pixel-fog .fog.a{left:16%;top:28%;box-shadow:
10px 0 rgba(10,10,10,.32),20px 0 rgba(10,10,10,.32),30px 10px rgba(10,10,10,.32),40px 10px rgba(10,10,10,.32),50px 20px rgba(10,10,10,.32),60px 20px rgba(10,10,10,.32),
0 10px rgba(10,10,10,.32),10px 10px rgba(10,10,10,.32),20px 10px rgba(10,10,10,.32),30px 20px rgba(10,10,10,.32),40px 20px rgba(10,10,10,.32),50px 30px rgba(10,10,10,.32),
10px 20px rgba(10,10,10,.32),20px 20px rgba(10,10,10,.32),30px 30px rgba(10,10,10,.32),40px 30px rgba(10,10,10,.32),50px 40px rgba(10,10,10,.32),60px 40px rgba(10,10,10,.32),
20px 30px rgba(10,10,10,.32),30px 40px rgba(10,10,10,.32),40px 40px rgba(10,10,10,.32),50px 50px rgba(10,10,10,.32),30px 50px rgba(10,10,10,.32),40px 50px rgba(10,10,10,.32);
animation:fogA 7s steps(6,end) infinite}
.pixel-fog .fog.b{left:46%;top:24%;box-shadow:
10px 0 rgba(10,10,10,.30),20px 0 rgba(10,10,10,.30),30px 0 rgba(10,10,10,.30),40px 10px rgba(10,10,10,.30),50px 10px rgba(10,10,10,.30),
0 10px rgba(10,10,10,.30),10px 10px rgba(10,10,10,.30),20px 20px rgba(10,10,10,.30),30px 20px rgba(10,10,10,.30),40px 20px rgba(10,10,10,.30),50px 30px rgba(10,10,10,.30),
10px 20px rgba(10,10,10,.30),20px 30px rgba(10,10,10,.30),30px 30px rgba(10,10,10,.30),40px 40px rgba(10,10,10,.30),50px 40px rgba(10,10,10,.30),
0 30px rgba(10,10,10,.30),10px 40px rgba(10,10,10,.30),20px 40px rgba(10,10,10,.30),30px 50px rgba(10,10,10,.30),40px 50px rgba(10,10,10,.30);
animation:fogB 7s steps(6,end) infinite}
.pixel-fog .fog.c{left:30%;top:50%;box-shadow:
10px 0 rgba(10,10,10,.28),20px 10px rgba(10,10,10,.28),30px 10px rgba(10,10,10,.28),40px 10px rgba(10,10,10,.28),50px 20px rgba(10,10,10,.28),
0 10px rgba(10,10,10,.28),10px 20px rgba(10,10,10,.28),20px 20px rgba(10,10,10,.28),30px 30px rgba(10,10,10,.28),40px 30px rgba(10,10,10,.28),50px 30px rgba(10,10,10,.28),
10px 30px rgba(10,10,10,.28),20px 40px rgba(10,10,10,.28),30px 40px rgba(10,10,10,.28),40px 50px rgba(10,10,10,.28),50px 50px rgba(10,10,10,.28),20px 50px rgba(10,10,10,.28);
animation:fogC 7s steps(6,end) infinite}
.pixel-fog .fog.d{left:10%;top:44%;box-shadow:
10px 0 rgba(10,10,10,.24),20px 0 rgba(10,10,10,.24),30px 10px rgba(10,10,10,.24),40px 20px rgba(10,10,10,.24),50px 20px rgba(10,10,10,.24),
0 10px rgba(10,10,10,.24),10px 20px rgba(10,10,10,.24),20px 20px rgba(10,10,10,.24),30px 30px rgba(10,10,10,.24),40px 30px rgba(10,10,10,.24),
10px 30px rgba(10,10,10,.24),20px 40px rgba(10,10,10,.24),30px 40px rgba(10,10,10,.24),40px 50px rgba(10,10,10,.24);
animation:fogD 7s steps(6,end) infinite}
.pixel-fog .fog.e{left:58%;top:52%;box-shadow:
10px 0 rgba(10,10,10,.22),20px 0 rgba(10,10,10,.22),30px 10px rgba(10,10,10,.22),40px 10px rgba(10,10,10,.22),50px 20px rgba(10,10,10,.22),
0 10px rgba(10,10,10,.22),10px 10px rgba(10,10,10,.22),20px 20px rgba(10,10,10,.22),30px 20px rgba(10,10,10,.22),40px 30px rgba(10,10,10,.22),
10px 20px rgba(10,10,10,.22),20px 30px rgba(10,10,10,.22),30px 40px rgba(10,10,10,.22),40px 40px rgba(10,10,10,.22),20px 50px rgba(10,10,10,.22),30px 50px rgba(10,10,10,.22);
animation:fogE 7s steps(6,end) infinite}
.pixel-fog .fog.f{left:22%;top:18%;box-shadow:
12px 0 rgba(10,10,10,.24),24px 0 rgba(10,10,10,.24),36px 12px rgba(10,10,10,.24),48px 12px rgba(10,10,10,.24),60px 24px rgba(10,10,10,.24),
0 12px rgba(10,10,10,.24),12px 24px rgba(10,10,10,.24),24px 24px rgba(10,10,10,.24),36px 36px rgba(10,10,10,.24),48px 36px rgba(10,10,10,.24),60px 48px rgba(10,10,10,.24),
12px 36px rgba(10,10,10,.24),24px 48px rgba(10,10,10,.24),36px 48px rgba(10,10,10,.24),48px 60px rgba(10,10,10,.24),60px 60px rgba(10,10,10,.24);
animation:fogF 7s steps(6,end) infinite}
.pixel-fog .fog.g{left:62%;top:18%;box-shadow:
12px 0 rgba(10,10,10,.22),24px 0 rgba(10,10,10,.22),36px 12px rgba(10,10,10,.22),48px 24px rgba(10,10,10,.22),
0 12px rgba(10,10,10,.22),12px 24px rgba(10,10,10,.22),24px 24px rgba(10,10,10,.22),36px 36px rgba(10,10,10,.22),48px 36px rgba(10,10,10,.22),
12px 36px rgba(10,10,10,.22),24px 48px rgba(10,10,10,.22),36px 48px rgba(10,10,10,.22),48px 60px rgba(10,10,10,.22);
animation:fogG 7s steps(6,end) infinite}
.pixel-fog .spark{position:absolute;width:7px;height:7px;background:rgba(216,162,74,.78);box-shadow:0 0 0 1px rgba(10,10,10,.08);opacity:0;image-rendering:pixelated}
.pixel-fog .spark.s1{left:34%;top:32%;animation:sparkle1 7s steps(4,end) infinite}
.pixel-fog .spark.s2{left:56%;top:40%;animation:sparkle2 7s steps(4,end) infinite}
.pixel-fog .spark.s3{left:42%;top:58%;animation:sparkle3 7s steps(4,end) infinite}
@keyframes fogA{0%,43%{opacity:0;transform:translate(0,0) scale(.8)}48%{opacity:1;transform:translate(-10px,-12px) scale(1.2)}60%{opacity:.35;transform:translate(-28px,-36px) scale(1.45)}100%{opacity:0;transform:translate(-34px,-44px) scale(1.5)}}
@keyframes fogB{0%,43%{opacity:0;transform:translate(0,0) scale(.7)}49%{opacity:1;transform:translate(8px,-12px) scale(1.2)}61%{opacity:.3;transform:translate(30px,-34px) scale(1.5)}100%{opacity:0;transform:translate(36px,-42px) scale(1.55)}}
@keyframes fogC{0%,44%{opacity:0;transform:translate(0,0) scale(.75)}50%{opacity:.95;transform:translate(-4px,-10px) scale(1.2)}62%{opacity:.25;transform:translate(-10px,-32px) scale(1.45)}100%{opacity:0;transform:translate(-14px,-40px) scale(1.5)}}
@keyframes fogD{0%,45%{opacity:0;transform:translate(0,0) scale(.7)}51%{opacity:.8;transform:translate(-18px,-6px) scale(1.1)}62%{opacity:.18;transform:translate(-34px,-18px) scale(1.35)}100%{opacity:0;transform:translate(-38px,-24px) scale(1.4)}}
@keyframes fogE{0%,45%{opacity:0;transform:translate(0,0) scale(.7)}52%{opacity:.82;transform:translate(14px,-10px) scale(1.12)}66%{opacity:.18;transform:translate(32px,-30px) scale(1.4)}100%{opacity:0;transform:translate(38px,-36px) scale(1.45)}}
@keyframes fogF{0%,43%{opacity:0;transform:translate(0,0) scale(.75)}50%{opacity:.85;transform:translate(-8px,-14px) scale(1.16)}65%{opacity:.16;transform:translate(-22px,-34px) scale(1.42)}100%{opacity:0;transform:translate(-28px,-42px) scale(1.46)}}
@keyframes fogG{0%,44%{opacity:0;transform:translate(0,0) scale(.75)}51%{opacity:.78;transform:translate(10px,-16px) scale(1.14)}66%{opacity:.14;transform:translate(26px,-36px) scale(1.4)}100%{opacity:0;transform:translate(32px,-44px) scale(1.44)}}
@keyframes sparkle1{0%,46%{opacity:0;transform:translate(0,0) scale(.5)}50%{opacity:1;transform:translate(-4px,-8px) scale(1)}60%{opacity:0;transform:translate(-8px,-18px) scale(1.1)}100%{opacity:0}}
@keyframes sparkle2{0%,48%{opacity:0;transform:translate(0,0) scale(.5)}52%{opacity:1;transform:translate(6px,-10px) scale(1)}60%{opacity:0;transform:translate(10px,-20px) scale(1.1)}100%{opacity:0}}
@keyframes sparkle3{0%,49%{opacity:0;transform:translate(0,0) scale(.5)}53%{opacity:1;transform:translate(0,-10px) scale(1)}61%{opacity:0;transform:translate(-2px,-22px) scale(1.1)}100%{opacity:0}}
/* magic beam */
.varita-vis .beam{position:absolute;left:24%;top:26%;width:52%;height:52%;background:radial-gradient(ellipse at center,rgba(216,162,74,.58),rgba(216,162,74,.22) 34%,transparent 72%);filter:blur(20px);opacity:0;transform-origin:center;animation:beamPulse 7s ease-in-out infinite}
@keyframes beamPulse{0%,41%{opacity:0;transform:scale(.75)}46%,57%{opacity:1;transform:scale(1.08)}64%{opacity:.15;transform:scale(1.28)}100%{opacity:0;transform:scale(1.32)}}
/* La secuencia del barrido NFC espera en su fotograma inicial (orco + móvil
en posición de entrada) y arranca de cero cuando la sección entra en
viewport — app.js añade .play con un IntersectionObserver. */
/* !important: el shorthand animation: de cada elemento resetea
animation-play-state a running y ganaría a esta regla por especificidad —
sin esto, unos relojes arrancan al cargar y otros al entrar en viewport,
y la secuencia (carta / estado del móvil / progreso) se desincroniza */
.varita-vis *,
.varita-vis *::before,
.varita-vis *::after{animation-play-state:paused !important}
.varita-vis.play *,
.varita-vis.play *::before,
.varita-vis.play *::after{animation-play-state:running !important}
/* ============================================================
5. THE COLLECTION
============================================================ */
#games{overflow:hidden}
.collection-head{max-width:760px;margin:0 auto;text-align:center}
.collection-head .h2{margin-top:18px}
.collection-head .lead{max-width:48ch;margin:26px auto 0}
.collection-strip{
max-width:1080px;margin:72px auto 0;display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.2vw,16px);
align-items:end;
}
.collection-card{position:relative;min-width:0;transition:transform .3s ease,filter .3s ease}
.collection-card:hover{transform:translateY(-6px);filter:brightness(1.08)}
.collection-card img{
width:100%;height:auto;
filter:grayscale(1) contrast(1.08) drop-shadow(0 22px 24px rgba(0,0,0,.34));
}
.collection-card.is-special img{filter:drop-shadow(0 22px 28px rgba(216,162,74,.18))}
.collection-badge{
position:absolute;top:-22px;left:0;z-index:2;
font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.collection-foot{
max-width:1080px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--line);
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.collection-label{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.collection-label span:last-child{color:var(--ink)}
.collection-label span + span::before{content:"·";margin-right:14px;color:var(--text-3)}
.collection-link{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);transition:color .2s ease}
.collection-link span{color:var(--ink);transition:transform .2s ease}
.collection-link:hover{color:var(--text)}
.collection-link:hover span{transform:translateX(3px)}
@media (max-width:680px){
.collection-head .lead{margin-top:20px}
.collection-strip{
width:calc(100% + 36px);margin:48px -18px 0;padding:0 18px 16px;
display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.collection-strip::-webkit-scrollbar{display:none}
.collection-card{flex:0 0 42%;scroll-snap-align:center}
.collection-badge{
top:48px;left:8px;padding:4px 6px;
background:rgba(10,10,10,.84);border:1px solid rgba(216,162,74,.38);border-radius:4px;
}
.collection-foot{margin-top:28px;align-items:flex-start}
.collection-label{flex-direction:column;align-items:flex-start;gap:6px;font-size:9px;letter-spacing:.12em}
.collection-label span + span::before{display:none}
.collection-link{font-size:10px}
}
/* Section 05 — editorial split: the physical cards and the world behind them. */
.world-head{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:end}
.world-head .kicker{grid-column:1 / -1;margin-bottom:16px}
.world-head .h2{font-size:clamp(42px,5.5vw,78px);line-height:.88}
.world-head .lead{max-width:34ch;margin:0 0 4px;justify-self:end}
.world-grid{max-width:1080px;margin:clamp(28px,5svh,54px) auto 0;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:16px}
.world-panel{position:relative;min-height:clamp(360px,48svh,520px);overflow:hidden;border:1px solid var(--line);background:#101012;isolation:isolate}
.world-panel::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.world-panel-topline{position:absolute;z-index:5;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.style-panel{background:radial-gradient(circle at 50% 38%,rgba(216,162,74,.11),transparent 38%),linear-gradient(145deg,#171719,#0d0d0f 68%)}
.style-card-fan{position:absolute;z-index:2;inset:62px 22px 112px;display:flex;align-items:center;justify-content:center}
.style-card{position:absolute;height:min(35svh,365px);width:auto;max-width:43%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55));transition:transform .45s ease,filter .45s ease}
.style-card-left{transform:translateX(-52%) rotate(-9deg) scale(.91);filter:grayscale(1) contrast(1.08) drop-shadow(0 24px 30px rgba(0,0,0,.52))}
.style-card-center{z-index:2;transform:translateY(-4px);filter:drop-shadow(0 28px 34px rgba(216,162,74,.14))}
.style-card-right{transform:translateX(52%) rotate(9deg) scale(.91);filter:grayscale(1) contrast(1.08) drop-shadow(0 24px 30px rgba(0,0,0,.52))}
.style-panel:hover .style-card-left{transform:translateX(-58%) rotate(-11deg) scale(.93)}
.style-panel:hover .style-card-center{transform:translateY(-10px) scale(1.02)}
.style-panel:hover .style-card-right{transform:translateX(58%) rotate(11deg) scale(.93)}
.world-panel-copy,.lore-copy{position:absolute;z-index:5;left:22px;right:22px;bottom:20px}
.world-panel h3{font-family:var(--serif);font-size:clamp(27px,2.4vw,38px);font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--text)}
.world-panel-copy p,.lore-copy p{max-width:48ch;margin-top:9px;font-size:12px;line-height:1.5;color:var(--text-2)}
.lore-panel{background:#090a0b}
.lore-landscape{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.72) contrast(1.04);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.lore-panel:hover .lore-landscape{transform:scale(1.035);filter:saturate(.86) contrast(1.04)}
.lore-shade{position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(7,7,9,.18) 0%,rgba(7,7,9,.03) 35%,rgba(7,7,9,.9) 100%),linear-gradient(90deg,rgba(7,7,9,.25),transparent 60%)}
.lore-topline{color:rgba(255,255,255,.75)}
.lore-chapter{display:block;margin-bottom:10px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.lore-copy h3{max-width:15ch;color:#f5f1e8}
.lore-copy p{max-width:52ch;color:rgba(245,241,232,.72)}
@media (max-width:820px){
#games{height:auto;min-height:100svh;overflow:visible}
.world-head{grid-template-columns:1fr}
.world-head .lead{justify-self:start;margin-top:18px}
.world-grid{grid-template-columns:1fr;gap:12px}
.world-panel{min-height:430px}
.style-card{height:300px}
}
@media (max-width:520px){
.world-head .h2{font-size:clamp(42px,13vw,58px)}
.world-head .lead{font-size:14px}
.world-grid{margin-top:28px}
.world-panel{min-height:390px}
.world-panel-topline{top:16px;left:16px;right:16px}
.style-card-fan{inset:56px 14px 108px}
.style-card{height:255px;max-width:46%}
.world-panel-copy,.lore-copy{left:16px;right:16px;bottom:16px}
.world-panel-copy p,.lore-copy p{font-size:11px}
}
@media (min-width:821px) and (max-height:760px){
.world-head .kicker{margin-bottom:10px}
.world-head .h2{font-size:clamp(36px,6svh,54px)}
.world-head .lead{font-size:14px}
.world-grid{margin-top:18px}
.world-panel{min-height:42svh}
.style-card{height:29svh}
.world-panel-copy p,.lore-copy p{display:none}
}
/* ============================================================
6. AI CARD STUDIO
============================================================ */
.ai-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.ai-center{display:flex;flex-direction:column;align-items:center;text-align:center}
@media (max-width:980px){.ai-grid{grid-template-columns:1fr}}
.ai-steps{list-style:none;margin:28px 0 0;display:flex;flex-direction:column;gap:14px}
.ai-steps li{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--text-2);font-family:var(--sans)}
.ai-num{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink);background:rgba(216,162,74,.1);border:1px solid rgba(216,162,74,.22);border-radius:6px;padding:3px 9px;flex-shrink:0}
.ai-vis{display:flex;align-items:center;justify-content:center;gap:20px}
.ai-side{display:flex;flex-direction:column;align-items:center;gap:12px}
.ai-caption{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
/* photo mockup — blurred warm gradients faking a portrait photo */
.ai-photo{width:110px;height:110px;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 24px 48px -12px rgba(0,0,0,.6);border:1px solid var(--line-2);flex-shrink:0}
.ai-photo-bg{position:absolute;inset:0;background:
radial-gradient(ellipse 80% 70% at 32% 26%,#e8a84a 0%,transparent 54%),
radial-gradient(ellipse 60% 60% at 74% 58%,#c46b3c 0%,transparent 54%),
radial-gradient(ellipse 100% 80% at 50% 92%,#2a3a5c 0%,transparent 58%),
#1a1410;
filter:blur(10px) saturate(1.8);transform:scale(1.15)}
.ai-photo-subject{position:absolute;inset:0;background:
radial-gradient(ellipse 38% 48% at 50% 38%,rgba(255,220,160,.28) 0%,transparent 60%),
radial-gradient(ellipse 26% 28% at 50% 26%,rgba(255,200,120,.22) 0%,transparent 70%)}
/* transform arrow */
.ai-arrow{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.ai-arrow-ring{width:40px;height:40px;border-radius:50%;border:1px solid rgba(216,162,74,.38);display:grid;place-items:center;font-size:15px;color:var(--ink);background:rgba(216,162,74,.08);animation:ai-glow 2.6s ease-in-out infinite}
@keyframes ai-glow{0%,100%{box-shadow:0 0 14px rgba(216,162,74,.1)}50%{box-shadow:0 0 28px rgba(216,162,74,.3)}}
.ai-badge{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;white-space:nowrap}
/* left — phone with the app draw-screen screenshot inside */
.draw-phone{width:172px;position:relative;overflow:visible;background:linear-gradient(145deg,#333338 0%,#111114 15%,#070708 72%,#29292e 100%);border:1px solid #414147;border-radius:26px;padding:6px;box-shadow:0 24px 48px -12px rgba(0,0,0,.6),inset 1px 1px 0 rgba(255,255,255,.08),inset -1px -1px 0 rgba(0,0,0,.8);flex-shrink:0}
.draw-phone::before{
content:"";
position:absolute;
z-index:4;
top:10px;
left:50%;
width:34%;
height:13px;
transform:translateX(-50%);
border-radius:9px;
background:
radial-gradient(circle at 79% 50%,#29405b 0 2px,#07101b 2.5px,#000 4px),
#000;
}
.draw-phone::after{
content:"";
position:absolute;
right:-4px;
top:31%;
width:3px;
height:13%;
border-radius:0 2px 2px 0;
background:linear-gradient(180deg,#4a4a50,#17171a 28%,#0b0b0d 78%,#343439);
border:1px solid #38383e;
}
.draw-phone-volume{
position:absolute;
z-index:4;
left:-4px;
top:23%;
width:3px;
height:7%;
border-radius:2px 0 0 2px;
background:linear-gradient(180deg,#4a4a50,#17171a 28%,#0b0b0d 78%,#343439);
border:1px solid #38383e;
box-shadow:0 clamp(18px,3vw,32px) 0 #202024;
}
.draw-phone-home{
position:absolute;
z-index:5;
left:50%;
bottom:10px;
width:27%;
height:3px;
transform:translateX(-50%);
border-radius:999px;
background:rgba(244,241,234,.48);
}
.draw-phone img{display:block;width:100%;height:auto;aspect-ratio:1179/2556;object-fit:cover;border-radius:20px;border:1px solid #1a1a1a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
/* right — Blender card render (dithered drawing, intentionally clean bezel) */
.card-render img{display:block;height:372px;width:auto;flex-shrink:0;filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}
@media (max-width:520px){
.ai-vis{gap:12px}
.ai-photo{width:80px;height:80px}
.draw-phone{width:118px;border-radius:20px}
.card-render img{height:252px}
.ai-arrow-ring{width:32px;height:32px;font-size:12px}
}
/* ============================================================
7. SPECS
============================================================ */
.specs-showcase{
max-width:1000px;
margin:72px auto 0;
}
.specs-diagram{
position:relative;
/* Card, callouts and the 1000×620 arrow viewBox share one proportional
canvas: cap the height through the width so nothing drifts apart. */
width:min(100%,calc(min(560px,56svh)*1.6129));
aspect-ratio:1000/620;
margin:0 auto;
container-type:inline-size;
isolation:isolate;
}
.specs-diagram::before{
content:"";
position:absolute;
inset:7% 24% 5%;
z-index:0;
border:1px solid var(--line);
border-radius:50%;
opacity:.9;
}
.specs-card-render{
position:absolute;
left:50%;
top:50%;
z-index:2;
width:45%; /* 450 units of the 1000-unit canvas — the arrow tips assume this */
height:auto;
transform:translate(-50%,-50%);
filter:drop-shadow(0 34px 62px rgba(0,0,0,.68)) drop-shadow(0 0 42px rgba(216,162,74,.10));
}
.specs-arrows{
position:absolute;
inset:0;
z-index:3;
width:100%;
height:100%;
overflow:visible;
pointer-events:none;
}
.specs-arrows path{
fill:none;
stroke:var(--ink);
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
marker-end:url(#spec-arrowhead);
}
.specs-arrows marker path{fill:var(--ink)}
.spec-callout{
position:absolute;
z-index:4;
max-width:27%;
padding-top:15px;
padding-top:clamp(9px,1.5cqw,15px);
border-top:1px solid var(--line-2);
}
.spec-callout::before{
content:"";
position:absolute;
top:-3px;
left:0;
width:6px;
height:6px;
border-radius:50%;
background:var(--ink);
box-shadow:0 0 14px rgba(216,162,74,.55);
}
.spec-callout-display{left:0;top:20%}
.spec-callout-nfc{right:2%;top:31%}
.spec-callout-power{right:8%;bottom:13%}
.spec-label{
display:block;
font-family:var(--mono);
font-size:11px;
font-size:clamp(8.5px,1.1cqw,11px);
letter-spacing:.16em;
color:var(--text-3);
text-transform:uppercase;
}
.spec-callout strong{
display:block;
margin-top:clamp(6px,1cqw,10px);
font-family:var(--serif);
font-size:clamp(32px,4.2vw,52px);
font-size:clamp(24px,5cqw,52px);
font-weight:400;
line-height:1;
letter-spacing:-.01em;
}
.spec-callout strong .it{font-style:italic;color:var(--ink)}
.spec-note{
display:block;
margin-top:clamp(5px,.9cqw,9px);
font-size:13px;
font-size:clamp(10.5px,1.3cqw,13px);
line-height:1.45;
color:var(--text-2);
}
/* ≤900px the specs collapse to the card-plus-arrowed-callouts grid defined
in the mobile polish pass near the end of this file. */
/* ============================================================
8. TIERS
============================================================ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media (max-width:980px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;padding:36px 32px;border:1px solid var(--line);border-radius:20px;background:var(--surface);display:flex;flex-direction:column;gap:20px;transition:border-color .3s,transform .3s}
.tier:hover{border-color:var(--line-2)}
.tier.featured{overflow:hidden;background:linear-gradient(180deg,rgba(5,166,107,.06),var(--surface));border-color:rgba(5,166,107,.4);transform:translateY(-8px)}
.tier-popular-tag{position:absolute;z-index:2;top:0;right:0;background:var(--green);color:#0B0B0C;font-family:var(--mono);font-size:9px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-radius:0 0 0 7px}
.tier .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.tier .name{font-family:var(--serif);font-size:30px;line-height:1.1;letter-spacing:-.01em}
.tier .name .it{font-style:italic;color:var(--ink)}
.tier .price{display:flex;align-items:baseline;gap:6px;margin-top:14px}
.tier .price b{font-family:var(--serif);font-size:56px;line-height:1;font-style:italic;color:var(--text);letter-spacing:-.01em;font-weight:400}
.tier .price s{font-family:var(--mono);font-size:13px;color:var(--text-3);font-weight:400}
.tier .price em{font-family:var(--mono);font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.14em;font-style:normal;margin-left:6px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1}
.tier li{display:flex;gap:12px;font-size:14px;color:var(--text-2);line-height:1.45}
.tier li::before{content:"+";color:var(--ink);font-family:var(--mono);font-weight:500;flex-shrink:0;width:14px}
.tier li.bonus::before{content:"★";color:var(--ink)}
.tier .pick{margin-top:8px;display:inline-flex;align-items:center;justify-content:space-between;padding:16px 20px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);transition:all .2s}
.tier .pick:hover{border-color:var(--text-2);background:var(--bg-2)}
.tier.featured .pick{background:var(--green);color:#0B0B0C;border-color:var(--green)}
.tier.featured .pick:hover{background:var(--green-2);border-color:var(--green-2)}
.tier .stock{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.tier .bar{height:2px;background:var(--slate);border-radius:2px;overflow:hidden;margin-top:6px}
.tier .bar i{display:block;height:100%;background:var(--ink)}
.tier.featured .bar i{background:var(--green)}
/* ============================================================
9. FAQ
============================================================ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:28px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.2;letter-spacing:-.01em;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--text-3);font-weight:500;flex-shrink:0;min-width:40px}
.faq summary .plus{font-family:var(--serif);font-size:32px;line-height:1;color:var(--ink);font-style:italic;flex-shrink:0;transition:transform .3s ease}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .answer{margin-top:20px;color:var(--text-2);font-size:16px;line-height:1.6;max-width:72ch;padding-left:64px}
@media (max-width:680px){.faq .answer{padding-left:0}}
/* ============================================================
10. FOOTER
============================================================ */
footer{padding:120px 0 48px;border-top:1px solid var(--line);background:var(--bg);position:relative;overflow:hidden}
.footer-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:end;padding-bottom:80px;border-bottom:1px solid var(--line)}
@media (max-width:880px){.footer-hero{grid-template-columns:1fr}}
.footer-hero h3{font-family:var(--serif);font-size:clamp(40px,6vw,84px);line-height:.96;letter-spacing:-.02em;max-width:14ch}
.footer-hero h3 .it{font-style:italic;color:var(--ink)}
.newsletter{display:flex;gap:8px;border:1px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 22px;background:var(--surface);transition:border-color .2s}
.newsletter:focus-within{border-color:var(--green)}
.newsletter input{flex:1;background:none;border:0;outline:0;color:var(--text);font-family:var(--sans);font-size:15px;padding:12px 0}
.newsletter input::placeholder{color:var(--text-3)}
.newsletter button{padding:14px 22px;background:var(--green);color:#0B0B0C;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:background .2s}
.newsletter button:hover{background:var(--green-2)}
.footer-meta{padding-top:48px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:32px}
@media (max-width:780px){.footer-meta{grid-template-columns:1fr 1fr}}
.footer-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-2)}
.footer-col a:hover{color:var(--text)}
.footer-bottom{margin-top:80px;padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase;flex-wrap:wrap;gap:16px}
.footer-mark{font-family:var(--serif);font-style:italic;font-size:clamp(80px,18vw,260px);line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(232,228,218,.24);text-stroke:1.5px rgba(232,228,218,.24);position:absolute;left:0;right:0;bottom:-30px;text-align:center;pointer-events:none;white-space:nowrap}
/* ============================================================
reveal-on-scroll
============================================================ */
.reveal{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
.reveal.reveal-pending{opacity:0;transform:translateY(20px)}
.reveal.in{opacity:1;transform:none}
/* parallax helper */
[data-par]{will-change:transform}
/* ============================================================
Mobile refinements
============================================================ */
@media (max-width:980px){
.wrap{padding:0 22px}
section{padding:96px 0}
.hero{padding:84px 0 32px;min-height:auto}
/* the fanned hand is near-square, so the mobile stage widens (was a tall
single-card slot) and drops its min-height */
.stage{min-height:0;aspect-ratio:1100/913;width:86%;max-width:380px;margin:0 auto}
.hero-meta{gap:24px}
.hero-meta b{font-size:18px}
.varita{padding:120px 0}
/* width:100% es imprescindible: con margin auto y solo hijos absolutos,
el ancho shrink-to-fit del grid colapsa a 0 y el visual desaparece */
.varita-vis{aspect-ratio:5/4;max-width:520px;margin-inline:auto;width:100%}
/* mobile: center the orc/frog device card */
.varita-vis .vcard.device-card{left:50%;width:56%;transform:translateX(-50%)}
.footer-hero{padding-bottom:48px}
.footer-bottom{margin-top:48px}
}
@media (max-width:680px){
.wrap{padding:0 18px}
section{padding:72px 0}
.sec-head{margin-bottom:40px;gap:24px}
.display{font-size:clamp(40px,11vw,72px)}
.h2{font-size:clamp(32px,8vw,56px)}
.lead{font-size:16px}
.hero{padding:104px 0 56px}
.hero-grid{gap:48px}
.hero h1{margin-top:18px}
.hero h1 .line{white-space:normal}
.hero-tag{margin-top:22px}
.hero-cta-row{margin-top:26px;gap:10px}
.btn-gold,.btn-ghost{width:100%;justify-content:center;padding:16px 20px;font-size:11px}
.hero-meta{margin-top:32px;gap:20px}
.hero-meta > div{flex:1 1 30%;min-width:120px}
.ticker-track{font-size:10px;gap:32px}
.problem-cell{padding:24px 16px;min-height:300px}
.problem-cell h3{font-size:clamp(20px,5vw,32px)}
.problem-cell .visual{margin:16px 0}
.vs{display:none}
.step{padding:24px;min-height:auto}
/* keep the desktop 160px — at 140px the third row of the step-02
app list (Hex Royale) gets clipped mid-row */
.varita{padding:80px 0}
.varita-quote{font-size:22px;padding-left:18px}
.varita-vis{aspect-ratio:1/1;max-width:420px}
.editor-body{grid-template-columns:1fr}
.editor-side{border-right:0;border-bottom:1px solid var(--line)}
.editor-canvas{padding:24px}
.market{flex-direction:column;gap:8px}
.tier{padding:28px 24px;gap:16px}
.tier.featured{transform:none}
.tier .price b{font-size:44px}
.faq summary{font-size:20px;gap:14px}
.faq summary .num{min-width:32px;font-size:10px}
.faq .answer{font-size:15px}
footer{padding:80px 0 36px}
.footer-hero h3{font-size:clamp(32px,9vw,48px)}
.newsletter{flex-direction:column;border-radius:18px;padding:10px;gap:6px}
.newsletter input{padding:10px 12px;width:100%}
.newsletter button{width:100%}
.footer-meta{padding-top:32px;gap:24px}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;font-size:10px}
.footer-mark{font-size:clamp(64px,28vw,180px);bottom:-18px}
}
@media (max-width:420px){
.nav-inner{height:58px}
.logo span{font-size:18px}
.display{font-size:clamp(36px,12vw,60px)}
.hero-meta{flex-direction:column;gap:14px;margin-top:24px}
.hero-meta > div{min-width:0}
}
/* avoid horizontal overflow on small screens caused by tickers/footer mark */
body{overflow-x:clip}
/* reduce motion for users who prefer it */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
/* composición fija para los visuales cuya opacidad base es 0 (si no,
al anular las animaciones desaparecen): móvil sobre la carta del orco */
.vc-frame:first-child{opacity:1}
.device-card .dev-orc{opacity:0}
.device-card .dev-frog{opacity:1}
.varita-vis .phone{right:24%;top:30%;opacity:1}
.v-sync .nfc-card img:first-child{opacity:1}
}
/* ============================================================
Funnel components — email capture, trust strip, sticky CTA
============================================================ */
/* Inline hero email capture (primary pre-launch conversion) */
.hero-signup{margin-top:32px;max-width:480px;display:flex;flex-direction:column;gap:10px}
.hero-signup .hs-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.hero-signup .hs-label b{color:var(--ink);font-weight:500}
.hero-signup .hs-row{display:flex;gap:6px;border:1px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 22px;background:rgba(20,20,22,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,background .2s}
.hero-signup .hs-row:focus-within{border-color:var(--green);background:rgba(20,20,22,.85)}
.hero-signup input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font-family:var(--sans);font-size:15px;padding:12px 0}
.hero-signup input::placeholder{color:var(--text-3)}
.hero-signup .hs-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;background:var(--green);color:#0B0B0C;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:background .2s,transform .2s;white-space:nowrap}
.hero-signup .hs-cta:hover{background:var(--green-2);transform:translateY(-1px)}
.hero-signup .hs-cta .arr{transition:transform .2s}
.hero-signup .hs-cta:hover .arr{transform:translateX(2px)}
.hero-signup .hs-fine{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--text-3)}
.hero-signup.done .hs-row{border-color:var(--green);background:rgba(5,166,107,.08)}
/* Trust strip — between hero and the rest */
/* ============================================================
1.5 VIDEO DEMO
============================================================ */
.demo-section{padding:80px 0 120px}
.demo-wrap{max-width:860px;margin:0 auto}
.demo-player{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;background:#0a0a0c;box-shadow:0 48px 96px -32px rgba(0,0,0,.8),0 0 0 1px var(--line-2);aspect-ratio:16/9}
.demo-player:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* poster = YouTube frame of the 3D product; the gradient stays as a fallback
if the remote thumbnail fails to load */
.demo-thumb{position:absolute;inset:0;background:
url("https://i.ytimg.com/vi/NYh79xGA06c/maxresdefault.jpg") center/cover no-repeat,
radial-gradient(ellipse 70% 60% at 65% 40%,rgba(216,162,74,.12),transparent 60%),
radial-gradient(ellipse 80% 80% at 20% 70%,rgba(5,166,107,.06),transparent 60%),
#0d0e10;
transition:filter .3s}
.demo-player:hover .demo-thumb{filter:brightness(1.08)}
/* play button */
.demo-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .2s,opacity .2s;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.demo-player:hover .demo-play{transform:translate(-50%,-50%) scale(1.1)}
/* caption bottom-left */
.demo-caption{position:absolute;bottom:0;left:0;right:0;padding:48px 32px 28px;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,transparent 100%)}
.demo-tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.5);margin-bottom:8px}
.demo-title{font-family:var(--serif);font-size:clamp(20px,3vw,32px);line-height:1.2;color:var(--text)}
.demo-title em{font-style:italic;color:var(--ink)}
/* no video yet — visible teaser, but not a fake interactive player */
.demo-player.soon{cursor:default}
.demo-player.soon .demo-play{display:none}
.demo-player.soon:hover .demo-thumb{filter:none}
.demo-player.soon:hover .demo-play{transform:translate(-50%,-50%)}
/* when activated: swap thumb for iframe */
.demo-player.playing .demo-thumb,
.demo-player.playing .demo-play,
.demo-player.playing .demo-caption{display:none}
.demo-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:680px){
.demo-section{padding:48px 0 64px}
.demo-caption{padding:32px 18px 18px}
.demo-play svg{width:52px;height:37px}
}
.trust{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust-item{padding:24px 28px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line)}
.trust-item:last-child{border-right:0}
.trust-item .ti-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.trust-item strong{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--text);line-height:1.35}
/* Sticky mobile CTA */
.mobile-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;background:rgba(14,15,17,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 18px 40px -12px rgba(0,0,0,.7),0 0 0 1px rgba(5,166,107,.18);transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mobile-cta.show{transform:translateY(0)}
.mc-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mc-price{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);color:var(--text)}
.mc-price b{font-size:22px;font-style:italic;font-weight:400;line-height:1}
.mc-price s{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.mc-sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink);text-transform:uppercase}
.mc-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;background:var(--green);color:#0B0B0C;border-radius:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;min-height:48px}
.mc-btn .arr{transition:transform .2s}
.mc-btn:active .arr{transform:translateX(3px)}
@media (max-width:880px){
.mobile-cta{display:flex}
/* leave room for the sticky bar so it doesn't sit over content */
footer{padding-bottom:120px}
}
@supports(padding:env(safe-area-inset-bottom)){
.mobile-cta{bottom:max(12px,env(safe-area-inset-bottom))}
}
/* Trust strip — mobile collapses to 2 columns */
@media (max-width:880px){
.trust-grid{grid-template-columns:1fr 1fr}
.trust-item{padding:18px 18px;border-bottom:1px solid var(--line)}
.trust-item:nth-child(2n){border-right:0}
.trust-item:nth-child(3),
.trust-item:nth-child(4){border-bottom:0}
}
@media (max-width:420px){
.trust-grid{grid-template-columns:1fr}
.trust-item{border-right:0}
.trust-item:not(:last-child){border-bottom:1px solid var(--line)}
}
/* Mobile hero polish — the device leads, copy follows */
@media (max-width:880px){
/* keep hero img legible but lighter */
.hero{padding:96px 0 56px}
.hero-grid{grid-template-columns:1fr;gap:36px}
.stage{order:-1}
.hero > .wrap > .hero-grid > div:first-child{order:1}
.hero-meta{gap:18px}
.hero-meta b{font-size:17px;margin-bottom:2px}
.hero-meta > div{font-size:10px}
/* Email capture stacks vertical, full-width, 48px button */
.hero-signup .hs-row{flex-direction:column;border-radius:14px;padding:8px;gap:8px}
.hero-signup input{padding:14px 14px;width:100%}
.hero-signup .hs-cta{width:100%;justify-content:center;min-height:48px}
}
/* Min 48px tap targets across primary touch elements */
@media (pointer:coarse){
.btn-gold,.btn-ghost,.nav-cta,.tier .pick,.newsletter button,.hs-cta,.mc-btn{min-height:48px}
.nav-links a,.mobile-menu a{padding-block:14px}
}
/* Hide ticker on very small to reduce noise above first scroll */
@media (max-width:560px){
.ticker-track{font-size:9px;gap:24px;padding:10px 0}
}
/* ============================================================
THE APP SECTION
============================================================ */
.app-section{}
.app-layout{
max-width:1120px;
margin:72px auto 0;
display:grid;
grid-template-columns:minmax(460px,.95fr) 1fr;
gap:56px;
align-items:center;
}
@media (max-width:980px){
.app-layout{grid-template-columns:1fr;gap:48px}
}
/* Phone device */
.app-phone-wrap{
display:flex;
justify-content:center;
align-items:center;
}
.app-phone{
width:min(280px,80vw);
aspect-ratio:9/19;
background:linear-gradient(145deg,#333338 0%,#111114 15%,#070708 72%,#29292e 100%);
border-radius:44px;
border:1px solid #414147;
box-shadow:
0 0 0 6px rgba(255,255,255,.025),
0 60px 120px -30px rgba(0,0,0,.9),
0 0 80px -20px rgba(216,162,74,.12),
inset 1px 1px 0 rgba(255,255,255,.08),
inset -1px -1px 0 rgba(0,0,0,.8);
padding:14px 10px;
position:relative;
overflow:visible;
}
.app-phone::before,
.app-phone::after{
content:"";
position:absolute;
display:block;
width:3px;
background:linear-gradient(180deg,#4a4a50,#17171a 28%,#0b0b0d 78%,#343439);
border:1px solid #38383e;
}
.app-phone::before{
left:-4px;
top:23%;
height:7%;
border-radius:2px 0 0 2px;
box-shadow:0 clamp(24px,4vw,44px) 0 #202024;
}
.app-phone::after{
right:-4px;
top:31%;
height:13%;
border-radius:0 2px 2px 0;
}
.app-notch{
position:absolute;
top:10px;left:50%;transform:translateX(-50%);
width:80px;height:22px;
background:#000;
border-radius:14px;
z-index:10;
}
.app-notch::before{
content:"";
position:absolute;
left:22%;
top:50%;
width:36%;
height:2px;
transform:translateY(-50%);
border-radius:2px;
background:#19191d;
}
.app-notch::after{
content:"";
position:absolute;
right:14%;
top:50%;
width:6px;
height:6px;
transform:translateY(-50%);
border-radius:50%;
background:radial-gradient(circle at 35% 35%,#29405b,#07101b 58%,#000 72%);
box-shadow:0 0 3px rgba(53,92,132,.45);
}
.app-screen{
width:100%;height:100%;
background:#0f1115;
border-radius:32px;
position:relative;
padding:36px 14px 14px;
display:flex;
flex-direction:column;
gap:10px;
overflow:hidden;
border:1px solid #19191c;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -18px 28px rgba(0,0,0,.22);
}
.app-screen::before{
content:"";
position:absolute;
inset:0;
z-index:8;
pointer-events:none;
background:linear-gradient(118deg,rgba(255,255,255,.045),transparent 18%,transparent 78%,rgba(255,255,255,.015));
}
.app-screen::after{
content:"";
position:absolute;
z-index:9;
left:50%;
bottom:7px;
width:27%;
height:3px;
transform:translateX(-50%);
border-radius:999px;
background:rgba(244,241,234,.46);
}
.app-shot-wrap{
position:relative;
width:min(500px,100%);
min-height:620px;
margin:0 auto;
isolation:isolate;
}
.app-shot-phone{
margin:0;
position:relative;
}
.app-shot-phone-main{
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
}
.app-shot-phone-peek{
position:absolute;
right:28px;
bottom:86px;
z-index:1;
transform:translateX(18%) scale(.68) rotate(7deg);
opacity:.68;
filter:brightness(.76) saturate(.9);
}
.app-shot-phone-catalog{
position:absolute;
left:22px;
bottom:78px;
z-index:1;
transform:translateX(-18%) scale(.68) rotate(-8deg);
opacity:.66;
filter:brightness(.74) saturate(.88);
}
.app-shot-phone-peek .app-phone,
.app-shot-phone-catalog .app-phone{
width:240px;
}
.app-shot-phone-main .app-phone-real{
width:min(260px,76vw);
}
.app-screen.app-real-screen{
padding:0;
display:block;
background:#101012;
}
.app-screen.app-real-screen img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:top center;
}
.app-shot-phone figcaption{
margin-top:16px;
text-align:center;
font-family:var(--mono);
font-size:10px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--text-3);
}
.app-top-bar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:2px;
}
.app-back{
font-family:var(--mono);
font-size:9px;
letter-spacing:.08em;
color:var(--text-3);
text-transform:uppercase;
}
.app-live{
font-family:var(--mono);
font-size:8px;
letter-spacing:.12em;
color:var(--ink);
text-transform:uppercase;
}
.app-game-row{
display:flex;
align-items:center;
gap:10px;
padding:8px;
background:rgba(216,162,74,.07);
border:1px solid rgba(216,162,74,.18);
border-radius:10px;
}
.app-game-thumb{
width:36px;height:36px;
border-radius:8px;
overflow:hidden;
background:#11141a;
border:1px solid var(--line);
flex-shrink:0;
}
.app-game-thumb img{
width:100%;height:100%;
object-fit:contain;
padding:4px;
filter:none;
}
.app-game-title{
font-family:var(--serif);
font-size:14px;
color:var(--text);
letter-spacing:-.01em;
line-height:1.1;
}
.app-game-sub{
font-family:var(--mono);
font-size:8px;
letter-spacing:.08em;
color:var(--text-3);
margin-top:2px;
text-transform:uppercase;
}
.app-stats-bar{
display:flex;
align-items:center;
background:rgba(255,255,255,.03);
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
}
.app-stat-box{
flex:1;
padding:8px 6px;
display:flex;
flex-direction:column;
align-items:center;
gap:1px;
}
.app-stat-val{
font-family:var(--serif);
font-size:18px;
font-style:italic;
color:var(--ink);
line-height:1;
letter-spacing:-.01em;
}
.app-stat-key{
font-family:var(--mono);
font-size:7px;
letter-spacing:.12em;
color:var(--text-3);
text-transform:uppercase;
}
.app-stat-sep{
width:1px;
height:28px;
background:var(--line);
flex-shrink:0;
}
.app-prog-block{
display:flex;
flex-direction:column;
gap:5px;
}
.app-prog-header{
display:flex;
justify-content:space-between;
font-family:var(--mono);
font-size:8px;
letter-spacing:.1em;
color:var(--text-3);
text-transform:uppercase;
}
.app-prog-count{
color:var(--ink);
}
.app-prog-bar{
height:3px;
background:var(--slate);
border-radius:99px;
overflow:hidden;
}
.app-prog-fill{
width:60%;
height:100%;
background:linear-gradient(90deg,var(--ink-deep),var(--ink));
border-radius:99px;
position:relative;
}
.app-prog-fill::after{
content:"";
position:absolute;
right:0;top:50%;transform:translateY(-50%);
width:6px;height:6px;
border-radius:50%;
background:var(--ink);
box-shadow:0 0 8px var(--ink);
}
.app-prog-hint{
font-family:var(--mono);
font-size:7px;
letter-spacing:.06em;
color:var(--text-3);
}
.app-next-card{
display:flex;
align-items:center;
gap:8px;
padding:7px 8px;
background:rgba(5,166,107,.06);
border:1px solid rgba(5,166,107,.2);
border-radius:8px;
}
.app-nc-thumb{
width:24px;
aspect-ratio:128/296;
border-radius:3px;
overflow:hidden;
background:var(--paper);
flex-shrink:0;
border:1px solid rgba(0,0,0,.2);
}
.app-nc-thumb img{
width:100%;height:100%;
object-fit:cover;
filter:grayscale(1) contrast(1.08);
}
.app-nc-name{
font-family:var(--serif);
font-size:10px;
color:var(--text);
line-height:1.2;
}
.app-nc-action{
font-family:var(--mono);
font-size:8px;
letter-spacing:.08em;
color:var(--ink);
text-transform:uppercase;
margin-top:1px;
}
/* Feature list */
.app-features{
display:flex;
flex-direction:column;
gap:0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.app-feat{
display:flex;
gap:20px;
align-items:flex-start;
padding:24px 0;
border-bottom:1px solid var(--line);
}
.app-feat:last-child{border-bottom:0}
.app-feat-num{
font-family:var(--mono);
font-size:10px;
letter-spacing:.2em;
color:var(--ink);
text-transform:uppercase;
padding-top:4px;
flex-shrink:0;
}
.app-feat-title{
font-family:var(--serif);
font-size:22px;
letter-spacing:-.01em;
line-height:1.1;
color:var(--text);
margin-bottom:8px;
}
.app-feat-body{
font-size:15px;
line-height:1.55;
color:var(--text-2);
}
@media (max-width:680px){
.app-layout{margin-top:48px}
.app-phone{width:min(230px,70vw);border-radius:36px;padding:12px 8px}
.app-notch{top:8px;width:66px;height:18px}
.app-screen{border-radius:28px;padding:32px 12px 12px}
.app-feat{gap:14px}
.app-feat-title{font-size:18px}
.app-feat-body{font-size:14px}
.app-features{gap:0}
}
/* ============================================================
WHY CASTINK SECTION
============================================================ */
.why-head{max-width:760px;margin:0 auto;text-align:center}
.why-head .h2{margin-top:18px}
.why-head .lead{margin:26px auto 0}
.why-points{
max-width:1080px;margin:72px auto 0;
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.why-point{padding:34px 32px 38px;border-right:1px solid var(--line)}
.why-point:last-child{border-right:0}
.why-value{
display:block;margin-bottom:42px;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.why-point h3{
font-family:var(--serif);font-size:clamp(26px,2.5vw,36px);
font-weight:400;line-height:1.05;letter-spacing:-.01em;color:var(--text);
}
.why-point p{max-width:30ch;margin-top:16px;font-size:15px;line-height:1.55;color:var(--text-2)}
@media (max-width:680px){
.why-head .lead{margin-top:20px}
.why-points{margin-top:48px;grid-template-columns:1fr}
.why-point{padding:26px 0 28px;border-right:0;border-bottom:1px solid var(--line)}
.why-point:last-child{border-bottom:0}
.why-value{margin-bottom:18px}
.why-point h3{font-size:28px}
.why-point p{margin-top:10px;font-size:14px}
}
/* ============================================================
Full-screen scroll loop
============================================================ */
:root{
--nav-h:64px;
--screen-y:clamp(12px,3svh,36px);
}
html{
scroll-padding-top:0;
scroll-snap-type:y mandatory;
}
section[data-screen-label],
footer[data-screen-label]{
min-height:100svh;
height:100svh;
scroll-snap-align:start;
scroll-snap-stop:always;
display:flex;
align-items:center;
justify-content:center;
padding:calc(var(--nav-h) + var(--screen-y)) 0 var(--screen-y);
overflow:clip;
}
section[data-screen-label] > .wrap,
footer[data-screen-label] > .wrap{width:100%}
.trust{scroll-snap-align:none}
.display{font-size:clamp(38px,min(7vw,10svh),106px)}
.h2{font-size:clamp(30px,min(5vw,8svh),76px)}
.lead{font-size:clamp(14px,min(1.45vw,2.25svh),18px)}
.sec-head{margin-bottom:clamp(24px,5svh,54px)}
.minimal-head .h2,
.collection-head .h2,
.why-head .h2{margin-top:clamp(10px,2svh,18px)}
.minimal-head .lead,
.collection-head .lead,
.why-head .lead{margin-top:clamp(12px,2.6svh,24px)}
.hero{
min-height:100svh;
height:100svh;
padding:calc(var(--nav-h) + clamp(8px,2svh,24px)) 0 clamp(42px,7svh,68px);
}
.hero-grid{gap:clamp(18px,4vw,52px)}
.hero h1{margin-top:clamp(12px,2.5svh,28px)}
.hero-tag{margin-top:clamp(14px,2.6svh,30px)}
.hero-cta-row{margin-top:clamp(16px,3svh,34px)}
.hero-signup{margin-top:clamp(14px,2.7svh,28px)}
.hero-meta{margin-top:clamp(16px,3.2svh,38px)}
.stage{
min-height:0;
width:min(100%,46svh,520px);
justify-self:center;
}
.ticker-track{padding:clamp(9px,1.6svh,14px) 0}
.demo-section{padding:calc(var(--nav-h) + var(--screen-y)) 0 var(--screen-y)}
.demo-wrap{width:min(860px,100%)}
.demo-player{max-height:62svh}
.app-layout,
.how-points,
.why-points,
.specs-showcase,
.collection-strip{margin-top:clamp(22px,5svh,56px)}
.collection-foot{margin-top:clamp(18px,4svh,36px)}
.app-layout{gap:clamp(20px,5vw,56px)}
.app-phone{width:min(220px,24svh,80vw)}
.app-screen{gap:clamp(6px,1.2svh,10px)}
.app-feat{padding:clamp(10px,2.1svh,20px) 0}
.app-feat-title{font-size:clamp(17px,2.25svh,22px);margin-bottom:clamp(4px,1svh,8px)}
.app-feat-body{font-size:clamp(13px,1.7svh,15px)}
.how-point,
.why-point{padding:clamp(24px,4svh,34px) clamp(20px,2.5vw,32px)}
.how-num,
.why-value{margin-bottom:clamp(18px,4svh,42px)}
.varita .varita-vis{
width:min(560px,45svh,100%);
margin-top:clamp(22px,5svh,52px);
}
.nfc-modes{margin-top:clamp(14px,3svh,24px);padding-top:clamp(12px,2.5svh,20px)}
#ai .ai-vis{margin-top:clamp(22px,5svh,48px) !important}
.draw-phone{width:min(172px,19svh)}
.card-render img{height:min(372px,42svh)}
.tiers{gap:clamp(12px,2vw,18px)}
.tier{padding:clamp(18px,3svh,32px) clamp(18px,2.6vw,32px);gap:clamp(10px,2svh,18px)}
.tier .head{padding-bottom:clamp(12px,2svh,20px)}
.tier .price{margin-top:clamp(8px,1.6svh,14px)}
.tier .price b{font-size:clamp(38px,6svh,56px)}
.tier ul{gap:clamp(7px,1.5svh,12px)}
.tier li{font-size:clamp(12px,1.65svh,14px)}
.tier .pick{padding:clamp(12px,2svh,16px) 18px}
.faq details{padding:clamp(10px,2svh,22px) 0}
.faq summary{font-size:clamp(19px,min(2.1vw,3.2svh),28px)}
.faq .answer{margin-top:clamp(10px,2svh,20px);font-size:clamp(14px,1.8svh,16px)}
footer[data-screen-label]{padding:calc(var(--nav-h) + var(--screen-y)) 0 var(--screen-y)}
.footer-hero{padding-bottom:clamp(28px,5svh,70px);gap:clamp(24px,5vw,64px)}
.footer-meta{padding-top:clamp(24px,4svh,44px);gap:clamp(18px,3vw,32px)}
.footer-bottom{margin-top:clamp(24px,5svh,64px);padding-top:clamp(18px,3svh,32px)}
@media (max-width:980px){
.app-layout{
grid-template-columns:minmax(120px,.52fr) 1fr;
gap:clamp(16px,4vw,32px);
}
.app-phone{width:min(160px,24vw,24svh)}
.stage{
width:min(82vw,34svh,380px);
aspect-ratio:1100/913;
}
}
@media (max-width:780px){
.tiers{
display:flex;
gap:12px;
margin:0 -18px;
padding:6px 18px 12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.tiers::-webkit-scrollbar{display:none}
.tier{
flex:0 0 min(82vw,330px);
scroll-snap-align:center;
}
}
@media (max-width:680px){
:root{--screen-y:clamp(8px,2svh,18px)}
section[data-screen-label],
footer[data-screen-label]{padding:calc(var(--nav-h) + var(--screen-y)) 0 var(--screen-y)}
.wrap{padding:0 18px}
.display{font-size:clamp(34px,min(10.5vw,7.4svh),58px)}
.h2{font-size:clamp(28px,min(8vw,6.8svh),48px)}
.lead{font-size:clamp(13px,3.8vw,16px);line-height:1.45}
.hero{padding:calc(var(--nav-h) + 8px) 0 clamp(34px,6svh,52px)}
.hero-grid{gap:clamp(12px,3svh,26px)}
.hero h1{margin-top:10px}
.hero-tag{margin-top:12px;max-width:34ch}
.hero-cta-row{margin-top:14px}
.hero-signup{margin-top:12px}
.hero-signup .hs-label{font-size:9px;letter-spacing:.1em}
.hero-signup .hs-fine{display:none}
.hero-meta{display:none}
.stage{width:min(72vw,26svh,300px)}
.btn-gold,.btn-ghost{padding:13px 16px}
.app-layout{
grid-template-columns:minmax(96px,.48fr) 1fr;
margin-top:clamp(14px,3svh,24px);
gap:14px;
}
.app-phone{width:min(112px,30vw,19svh)}
.app-notch{width:42px;height:12px;border-radius:8px}
.app-screen{border-radius:18px;padding:24px 7px 7px;gap:5px}
.app-game-row,
.app-stats-bar,
.app-next-card{border-radius:7px}
.app-game-thumb{width:26px;height:26px}
.app-stat-val{font-size:14px}
.app-stat-key,
.app-prog-hint{font-size:6px}
.app-feat{gap:10px;padding:7px 0}
.app-feat-num{font-size:9px}
.app-feat-title{font-size:15px;margin-bottom:2px}
.app-feat-body{font-size:12px;line-height:1.35}
.how-points,
.why-points,
.specs-showcase,
.collection-strip{margin-top:clamp(18px,4svh,34px)}
.how-point,
.why-point{padding:clamp(14px,2.8svh,22px) 0}
.how-num,
.why-value{margin-bottom:clamp(8px,2svh,16px)}
.how-point h3,
.why-point h3{font-size:clamp(22px,6vw,28px)}
.how-point p,
.why-point p{font-size:13px;line-height:1.4}
.varita .varita-vis{width:min(82vw,38svh,360px);margin-top:clamp(18px,4svh,34px)}
.nfc-modes{font-size:8px;row-gap:10px}
.draw-phone{width:min(118px,17svh)}
.card-render img{height:min(252px,36svh)}
.ai-caption{font-size:8px}
.collection-strip{padding-bottom:8px}
.collection-card{flex-basis:36%}
.collection-foot{margin-top:clamp(12px,3svh,24px);padding-top:14px}
.tier{padding:16px;gap:9px}
.tier .name{font-size:24px}
.tier .price b{font-size:36px}
.tier li{font-size:12px;line-height:1.3}
.tier .stock{font-size:8px}
.faq details{padding:12px 0}
.faq summary{font-size:18px}
.faq .answer{font-size:13px;line-height:1.45}
.footer-hero{padding-bottom:22px}
.footer-meta{grid-template-columns:1fr 1fr;padding-top:22px}
.footer-col h5{font-size:9px;margin-bottom:9px}
.footer-col ul{gap:6px;font-size:12px}
.footer-bottom{font-size:9px}
}
@media (max-width:420px){
:root{--nav-h:58px}
.btn-ghost{display:none}
.hero-signup .hs-row{gap:6px}
.hero-signup input{padding:8px 0}
.hero-signup .hs-cta{min-height:40px}
}
@media (max-height:820px){
.hero-meta{display:none}
}
@media (max-height:720px){
.hero-tag{display:none}
.hero-signup .hs-label,
.why-head .lead,
#specs .minimal-head .lead,
#tiers .sec-head .lead,
.collection-foot{display:none}
.app-prog-hint,
.app-next-card{display:none}
.spec-note{display:none}
.tier .stock{display:none}
.footer-bottom{display:none}
}
/* ============================================================
Mobile UI/UX coherence pass
============================================================ */
@media (max-width:680px){
:root{
--mobile-card-bg:rgba(20,20,22,.58);
--mobile-card-line:rgba(244,241,234,.10);
--mobile-card-radius:18px;
--mobile-glow:0 18px 48px -30px rgba(0,0,0,.9);
}
body{background:
radial-gradient(circle at 50% -10%,rgba(216,162,74,.05),transparent 36svh),
var(--bg);
}
.nav{background:rgba(13,13,15,.82)}
.nav-inner{height:58px}
.logo{gap:8px;font-size:17px}
.logo-img{width:22px;height:22px}
.nav-toggle{
width:40px;height:40px;border-radius:13px;
background:rgba(24,24,27,.72);
box-shadow:0 14px 30px -20px rgba(0,0,0,.9);
}
.mobile-menu{
padding:12px 18px 18px;
background:rgba(13,13,15,.96);
border-bottom:1px solid var(--line);
}
.mobile-menu a{
padding:13px 4px;
font-size:11px;
letter-spacing:.12em;
}
section[data-screen-label],
footer[data-screen-label]{
padding:calc(58px + var(--screen-y)) 0 calc(var(--screen-y) + 58px);
}
.kicker{
font-size:9px;
letter-spacing:.14em;
gap:8px;
}
.display{line-height:.98}
.h2{line-height:1.02}
.lead{max-width:32ch}
.minimal-head,
.collection-head,
.why-head{
max-width:340px;
}
/* The ticker is good desktop ambience, but on mobile it reads like a
second nav fighting the sticky CTA. Keep the first screen cleaner. */
.ticker{display:none}
.hero{
padding-bottom:calc(var(--screen-y) + 18px);
}
.hero-grid{align-content:center}
.stage{width:min(70vw,24svh,280px)}
.hero h1{max-width:10ch}
.hero-tag{max-width:30ch}
.hero-signup{
max-width:none;
gap:6px;
}
.hero-signup .hs-label{
display:none;
}
.hero-signup .hs-row{
flex-direction:row;
align-items:center;
border-radius:999px;
padding:5px 5px 5px 16px;
background:var(--mobile-card-bg);
box-shadow:var(--mobile-glow);
}
.hero-signup input{
font-size:14px;
min-height:40px;
padding:8px 0;
}
.hero-signup .hs-cta{
width:auto;
min-height:40px;
border-radius:999px;
padding:10px 14px;
font-size:9px;
}
.btn-gold{
min-height:48px;
border-radius:16px;
box-shadow:0 16px 38px -22px rgba(5,166,107,.8);
}
.demo-player,
.app-features,
.how-point,
.why-point,
.spec-callout,
.tier,
.faq,
.newsletter,
.draw-phone,
.app-phone{
background:var(--mobile-card-bg);
border:1px solid var(--mobile-card-line);
box-shadow:var(--mobile-glow);
}
.demo-player{border-radius:var(--mobile-card-radius)}
.demo-caption{padding:28px 18px 18px}
.app-layout{
grid-template-columns:1fr;
gap:clamp(12px,2.5svh,20px);
margin-top:clamp(14px,3svh,24px);
}
.app-phone-wrap{display:none}
.app-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
padding:8px;
border-radius:var(--mobile-card-radius);
border-top:1px solid var(--mobile-card-line);
border-bottom:1px solid var(--mobile-card-line);
}
.app-feat{
display:block;
padding:12px 10px;
border:0;
border-radius:13px;
background:rgba(255,255,255,.025);
}
.app-feat-num{
display:block;
padding:0;
margin-bottom:10px;
font-size:8px;
letter-spacing:.18em;
}
.app-feat-title{
font-size:16px;
line-height:1.04;
margin:0 0 6px;
}
.app-feat-body{
font-size:11.5px;
line-height:1.35;
}
.how-points,
.why-points{
border:0;
gap:8px;
}
.how-point,
.why-point{
border:1px solid var(--mobile-card-line);
border-radius:var(--mobile-card-radius);
padding:14px 14px 15px;
}
.how-num,
.why-value{
margin-bottom:10px;
font-size:8px;
letter-spacing:.18em;
}
.how-point h3,
.why-point h3{
font-size:24px;
}
.how-point p,
.why-point p{
font-size:12.5px;
max-width:none;
}
.varita .varita-vis{
width:min(86vw,36svh,340px);
padding:8px;
border-radius:24px;
background:linear-gradient(180deg,rgba(216,162,74,.035),rgba(255,255,255,.015));
border:1px solid var(--mobile-card-line);
}
.nfc-modes{
max-width:340px;
border:0;
padding:0;
gap:8px;
}
.nfc-modes span{
padding:8px 10px;
border:1px solid var(--mobile-card-line);
border-radius:999px;
background:rgba(255,255,255,.025);
}
#ai .ai-vis{
width:100%;
justify-content:space-between;
gap:8px;
padding:12px;
border-radius:24px;
background:var(--mobile-card-bg);
border:1px solid var(--mobile-card-line);
box-shadow:var(--mobile-glow);
}
.draw-phone{
background:#0a0a0c;
box-shadow:none;
}
.ai-badge{display:none}
.ai-caption{letter-spacing:.14em}
.collection-strip{
width:calc(100% + 36px);
margin-left:-18px;
margin-right:-18px;
padding:0 18px 10px;
gap:9px;
scroll-padding-inline:18px;
}
.collection-card{
flex-basis:34%;
border-radius:12px;
overflow:hidden;
}
.collection-card img{
filter:grayscale(1) contrast(1.08) drop-shadow(0 18px 20px rgba(0,0,0,.24));
}
.collection-foot{
border:0;
padding:0;
display:flex;
justify-content:center;
}
.collection-label{display:none}
.collection-link{
padding:10px 14px;
border:1px solid var(--mobile-card-line);
border-radius:999px;
background:rgba(255,255,255,.025);
}
.specs-showcase{
width:min(100%,360px);
}
.specs-diagram{
max-width:360px;
}
.spec-callout{
border:1px solid var(--mobile-card-line) !important;
border-radius:14px;
padding:10px 10px 11px;
background:var(--mobile-card-bg);
box-shadow:var(--mobile-glow);
}
.spec-callout::before{
left:10px;
}
.spec-label{
display:block;
letter-spacing:.14em;
}
.spec-callout strong{
line-height:1;
}
.tiers{
padding-bottom:10px;
scroll-padding-inline:18px;
}
.tiers::before{
content:"Swipe tiers →";
position:absolute;
right:20px;
top:-22px;
font-family:var(--mono);
font-size:8px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--text-2);
}
.tier{
flex-basis:min(78vw,310px);
border-radius:var(--mobile-card-radius);
}
.tier .pick{
min-height:46px;
border-radius:14px;
}
.faq{
padding:4px 12px;
border-radius:var(--mobile-card-radius);
border-top:1px solid var(--mobile-card-line);
}
.faq details{
padding:13px 0;
border-bottom:1px solid var(--mobile-card-line);
}
.faq summary{
font-size:17px;
align-items:flex-start;
}
.faq summary .num{
min-width:26px;
font-size:8px;
padding-top:5px;
}
.faq summary .plus{
font-size:25px;
transform-origin:center;
}
.faq .answer{
padding-left:26px;
font-size:12.5px;
max-width:none;
}
.footer-hero{
display:block;
padding-bottom:18px;
}
.footer-hero h3{
max-width:9ch;
margin-bottom:18px;
}
.footer-meta{
grid-template-columns:1fr 1fr;
gap:18px 20px;
}
.newsletter{
border-radius:18px;
}
.mobile-cta{
left:14px;
right:14px;
bottom:10px;
min-height:54px;
padding:8px 8px 8px 14px;
border-radius:18px;
background:rgba(13,13,15,.88);
border-color:rgba(5,166,107,.26);
box-shadow:0 16px 42px -24px rgba(0,0,0,.95),0 0 0 1px rgba(5,166,107,.10);
}
.mobile-cta.show{transform:translateY(0)}
.mc-price b{font-size:19px}
.mc-price s{font-size:9px}
.mc-sub{
font-size:8px;
letter-spacing:.12em;
max-width:18ch;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mc-btn{
min-height:42px;
padding:12px 14px;
border-radius:14px;
font-size:10px;
}
.nav.open ~ .mobile-cta{transform:translateY(120%)}
}
@media (max-width:680px) and (max-height:720px){
section[data-screen-label],
footer[data-screen-label]{
padding-bottom:calc(var(--screen-y) + 46px);
}
.hero-signup .hs-label,
.hero-tag,
.minimal-head .lead,
.collection-head .lead,
.why-head .lead{display:none}
.app-features{grid-template-columns:1fr 1fr}
.app-feat{padding:10px 9px}
.how-point,
.why-point,
.spec-callout{padding:9px 0 10px}
.tier li:nth-last-child(n+6){display:none}
.faq .answer{display:none}
}
/* Mobile polish, take 2: no extra card boxes.
Keep the full-screen/mobile sizing work, but remove the added rounded
containers. The UX pass here is detail/proportion/radius, not wrapping
every block in a card. */
@media (max-width:680px){
.demo-player,
.app-features,
.how-point,
.why-point,
.spec-callout,
.faq,
#ai .ai-vis,
.varita .varita-vis,
.nfc-modes span,
.collection-link{
background:transparent;
box-shadow:none;
}
.app-features,
.how-points,
.why-points,
.specs-showcase,
.faq{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.app-layout{
grid-template-columns:minmax(136px,.42fr) 1fr;
align-items:center;
gap:18px;
}
.app-phone-wrap{display:flex}
.app-phone{
width:min(132px,34vw,22svh);
border-radius:22px;
padding:7px 5px;
background:linear-gradient(145deg,#333338 0%,#111114 15%,#070708 72%,#29292e 100%);
border:1px solid #414147;
box-shadow:0 22px 42px -26px rgba(0,0,0,.95),inset 1px 1px 0 rgba(255,255,255,.07),inset -1px -1px 0 rgba(0,0,0,.8);
}
.app-shot-phone-main .app-phone-real{
width:min(132px,34vw,22svh);
}
.app-shot-wrap{
min-height:auto;
}
.app-shot-phone-peek,
.app-shot-phone-catalog{
display:none;
}
.app-shot-phone figcaption{
display:none;
}
.app-phone::before{
left:-3px;
top:25%;
width:1px;
height:8px;
box-shadow:0 14px 0 #202024;
}
.app-phone::after{
right:-3px;
top:34%;
width:1px;
height:14px;
}
.app-notch{
top:6px;
width:38px;
height:9px;
border-radius:5px;
}
.app-screen{
border-radius:15px;
padding:22px 7px 7px;
}
.app-game-row,
.app-stats-bar,
.app-next-card{
border-radius:5px;
}
.app-features{
display:flex;
flex-direction:column;
gap:0;
padding:0;
border-left:0;
border-right:0;
border-radius:0;
}
.app-feat{
display:flex;
gap:10px;
padding:8px 0;
border-radius:0;
border-bottom:1px solid var(--line);
background:transparent;
}
.app-feat:last-child{border-bottom:0}
.app-feat-num{
flex:0 0 auto;
margin:0;
padding-top:3px;
}
.how-points,
.why-points,
.specs-diagram{
gap:0;
}
.how-point,
.why-point{
border:0;
border-radius:0;
padding:14px 0 15px;
border-bottom:1px solid var(--line);
}
.how-point:last-child,
.why-point:last-child{border-bottom:0}
.varita .varita-vis{
width:min(82vw,37svh,340px);
padding:0;
border:0;
border-radius:0;
}
.varita-vis .phone{
border-radius:20px;
padding:5px;
}
.varita-vis .phone::before{
left:-3px;
top:25%;
width:1px;
height:9px;
box-shadow:0 15px 0 #202024;
}
.varita-vis .phone::after{
right:-3px;
top:34%;
width:1px;
height:15px;
}
.varita-vis .phone .screen{border-radius:15px}
.varita-vis .phone .screen::after{
bottom:5px;
height:2px;
}
.varita-vis .phone .notch{
width:38px;
height:9px;
border-radius:5px;
}
.varita-vis .p-card{border-radius:5px}
/* Give the vortex a little more room inside the smaller mobile mock. */
.varita-vis .phone{
width:42%;
}
.nfc-vortex-messages{
font-size:6.5px;
}
.nfc-modes{
border-top:1px solid var(--line);
padding-top:12px;
gap:10px 12px;
}
.nfc-modes span{
padding:0;
border:0;
border-radius:0;
}
#ai .ai-vis{
width:fit-content;
max-width:100%;
margin-inline:auto;
justify-content:center;
gap:clamp(8px,2.8vw,12px);
padding:0;
border:0;
border-radius:0;
}
.draw-phone{
border-radius:16px;
padding:5px;
background:linear-gradient(145deg,#333338 0%,#111114 15%,#070708 72%,#29292e 100%);
border:1px solid #414147;
box-shadow:0 20px 38px -26px rgba(0,0,0,.95),inset 1px 1px 0 rgba(255,255,255,.07),inset -1px -1px 0 rgba(0,0,0,.8);
}
.draw-phone::before{top:7px;height:9px}
.draw-phone::after{
right:-3px;
top:34%;
width:1px;
height:13px;
}
.draw-phone-volume{
left:-3px;
top:25%;
width:1px;
height:7px;
box-shadow:0 13px 0 #202024;
}
.draw-phone-home{bottom:7px;height:2px}
.draw-phone img{border-radius:11px}
.collection-card{
border-radius:0;
overflow:visible;
}
.collection-strip{
padding:24px 18px 10px;
}
.collection-badge{
top:-24px;
left:50%;
transform:translateX(-50%);
padding:5px 8px 4px;
background:rgba(13,13,15,.94);
border:1px solid var(--line-2);
border-radius:4px;
box-shadow:none;
font-size:9px;
line-height:1;
letter-spacing:.1em;
white-space:nowrap;
color:var(--text-2);
}
.collection-card.is-special .collection-badge{
color:var(--ink);
border-color:rgba(216,162,74,.42);
}
.collection-link{
border:0;
border-radius:0;
padding:0;
}
.specs-showcase{
padding:4px 0;
border-left:0;
border-right:0;
}
.spec-callout{
border:0 !important;
border-top:1px solid var(--line) !important;
border-radius:0;
padding:10px 0 11px;
}
.spec-callout:first-of-type{border-top:0 !important}
.faq{
padding:0;
border-left:0;
border-right:0;
border-radius:0;
}
.faq details{
padding:13px 0;
border-bottom:1px solid var(--line);
}
.faq details:last-child{border-bottom:0}
.faq .answer{padding-left:26px}
/* FAQ is a full mobile screen, but its content should read from the top
like a native accordion instead of a shrunken, vertically centred
desktop list. */
#faq{
align-items:flex-start;
justify-content:center;
padding-top:calc(58px + clamp(24px,5svh,42px));
}
#faq .sec-head{
margin-bottom:clamp(22px,4svh,32px);
}
#faq .sec-head .h2{
margin-top:12px !important;
font-size:clamp(32px,9vw,42px);
}
#faq .faq{
width:100%;
}
#faq .faq details{
padding:0;
}
#faq .faq summary{
min-height:58px;
padding:12px 0;
align-items:center;
gap:10px;
font-family:var(--sans);
font-size:clamp(14px,4vw,16px);
font-weight:500;
line-height:1.35;
letter-spacing:0;
}
#faq .faq summary .num{
min-width:25px;
padding:2px 0 0;
font-size:8px;
line-height:1;
}
#faq .faq summary .plus{
width:24px;
font-family:var(--mono);
font-size:18px;
font-style:normal;
font-weight:400;
line-height:1;
text-align:center;
}
#faq .faq details[open] summary{
color:var(--ink);
}
#faq .faq .answer{
margin:0;
padding:0 28px 16px 35px;
font-size:13px;
line-height:1.5;
}
.mobile-cta{
border-radius:12px;
background:rgba(13,13,15,.9);
}
.mc-btn{border-radius:9px}
}
/* ── Specs below 980px: keep the same vertical reading flow as the rest of
the page. The exploded render gets the full content width, followed by
the three hardware facts as a simple list; arrows stay desktop-only. ── */
@media (max-width:980px){
.specs-showcase{width:min(100%,720px);margin:clamp(24px,5svh,44px) auto 0}
.specs-diagram{
display:grid;
grid-template-columns:minmax(0,1fr);
align-items:stretch;
gap:0;
width:100%;
aspect-ratio:auto;
height:auto;
max-width:720px;
margin:0 auto;
}
.specs-arrows,
.specs-diagram::before{display:none !important}
.specs-card-render{
position:relative;left:auto;top:auto;transform:none;
grid-row:auto;grid-column:1;justify-self:center;
width:min(100%,620px);
max-height:none;
margin:0 auto clamp(28px,6svh,52px);
}
.spec-callout{
position:relative;
inset:auto;
width:100%;
max-width:none;
margin:0;
padding:clamp(18px,3.5svh,28px) 0;
border:0 !important;
border-top:1px solid var(--line) !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
}
.spec-callout:last-of-type{border-bottom:1px solid var(--line) !important}
.spec-callout::before{
content:none;
display:none !important;
}
.spec-label{font-size:10px;letter-spacing:.14em;margin-bottom:6px}
.spec-callout strong{margin-top:0;font-size:clamp(26px,7vw,40px);line-height:1.02}
.spec-note{display:block !important;margin-top:7px;font-size:13px;line-height:1.45}
}
/* Phones: let the render use every available pixel; all copy remains in the
document so the section can be read completely by scrolling. */
@media (max-width:600px){
.specs-showcase{width:100%}
.specs-diagram{max-width:none}
.specs-card-render{width:100%;margin-bottom:clamp(24px,6svh,40px)}
.spec-note{display:block !important}
}
/* ============================================================
Ambient ASCII dither
One tiny repeating SVG is rasterized once by the browser. The only live
animation is a compositor-friendly translate3d on this fixed layer: no
canvas, no requestAnimationFrame and no animated filters/backgrounds.
============================================================ */
body{position:relative;isolation:isolate;background:#101012}
body::before{
content:"";
position:fixed;
z-index:0;
inset:-8vmax;
pointer-events:none;
contain:strict;
opacity:.78;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320' viewBox='0 0 640 320'%3E%3Cg font-family='monospace' font-size='10' letter-spacing='3' fill='%23D8A24A' fill-opacity='.38'%3E%3Ctext x='8' y='18'%3E...::..++...::::....--...%3C/text%3E%3Ctext x='98' y='42'%3E....--::..%2B%2B%2B...::....%3C/text%3E%3Ctext x='246' y='66'%3E..::....%23%23..::..--....%3C/text%3E%3Ctext x='38' y='90'%3E....::--....%2B...::....%3C/text%3E%3Ctext x='344' y='114'%3E...%2B%2B..::....--::...%3C/text%3E%3Ctext x='146' y='138'%3E..::..%2B%2B%23%23%2B..::....%3C/text%3E%3Ctext x='470' y='162'%3E....::..--...%2B...%3C/text%3E%3Ctext x='16' y='186'%3E..--....::..%2B%2B...::....%3C/text%3E%3Ctext x='282' y='210'%3E...::..%23%2B%2B%23..--....%3C/text%3E%3Ctext x='88' y='234'%3E....%2B...::....--::...%3C/text%3E%3Ctext x='398' y='258'%3E..::--....%2B%2B...::..%3C/text%3E%3Ctext x='202' y='282'%3E...::..--..%23%23%2B....%3C/text%3E%3Ctext x='8' y='306'%3E....--::...%2B....::....%3C/text%3E%3C/g%3E%3Cg font-family='monospace' font-size='9' letter-spacing='4' fill='%23F4F1EA' fill-opacity='.24'%3E%3Ctext x='372' y='30'%3E. : . . : %2B . .%3C/text%3E%3Ctext x='34' y='126'%3E. . %2B : . . -- .%3C/text%3E%3Ctext x='430' y='222'%3E: . . %2B . : . .%3C/text%3E%3C/g%3E%3C/svg%3E");
background-repeat:repeat;
background-size:640px 320px;
transform:translate3d(-4%,-2.5%,0);
will-change:transform;
animation:ascii-drift 10s linear infinite alternate;
}
@keyframes ascii-drift{
to{transform:translate3d(4%,2.5%,0)}
}
/* Let the ambient field breathe through without reducing text contrast. */
section,.trust,footer{background-color:rgba(22,22,24,.62)}
section,footer{z-index:1}
@media (max-width:680px){
body::before{opacity:.60;background-size:520px 260px;animation-duration:14s}
section,.trust,footer{background-color:rgba(22,22,24,.68)}
}
@media (prefers-reduced-motion:reduce){
body::before{animation:none;transform:none;will-change:auto}
}
/* Static background restored. */
body{background:var(--bg)}
body::before,body::after{content:none;display:none}
section,.trust,footer{background-color:var(--bg)}
/* ============================================================
Final responsive stability pass
Narrow and touch-oriented layouts use natural document flow. Fixed
viewport heights made short phones and landscape screens clip content,
while page-level pan-y blocked the horizontal card/tier carousels.
============================================================ */
@media (max-width:980px){
:root{--nav-h:calc(64px + env(safe-area-inset-top,0px))}
html{
overflow-x:clip;
scroll-padding-top:0;
scroll-snap-type:none;
}
body{
overflow-x:clip;
-webkit-text-size-adjust:100%;
touch-action:auto;
}
body.menu-open{overflow:hidden}
.wrap{
padding-left:max(22px,env(safe-area-inset-left,0px));
padding-right:max(22px,env(safe-area-inset-right,0px));
}
.nav{z-index:1000;padding-top:env(safe-area-inset-top,0px)}
.logo{min-height:44px}
section[data-screen-label],
footer[data-screen-label]{
display:block;
height:auto;
min-height:0;
overflow:visible;
padding-top:calc(var(--nav-h) + clamp(24px,5svh,44px));
padding-bottom:clamp(60px,10svh,96px);
scroll-margin-top:0;
scroll-snap-align:none;
scroll-snap-stop:normal;
}
section.hero{
display:flex;
min-height:100svh;
padding-top:calc(var(--nav-h) + clamp(12px,3svh,28px));
padding-bottom:clamp(48px,8svh,76px);
}
#app,#games{height:auto;min-height:0;overflow:visible;padding-bottom:clamp(60px,10svh,96px)}
footer[data-screen-label]{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.hero h1{line-height:1.04}
.hero h1 .line{overflow:visible}
.hero-tag,
.minimal-head .lead,
.collection-head .lead,
.why-head .lead,
#specs .minimal-head .lead,
#tiers .sec-head .lead{display:block}
.collection-foot,.footer-bottom{display:flex}
.world-panel-copy p,.lore-copy p{display:block}
.tiers .tier li,.tier .stock{display:flex}
#faq .faq .answer{display:block}
.spec-note{display:block}
/* Essential content never depends on an intersection animation on mobile. */
.reveal,.reveal.reveal-pending{opacity:1;transform:none;transition:none}
.app-layout{
grid-template-columns:minmax(180px,.62fr) 1fr;
align-items:center;
gap:clamp(22px,4vw,40px);
}
.app-shot-wrap{width:100%;min-height:auto}
.app-shot-phone-peek,.app-shot-phone-catalog{display:none}
.app-shot-phone-main .app-phone-real{width:min(190px,28vw,48svh)}
.tiers{
position:relative;
display:flex;
gap:12px;
margin-right:-22px;
margin-left:-22px;
padding:6px 22px 12px;
overflow-x:auto;
overscroll-behavior-inline:contain;
scroll-padding-inline:22px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
touch-action:pan-x pan-y;
-webkit-overflow-scrolling:touch;
}
.tiers::-webkit-scrollbar{display:none}
.tier{flex:0 0 min(78vw,340px);scroll-snap-align:center}
.collection-strip{touch-action:pan-x pan-y}
.mobile-cta{display:none}
.tier .pick,.mc-btn,.btn-gold{min-height:48px}
.footer-col a{display:flex;align-items:center;min-height:44px}
img{-webkit-user-drag:none}
}
@media (max-width:880px){
.mobile-menu{
height:calc(100dvh - var(--nav-h));
max-height:calc(100dvh - var(--nav-h));
overflow-y:auto;
overscroll-behavior:contain;
background:#0d0d0f;
padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
}
.mobile-menu a{display:flex;align-items:center;min-height:44px;padding:11px 4px}
}
@media (max-width:680px){
:root{--nav-h:calc(58px + env(safe-area-inset-top,0px))}
.wrap{
padding-left:max(18px,env(safe-area-inset-left,0px));
padding-right:max(18px,env(safe-area-inset-right,0px));
}
.nav-inner{height:58px}
.nav-toggle{width:44px;height:44px;min-width:44px}
.app-layout{gap:16px}
.app-shot-phone-main .app-phone-real{width:min(132px,34vw,22svh)}
.app-feat{min-height:72px}
.app-feat-title{font-size:15px;line-height:1.08}
.app-feat-body{font-size:12.5px;line-height:1.4}
#faq .faq summary{min-height:56px;padding-top:14px;padding-bottom:14px}
}
@media (max-width:360px){
.app-layout{grid-template-columns:1fr;gap:24px}
.app-shot-wrap{justify-content:center}
.app-shot-phone-main .app-phone-real{width:min(154px,52vw)}
.app-feat{min-height:0;padding:12px 0}
}
@media (max-width:980px) and (max-height:600px){
.ticker{display:none}
}