/* Gaffer XI app landing page (/app). The app's own look: warm dark, orange, Anton titles,
   Bebas kickers, Archivo body. Self-contained; fonts are self-hosted (CSP font-src 'self'). */
@font-face{ font-family:'Anton'; src:url(/app/fonts/anton.woff2) format('woff2'); font-display:swap; }
@font-face{ font-family:'Bebas Neue'; src:url(/app/fonts/bebas.woff2) format('woff2'); font-display:swap; }
@font-face{ font-family:'Archivo'; src:url(/app/fonts/archivo.woff2) format('woff2'); font-weight:100 900; font-display:swap; }

:root{
  --bg:#14130F; --bg-2:#1C1B19; --s1:#23211D; --s2:#2C2925; --line:rgba(244,236,216,.10); --line-2:rgba(244,236,216,.18);
  --text:#F4ECD8; --text-2:rgba(244,236,216,.78); --muted:rgba(244,236,216,.56);
  --accent:#F26716; --accent-deep:#B8420A; --gold:#E2B44A; --green:#3DBE7A;
  --fd:'Anton', Impact, 'Arial Narrow', sans-serif; --fk:'Bebas Neue', 'Arial Narrow', sans-serif;
  --fb:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease:cubic-bezier(.2,.9,.3,1);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--fb); font-size:16px; line-height:1.55; overflow-x:hidden; }
img, video{ display:block; max-width:100%; }
a{ color:inherit; }
h1, h2, h3{ margin:0; font-weight:400; }
p{ margin:0; }

/* hidden means hidden, whatever the display of the element */
[hidden]{ display:none !important; }

.kicker{ font-family:var(--fk); font-size:17px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.center{ text-align:center; }
h2{ font-family:var(--fd); font-size:clamp(34px, 7vw, 56px); line-height:1; text-transform:uppercase; letter-spacing:.005em; margin-top:8px; }
h3{ font-family:var(--fd); font-size:24px; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; }
section{ padding:72px 16px; max-width:1120px; margin:0 auto; }

/* ---------- top bar ---------- */
.bar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px; background:rgba(20,19,15,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.bar-brand img{ width:112px; height:auto; }
.bar-nav{ display:flex; align-items:center; gap:6px; }
.bar-cta{ margin-left:6px; font-weight:800; font-size:14px; text-decoration:none; color:#fff; background:var(--accent); padding:10px 16px; border-radius:99px; box-shadow:0 3px 0 var(--accent-deep); transition:transform .12s, box-shadow .12s; }
.bar-cta:active{ transform:translateY(3px); box-shadow:0 0 0 var(--accent-deep); }

/* ---------- hero ---------- */
.hero{ position:relative; max-width:none; padding:28px 16px 40px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.hero-bg .glow{ position:absolute; left:50%; top:48%; width:1100px; height:900px; margin:-450px 0 0 -550px; background:radial-gradient(50% 45% at 50% 50%, rgba(242,103,22,.36), rgba(242,103,22,.08) 55%, transparent 72%); }
.hero-bg .rays{ position:absolute; left:50%; top:52%; width:1500px; height:1500px; margin:-750px 0 0 -750px;
  background:repeating-conic-gradient(rgba(255,231,160,.07) 0 7deg, transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle, #000 18%, transparent 60%); mask:radial-gradient(circle, #000 18%, transparent 60%); animation:spin 90s linear infinite; }
.hero-in{ position:relative; max-width:1120px; margin:0 auto; display:grid; gap:34px; align-items:center; }
.hero-tx{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
h1{ font-family:var(--fd); font-size:clamp(56px, 15vw, 104px); line-height:.92; text-transform:uppercase; letter-spacing:.005em; }
h1 em{ font-style:normal; display:inline-block; margin-top:8px; padding:4px 16px 2px; color:#fff; background:var(--accent); border-radius:14px; transform:rotate(-2.5deg); box-shadow:0 8px 0 var(--accent-deep), 0 20px 40px rgba(242,103,22,.35); }
.lead{ font-size:18px; color:var(--text-2); max-width:34ch; }
.browser-link{ font-size:15px; font-weight:600; color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px; }
.browser-link:hover{ color:var(--text); }

/* store buttons (placeholders until the official App Store / Google Play badges are in) */
.stores{ display:flex; flex-wrap:wrap; gap:10px; }
.store{ position:relative; display:inline-flex; align-items:center; gap:10px; min-width:186px; padding:10px 18px 10px 14px; border-radius:14px; text-decoration:none;
  color:#fff; background:#0B0A08; border:1.5px solid rgba(244,236,216,.32); box-shadow:0 4px 0 rgba(0,0,0,.55); transition:transform .12s, box-shadow .12s, border-color .15s; }
.store svg{ width:26px; height:26px; flex:0 0 auto; }
.store-tx{ display:flex; flex-direction:column; line-height:1.05; }
.store-tx small{ font-size:11px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.8); }
.store-tx b{ font-size:20px; font-weight:800; letter-spacing:-.01em; }
.store:active{ transform:translateY(4px); box-shadow:0 0 0 rgba(0,0,0,.55); }
.store:hover{ border-color:rgba(244,236,216,.6); }
.store.primary{ border-color:var(--accent); box-shadow:0 4px 0 var(--accent-deep), 0 10px 30px rgba(242,103,22,.25); }
.store .soon{ position:absolute; top:-9px; right:-8px; font:400 12px/1 var(--fk); letter-spacing:.12em; padding:4px 8px 3px; border-radius:99px; color:#2B1B07; background:var(--gold); transform:rotate(4deg); box-shadow:0 2px 6px rgba(0,0,0,.4); font-style:normal; }
html.live .store .soon{ display:none; }

.qr{ display:none; align-items:center; gap:14px; margin-top:8px; padding:12px 16px 12px 12px; border-radius:16px; background:var(--s1); border:1px solid var(--line); }
.qr img{ width:96px; height:96px; padding:6px; background:#F4ECD8; border-radius:10px; }
.qr > span{ display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--text-2); max-width:24ch; }
.qr b{ color:var(--text); font-size:15px; }

/* phone frame (generic, no device brand) */
.phone{ position:relative; width:min(300px, 72vw); aspect-ratio:9/19.5; padding:10px; border-radius:46px; background:linear-gradient(160deg,#3A3631,#141210 60%,#2A2723);
  box-shadow:0 0 0 2px rgba(255,255,255,.06) inset, 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6); }
.phone::before{ content:''; position:absolute; z-index:2; top:20px; left:50%; width:30%; height:22px; margin-left:-15%; border-radius:99px; background:#0A0908; }
.phone-screen{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:36px; background:#0E0D0B; }
.phone.sm{ width:min(230px, 62vw); padding:8px; border-radius:36px; }
.phone.sm::before{ top:16px; height:16px; }
.phone.sm .phone-screen{ border-radius:28px; }
.hero-phone{ position:relative; justify-self:center; }
.tilt{ transform:rotate(3deg); animation:bob 5s ease-in-out infinite; }
.chip{ position:absolute; z-index:3; font:400 18px/1 var(--fd); letter-spacing:.04em; text-transform:uppercase; padding:9px 14px 7px; border-radius:12px; box-shadow:0 8px 0 rgba(0,0,0,.35), 0 18px 30px rgba(0,0,0,.4); }
.chip.c1{ left:-22px; top:26%; color:#fff; background:var(--accent); transform:rotate(-8deg); animation:pop .6s .5s var(--ease) both; }
.chip.c2{ right:-18px; top:9%; display:flex; align-items:center; gap:7px; font:700 13px/1 var(--fb); letter-spacing:.08em; color:#fff; background:#1E1C18; border:1px solid var(--line-2); transform:rotate(5deg); animation:pop .6s .7s var(--ease) both; }
.chip.c2 .dot{ width:8px; height:8px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 0 rgba(229,72,77,.6); animation:pulse 1.6s ease-out infinite; }

/* ---------- numbers ---------- */
.stats{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; padding-top:24px; padding-bottom:24px; }
.stat{ display:flex; flex-direction:column; gap:2px; padding:18px 16px; border-radius:18px; background:var(--s1); border:1px solid var(--line); }
.stat b{ font-family:var(--fd); font-weight:400; font-size:clamp(38px, 9vw, 54px); line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; }
.stat span{ font-size:14px; color:var(--text-2); }

/* ---------- steps ---------- */
.steps{ display:grid; gap:44px; margin-top:40px; }
.step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.step .phone{ margin-bottom:10px; }
.step-n{ position:absolute; top:-14px; left:calc(50% - min(115px, 31vw) - 10px); width:46px; height:46px; display:grid; place-items:center; font:400 26px/1 var(--fd); color:#fff; background:var(--accent); border-radius:14px; transform:rotate(-6deg); box-shadow:0 5px 0 var(--accent-deep); }
.step p{ color:var(--text-2); max-width:32ch; }

/* ---------- collecting ---------- */
.collect .sub{ max-width:52ch; margin:14px auto 0; text-align:center; color:var(--text-2); font-size:17px; }
.fins{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:780px; margin:32px auto 0; }
.fin{ position:relative; overflow:hidden; margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px 12px; border-radius:16px; background:#403139; border:1px solid rgba(255,255,255,.06); }
.fin img{ width:100%; max-width:118px; height:auto; filter:drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.fin figcaption{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.fin b{ font:400 15px/1 var(--fk); letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); }
.fin .gx{ font:800 15px/1 var(--fb); color:var(--text); font-variant-numeric:tabular-nums; }
.fin.r{ box-shadow:inset 0 0 0 1.5px rgba(255,140,200,.55), 0 10px 26px rgba(255,94,200,.18); }
.fin.x{ box-shadow:inset 0 0 0 1.5px #B9A4FF, 0 12px 30px rgba(107,77,255,.35); }
.fin.x .gx{ color:#CFC2FF; }
.fin.r::after, .fin.x::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); background-size:260% 100%; animation:sheen 3.8s ease-in-out infinite; }
.fin.x::after{ animation-delay:1.2s; }
.fins-note{ max-width:52ch; margin:16px auto 0; text-align:center; font-size:14px; color:var(--muted); }
.loop{ margin-top:52px; }
.tiers{ display:flex; gap:6px; justify-content:center; margin-top:4px; }
.tiers i{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; font:400 14px/1 var(--fd); font-style:normal; color:#1C1B19; background:var(--c); box-shadow:0 3px 0 rgba(0,0,0,.35); }
.feat img.mid{ object-position:center 30%; }
@keyframes sheen{ 0%,55%{ background-position:100% 0; } 100%{ background-position:-60% 0; } }
@media (min-width:760px){ .fins{ grid-template-columns:repeat(6, 1fr); } }
@media (prefers-reduced-motion:reduce){ .fin.r::after, .fin.x::after{ animation:none; display:none; } }

/* ---------- only in the app ---------- */
.feats{ display:grid; gap:14px; margin-top:36px; }
.feat{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; padding:14px; border-radius:20px; background:linear-gradient(160deg, var(--s2), var(--s1)); border:1px solid var(--line); }
.feat img{ width:96px; height:150px; object-fit:cover; object-position:top; border-radius:14px; box-shadow:0 10px 20px rgba(0,0,0,.45); }
.feat img.wide{ object-position:center 20%; }
.feat h3{ font-size:21px; }
.feat p{ margin-top:6px; font-size:15px; color:var(--text-2); }

/* ---------- app vs browser ---------- */
.vs-table{ margin:30px auto 0; max-width:640px; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--s1); }
.vs-row{ display:grid; grid-template-columns:1fr 70px 80px; align-items:center; gap:8px; padding:13px 16px; border-top:1px solid var(--line); font-size:15px; }
.vs-row.head{ border-top:0; background:var(--s2); font:400 15px/1 var(--fk); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.vs-row.head span:nth-child(2){ color:var(--accent); }
.vs-row > *:nth-child(n+2){ justify-self:center; }
.vs-row b{ font-family:var(--fd); font-weight:400; font-size:20px; }
.vs-row b:nth-of-type(1){ color:var(--accent); }
.vs-row i{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; }
.vs-row i.y{ background:rgba(61,190,122,.18); box-shadow:inset 0 0 0 1.5px var(--green); }
.vs-row i.y::after{ content:''; width:10px; height:6px; margin-top:-3px; border-left:2.5px solid var(--green); border-bottom:2.5px solid var(--green); transform:rotate(-45deg); }
.vs-row i.n{ background:rgba(244,236,216,.06); }
.vs-row i.n::after{ content:''; width:10px; height:2.5px; border-radius:2px; background:var(--muted); }

/* ---------- faq ---------- */
.faq details{ max-width:720px; margin:10px auto 0; border-radius:16px; background:var(--s1); border:1px solid var(--line); }
.faq details:first-of-type{ margin-top:28px; }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; font-weight:700; font-size:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; flex:0 0 auto; font:400 24px/1 var(--fd); color:var(--accent); transition:transform .2s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 18px 16px; color:var(--text-2); }
.faq a{ color:var(--accent); }

/* ---------- final ---------- */
.final{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding-bottom:110px; }
.final-icon{ width:96px; height:96px; border-radius:24px; box-shadow:0 18px 40px rgba(242,103,22,.35); }
.final p{ color:var(--text-2); }
.final .stores{ justify-content:center; margin-top:6px; }

/* ---------- download dock (phones) ---------- */
.dock{ position:fixed; z-index:60; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom) + 12px); display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px;
  border-radius:18px; background:rgba(30,28,24,.96); border:1px solid var(--line-2); box-shadow:0 18px 40px rgba(0,0,0,.55); transform:translateY(140%); transition:transform .35s var(--ease); }
.dock.on{ transform:none; }
.dock img{ width:40px; height:40px; border-radius:10px; }
.dock > span{ flex:1; display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.dock b{ font-size:15px; } .dock small{ font-size:12px; color:var(--muted); }
.dock-cta{ font-weight:800; font-size:14px; text-decoration:none; color:#fff; background:var(--accent); padding:11px 18px; border-radius:12px; box-shadow:0 3px 0 var(--accent-deep); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding:28px 16px calc(env(safe-area-inset-bottom) + 96px); text-align:center; color:var(--muted); font-size:13px; }
.foot nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-bottom:12px; }
.foot nav a{ color:var(--text-2); text-decoration:none; }
.foot p{ max-width:60ch; margin:0 auto; }

/* ---------- reveal on scroll ---------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes bob{ 0%,100%{ transform:rotate(3deg) translateY(0); } 50%{ transform:rotate(3deg) translateY(-10px); } }
@keyframes pop{ from{ opacity:0; transform:scale(.4) rotate(-20deg); } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(229,72,77,.55); } 80%,100%{ box-shadow:0 0 0 8px rgba(229,72,77,0); } }

/* ---------- wider screens ---------- */
@media (min-width:760px){
  .stats{ grid-template-columns:repeat(4, 1fr); }
  .steps{ grid-template-columns:repeat(3, 1fr); gap:28px; }
  .feats{ grid-template-columns:repeat(2, 1fr); }
  .dock{ display:none !important; }
}
@media (min-width:960px){
  .hero{ padding:64px 24px 80px; }
  .hero-in{ grid-template-columns:1.1fr .9fr; gap:40px; }
  .phone{ width:320px; }
  .feats{ grid-template-columns:repeat(3, 1fr); }
  .feat{ grid-template-columns:1fr; align-items:start; padding:16px; }
  .feat img{ width:100%; height:240px; }
  .qr{ display:flex; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rays, .tilt, .chip, .chip .dot{ animation:none !important; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .dock, .faq summary::after, .store, .bar-cta{ transition:none; }
}

/* =====================================================================
   v2: the ultimate version. A stadium at night, foil cards in the air,
   a ticker, a pack you can tear open, mode-coloured features, a face-off.
   ===================================================================== */

/* hero: floodlights, crowd, sparks */
.hero{ background:radial-gradient(120% 70% at 50% 0%, #2A1A10 0%, var(--bg) 60%); }
.beam{ position:absolute; top:-10%; width:46%; height:120%; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:linear-gradient(180deg, rgba(255,236,190,.55), rgba(255,236,190,0) 70%); -webkit-mask:linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent); mask:linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent); filter:blur(18px); }
.beam.l{ left:-6%; transform-origin:0 0; transform:rotate(-18deg); animation:sweepL 9s ease-in-out infinite; }
.beam.r{ right:-6%; transform-origin:100% 0; transform:rotate(18deg); animation:sweepR 11s ease-in-out infinite; }
.crowd{ position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 50% 100%, rgba(242,103,22,.25), transparent 70%), radial-gradient(5px 5px at 10px 12px, rgba(255,220,170,.35) 50%, transparent 52%) 0 0/22px 18px;
  -webkit-mask:linear-gradient(0deg, #000 30%, transparent); mask:linear-gradient(0deg, #000 30%, transparent); }
.sparks i{ position:absolute; bottom:-10px; left:var(--x); width:4px; height:4px; border-radius:50%; background:#FFD58A; box-shadow:0 0 10px 2px rgba(255,180,90,.8); opacity:0; animation:rise var(--t) var(--d) linear infinite; }
h1 em{ background:linear-gradient(180deg, #FF8A3D, #F26716 55%, #D9530C); }
.kicker{ text-shadow:0 0 18px rgba(242,103,22,.35); }

/* foil cards around the phone */
.fly{ position:absolute; z-index:1; width:118px; height:auto; filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.fly.f1{ left:-70px; bottom:12%; transform:rotate(-14deg); animation:floatA 6s ease-in-out infinite; }
.fly.f2{ right:-74px; top:30%; width:104px; transform:rotate(12deg); animation:floatB 7s ease-in-out infinite; }
.fly.f3{ left:-58px; top:6%; width:86px; transform:rotate(-6deg); opacity:.9; animation:floatB 8s 1s ease-in-out infinite; }
.hero-phone .phone{ z-index:2; }
.hero-phone::before{ content:''; position:absolute; z-index:0; left:50%; top:50%; width:150%; height:85%; transform:translate(-50%,-50%); border-radius:50%;
  background:conic-gradient(from 0deg, rgba(185,164,255,.0), rgba(185,164,255,.35), rgba(111,216,255,.3), rgba(255,138,226,.32), rgba(255,231,160,.3), rgba(185,164,255,.0)); filter:blur(40px); animation:spin 14s linear infinite; }
.stamp{ position:absolute; z-index:4; right:-14px; bottom:4%; display:grid; place-items:center; width:104px; height:104px; border-radius:50%; text-align:center;
  font:400 17px/1 var(--fd); text-transform:uppercase; letter-spacing:.02em; color:#2B1B07; background:radial-gradient(circle at 35% 30%, #FFE7A3, #E9BE45 55%, #B8862A);
  box-shadow:0 0 0 4px #1C1B19, 0 0 0 6px #E9BE45, 0 14px 26px rgba(0,0,0,.5); transform:rotate(12deg); animation:stampIn .7s 1.1s cubic-bezier(.2,1.6,.3,1) both; }
.store.primary{ animation:glowPulse 2.6s ease-in-out infinite; }

/* numbers + ticker */
.stats .stat{ background:linear-gradient(160deg, #2A241D, var(--s1)); border-color:rgba(233,190,69,.18); }
.stat b{ background:linear-gradient(180deg, #FFE7A3, #E9BE45 60%, #B8862A); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 12px rgba(233,190,69,.25)); }
.ticker{ position:relative; overflow:hidden; margin:18px -20px 0; transform:rotate(-2.2deg); background:linear-gradient(90deg, #D9530C, #F26716, #FF8A3D, #F26716); box-shadow:0 10px 0 #8A2E05, 0 24px 40px rgba(0,0,0,.4); }
.ticker-track{ display:flex; width:max-content; gap:22px; padding:14px 0 12px; animation:ticker 38s linear infinite; }
.ticker-track span{ font:400 24px/1 var(--fd); text-transform:uppercase; letter-spacing:.02em; color:#fff; white-space:nowrap; text-shadow:0 2px 0 rgba(0,0,0,.2); }
.ticker-track i{ font-style:normal; color:#FFE7A3; font-size:18px; }

/* tear a pack open */
.pack-game{ display:grid; gap:22px; align-items:center; justify-items:center; max-width:820px; margin:44px auto 0; padding:26px 18px; border-radius:26px;
  background:radial-gradient(90% 120% at 30% 40%, rgba(107,77,255,.28), transparent 60%), linear-gradient(160deg, #241B33, #15121C); border:1px solid rgba(185,164,255,.25); box-shadow:0 30px 60px rgba(0,0,0,.4); }
.pack-stage{ position:relative; width:200px; height:270px; display:grid; place-items:center; perspective:900px; }
.pack{ position:relative; width:170px; height:240px; border:0; padding:0; cursor:pointer; border-radius:18px; background:none; -webkit-tap-highlight-color:transparent; transition:transform .2s; }
.pack:active{ transform:scale(.97); }
.pack-body, .pack-top{ position:absolute; left:0; right:0; border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg, #6B4DFF, #2A1B8F 40%, #6FD8FF 70%, #FF8AE2); box-shadow:inset 0 0 0 3px rgba(255,255,255,.35), 0 24px 40px rgba(0,0,0,.5); }
.pack-body{ top:26px; bottom:0; border-radius:6px 6px 18px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.pack-top{ top:0; height:30px; border-radius:18px 18px 4px 4px; background-position:0 0; }
.pack-top::after{ content:''; position:absolute; left:6px; right:6px; bottom:3px; border-bottom:2px dashed rgba(255,255,255,.6); }
.pack-body img{ width:116px; height:auto; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.pack-body b{ font:400 92px/.9 var(--fd); color:#fff; text-shadow:0 6px 0 rgba(0,0,0,.25), 0 0 24px rgba(255,255,255,.4); }
.pack-body small{ font:400 15px/1 var(--fk); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.pack-shine{ position:absolute; inset:0; border-radius:18px; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size:260% 100%; animation:sheen 2.8s ease-in-out infinite; }
.pack.shake{ animation:shake .5s ease-in-out; }
.pack.torn .pack-top{ animation:tearOff .55s ease-in forwards; }
.pack.torn .pack-body{ animation:packDrop .45s .25s ease-in forwards; }
.pack-burst{ position:absolute; inset:-40px; border-radius:50%; pointer-events:none; opacity:0; background:repeating-conic-gradient(rgba(255,231,160,.35) 0 8deg, transparent 8deg 22deg); -webkit-mask:radial-gradient(circle, #000 20%, transparent 65%); mask:radial-gradient(circle, #000 20%, transparent 65%); }
.pack-game.open .pack-burst{ opacity:1; animation:spin 12s linear infinite, fadeIn .4s both; }
.pack-card{ position:absolute; inset:0; display:grid; place-items:center; }
.pack-card img{ width:190px; height:auto; filter:drop-shadow(0 20px 30px rgba(0,0,0,.6)); animation:cardIn .7s cubic-bezier(.2,1.5,.3,1) both; }
.pack-card.x img{ filter:drop-shadow(0 0 26px rgba(150,120,255,.85)) drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.pack-card.r img{ filter:drop-shadow(0 0 22px rgba(255,140,200,.75)) drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.pack-tx{ text-align:center; }
.pack-tx h3{ font-size:30px; margin-top:6px; }
.pack-sub{ margin-top:8px; color:var(--text-2); }
.pack-result{ margin-top:10px; font:400 30px/1 var(--fd); text-transform:uppercase; }
.pack-result b{ font-weight:400; color:#fff; } .pack-result .gx{ color:#CFC2FF; }
.pack-again{ margin-top:14px; font:800 15px var(--fb); color:#fff; background:var(--accent); border:0; padding:12px 20px; border-radius:12px; box-shadow:0 4px 0 var(--accent-deep); cursor:pointer; }
.pack-again:active{ transform:translateY(4px); box-shadow:none; }
.boom{ position:absolute; z-index:5; left:50%; top:50%; width:9px; height:14px; border-radius:2px; pointer-events:none; animation:boom 1.1s cubic-bezier(.15,.7,.3,1) forwards; }

/* features in their mode colours */
.feat{ position:relative; overflow:hidden; background:linear-gradient(150deg, color-mix(in srgb, var(--a, #3a3a3a) 38%, #1C1B19), #1C1B19 72%); border-color:color-mix(in srgb, var(--a, #555) 45%, transparent); transition:transform .2s var(--ease), box-shadow .2s; }
.feat::after{ content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--a, #555) 45%, transparent), transparent 70%); pointer-events:none; }
.feat img{ box-shadow:0 14px 28px rgba(0,0,0,.55), 0 0 0 2px color-mix(in srgb, var(--a, #555) 55%, transparent); }
.feat h3{ color:#fff; }
@media (hover:hover){ .feat:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:0 22px 40px rgba(0,0,0,.45); } }

/* the face-off */
.duel{ position:relative; display:grid; gap:16px; max-width:820px; margin:34px auto 0; }
.side{ position:relative; padding:22px 20px 20px; border-radius:22px; }
.side h3{ font-size:34px; margin-bottom:12px; }
.side ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.side li{ position:relative; padding-left:34px; font-size:15px; line-height:1.35; }
.side li::before{ content:''; position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%; }
.side li.y::before{ background:rgba(61,190,122,.18); box-shadow:inset 0 0 0 1.5px var(--green); }
.side li.y::after{ content:''; position:absolute; left:6px; top:5px; width:10px; height:6px; border-left:2.5px solid var(--green); border-bottom:2.5px solid var(--green); transform:rotate(-45deg); }
.side li.n{ color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(244,236,216,.25); }
.side li.n::before{ background:rgba(244,236,216,.06); }
.side li.n::after{ content:''; position:absolute; left:6px; top:10px; width:10px; height:2.5px; border-radius:2px; background:var(--muted); }
.side li.t{ padding-left:0; font-size:15px; } .side li.t::before{ display:none; } .side li.t b{ font:400 30px/1 var(--fd); margin-right:6px; }
.side.web{ background:#1E1D1A; border:1px solid var(--line); filter:saturate(.6); }
.side.web h3{ color:var(--muted); }
.side.app{ background:radial-gradient(120% 100% at 100% 0%, rgba(242,103,22,.35), transparent 60%), linear-gradient(160deg, #3A2414, #1C1B19 70%); border:2px solid var(--accent); box-shadow:0 0 0 6px rgba(242,103,22,.12), 0 30px 60px rgba(242,103,22,.18); }
.side.app li.t b{ color:var(--accent); }
.crown{ position:absolute; top:-26px; left:22px; width:52px; height:52px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); transform:rotate(-12deg); }
.win{ position:absolute; top:16px; right:-8px; font:400 18px/1 var(--fd); text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--green); padding:8px 14px 6px; border-radius:10px; transform:rotate(8deg); box-shadow:0 5px 0 #1D6B44, 0 14px 22px rgba(0,0,0,.4); }
.vs-badge{ justify-self:center; display:grid; place-items:center; width:64px; height:64px; margin:-30px 0; z-index:2; border-radius:50%; font:400 26px/1 var(--fd); color:#fff; background:#1C1B19; border:2px solid var(--line-2); box-shadow:0 10px 20px rgba(0,0,0,.5); }

/* finale */
.final{ position:relative; overflow:hidden; max-width:none; padding-top:90px; background:radial-gradient(90% 60% at 50% 30%, #2A1A10, var(--bg) 70%); }
.final > *{ position:relative; }
.final-bg{ position:absolute !important; inset:0; pointer-events:none; }
.final-bg .glow{ position:absolute; left:50%; top:22%; width:700px; height:500px; margin-left:-350px; background:radial-gradient(50% 50% at 50% 50%, rgba(242,103,22,.35), transparent 70%); }
.final-art{ position:relative; width:240px; height:150px; margin-bottom:6px; }
.final-art .final-icon{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:30px; animation:bobIcon 4s ease-in-out infinite; }
.orb{ position:absolute; top:22px; width:76px; height:auto; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.orb.o1{ left:0; transform:rotate(-16deg); animation:floatA 6s ease-in-out infinite; } .orb.o2{ right:0; transform:rotate(16deg); animation:floatB 7s ease-in-out infinite; }
.final h2{ font-size:clamp(40px, 9vw, 72px); }
.confetti{ position:absolute !important; inset:0; pointer-events:none; overflow:hidden; }
.confetti i{ position:absolute; top:-20px; width:9px; height:14px; border-radius:2px; animation:fall var(--t, 3s) var(--d, 0s) cubic-bezier(.2,.6,.4,1) forwards; }

@keyframes sweepL{ 0%,100%{ transform:rotate(-24deg); } 50%{ transform:rotate(-8deg); } }
@keyframes sweepR{ 0%,100%{ transform:rotate(24deg); } 50%{ transform:rotate(8deg); } }
@keyframes rise{ 0%{ opacity:0; transform:translateY(0); } 15%{ opacity:.9; } 100%{ opacity:0; transform:translateY(-520px) translateX(20px); } }
@keyframes floatA{ 0%,100%{ transform:rotate(-14deg) translateY(0); } 50%{ transform:rotate(-10deg) translateY(-14px); } }
@keyframes floatB{ 0%,100%{ transform:rotate(12deg) translateY(0); } 50%{ transform:rotate(8deg) translateY(-12px); } }
@keyframes stampIn{ from{ opacity:0; transform:rotate(40deg) scale(2); } to{ opacity:1; transform:rotate(12deg) scale(1); } }
@keyframes glowPulse{ 0%,100%{ box-shadow:0 4px 0 var(--accent-deep), 0 10px 30px rgba(242,103,22,.25); } 50%{ box-shadow:0 4px 0 var(--accent-deep), 0 10px 44px rgba(242,103,22,.6); } }
@keyframes ticker{ to{ transform:translateX(-50%); } }
@keyframes shake{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(-6deg) scale(1.03); } 40%{ transform:rotate(6deg) scale(1.05); } 60%{ transform:rotate(-4deg) scale(1.06); } 80%{ transform:rotate(3deg) scale(1.04); } }
@keyframes tearOff{ to{ transform:translate(60px, -140px) rotate(28deg); opacity:0; } }
@keyframes packDrop{ to{ transform:translateY(160px) scale(.9); opacity:0; } }
@keyframes cardIn{ 0%{ transform:translateY(60px) rotateY(180deg) scale(.6); opacity:0; } 60%{ opacity:1; } 100%{ transform:none; opacity:1; } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes boom{ to{ transform:translate(var(--bx), var(--by)) rotate(var(--br)); opacity:0; } }
@keyframes fall{ to{ transform:translate(var(--fx, 0), 110vh) rotate(var(--fr, 360deg)); } }
@keyframes bobIcon{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-8px) rotate(3deg); } }

@media (min-width:760px){
  .pack-game{ grid-template-columns:auto 1fr; justify-items:start; padding:30px 40px; gap:40px; }
  .pack-tx{ text-align:left; }
  .duel{ grid-template-columns:1fr auto 1.1fr; align-items:center; }
  .vs-badge{ margin:0 -20px; }
  .side.app{ transform:scale(1.03); }
  .fly{ width:140px; } .fly.f1{ left:-110px; } .fly.f2{ right:-110px; width:124px; } .fly.f3{ left:-80px; width:100px; }
  .ticker{ margin-left:-40px; margin-right:-40px; }
}
@media (prefers-reduced-motion:reduce){
  .beam, .sparks i, .fly, .hero-phone::before, .stamp, .store.primary, .ticker-track, .pack-shine, .pack.shake, .pack-burst, .pack-card img, .orb, .final-art .final-icon, .confetti i, .boom{ animation:none !important; }
  .sparks, .confetti{ display:none; }
}
.pack-note{ margin-top:8px; font-size:12.5px; color:var(--muted); }
/* placement: the GALAXY chip moves left so the stamp has the bottom right; phones keep the cards in sight */
.fly.f1{ left:-40px; bottom:6%; } .fly.f2{ right:-44px; } .fly.f3{ left:-30px; }
@media (min-width:760px){ .fly.f1{ left:-110px; bottom:10%; } .fly.f2{ right:-110px; } .fly.f3{ left:-80px; } }

/* official store badges: shown as provided (no effects on the badge), the same height, clear space around them */
.stores{ gap:12px; align-items:center; }
.store, .store.primary{ display:inline-block; min-width:0; padding:0; border:0; border-radius:10px; background:none; box-shadow:none; animation:none; }
.store img{ display:block; height:52px; width:auto; }
.store:active{ transform:translateY(2px); }
.soon-line{ margin-top:-4px; font:400 14px/1 var(--fk); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.foot .tm{ margin-top:10px; font-size:11.5px; opacity:.8; }

/* ---------- mobile polish ----------
   the tilted ticker reaches past the screen edge: clip it, so a phone never scrolls sideways
   (that sideways play made the centred blocks look off-centre) */
main{ overflow-x:hidden; }
@supports (overflow:clip){ main{ overflow-x:clip; } }
/* phone screens keep their own shape (no cropped sides) */
.step .phone{ aspect-ratio:auto; }
.step .phone-screen{ display:block; height:auto; }
@media (max-width:959px){
  /* hero centred like every block under it */
  .hero{ padding-top:22px; }
  .hero-tx{ align-items:center; text-align:center; }
  .hero-tx .lead{ margin:0 auto; }
  .hero-tx .stores{ justify-content:center; }
  .final{ padding-bottom:72px; }
}
@media (max-width:380px){
  .fly.f1{ left:-52px; } .fly.f2{ right:-58px; } .fly.f3{ left:-44px; }
  .chip.c1{ left:-12px; } .chip.c2{ right:-10px; }
}

/* ---------- languages ---------- */
.lang-menu{ position:relative; }
.lang-menu summary{ list-style:none; display:flex; align-items:center; gap:6px; font:700 12px/1 var(--fb); letter-spacing:.08em; color:var(--text); padding:9px 11px; border:1px solid var(--line-2); border-radius:99px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.lang-menu summary::-webkit-details-marker{ display:none; }
.lang-menu summary svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; }
.lang-menu[open] summary{ background:var(--s2); }
.lang-menu ul{ position:absolute; right:0; top:calc(100% + 8px); z-index:70; margin:0; padding:6px; list-style:none; min-width:214px; background:#1E1C18; border:1px solid var(--line-2); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.55); }
.lang-menu[open] ul{ animation:menuIn .18s var(--ease) both; }
.lang-menu a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:var(--text-2); text-decoration:none; font-size:15px; }
.lang-menu a b{ width:24px; font:700 11px/1 var(--fb); letter-spacing:.08em; color:var(--muted); }
.lang-menu a:hover{ background:var(--s2); color:var(--text); }
.lang-menu a[aria-current]{ color:var(--text); background:rgba(242,103,22,.14); }
.lang-menu a[aria-current] b{ color:var(--accent); }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } }
.foot-langs{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin:0 auto 14px !important; font-size:12.5px; }
.foot-langs a{ color:var(--muted); text-decoration:none; }
.foot-langs a[aria-current]{ color:var(--text); }

/* ---------- swipe rows (phones): the steps slide sideways, the next card peeks in ---------- */
.swipe{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-left:-16px; margin-right:-16px; padding:16px 16px 6px; scroll-padding:0 16px; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.swipe::-webkit-scrollbar{ display:none; }
.swipe > .step{ flex:0 0 min(280px, 78vw); scroll-snap-align:center; }
.steps.swipe{ margin-top:24px; }
.steps.loop.swipe{ margin-top:36px; }
.dots{ display:flex; justify-content:center; gap:2px; margin-top:10px; }
.dots button{ position:relative; width:30px; height:24px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.dots button::before{ content:''; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:99px; background:var(--line-2); transition:width .25s var(--ease), margin .25s var(--ease), background .25s; }
.dots button.on::before{ width:24px; margin-left:-12px; background:var(--accent); }
@media (min-width:760px){
  .swipe{ display:grid; overflow:visible; margin-left:0; margin-right:0; padding:0; scroll-snap-type:none; }
  .steps.swipe{ margin-top:40px; } .steps.loop.swipe{ margin-top:52px; }
  .dots{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .lang-menu[open] ul{ animation:none; }
  .dots button::before{ transition:none; }
}
h1{ font-size:calc(clamp(56px, 15vw, 104px) * var(--h1s, 1)); }
h1 em{ white-space:nowrap; }

/* the phone's drop shadow falls over the title and text under it: lift them above it */
.step > h3, .step > p, .step > .tiers{ position:relative; z-index:1; }
.step > h3{ font-size:28px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35); }
/* the swipe rows move sideways only: a vertical drag scrolls the page, never the row itself
   (the fade-in's 22px slide made the row taller than itself, so it could scroll up and down) */
@media (max-width:759px){
  .swipe{ overflow-y:hidden; touch-action:pan-x pan-y; }
  .js .swipe > .reveal{ transform:none; }
}

/* ---------- free to play, for everyone: three ticks right above the badges ---------- */
.perks{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 0; padding:0; list-style:none; }
.perks li{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px 8px 9px; border-radius:99px; font-size:14px; font-weight:700; color:var(--text); background:rgba(244,236,216,.07); border:1px solid var(--line-2); }
.perks svg{ width:18px; height:18px; padding:3px; border-radius:50%; fill:none; stroke:#14130F; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; background:var(--green); }
.perks li.free{ font:400 17px/1 var(--fd); letter-spacing:.03em; text-transform:uppercase; color:#3A2300; background:linear-gradient(180deg, #FFE7A3, #E9BE45); border-color:#F3D48A; box-shadow:0 4px 0 #A87414, 0 10px 22px rgba(233,190,69,.25); padding:8px 14px 7px 9px; }
.perks li.free svg{ background:#3A2300; stroke:#FFE7A3; }
.js .hero-tx.reveal .perks li{ animation:pop .5s var(--ease) both; }
.js .hero-tx.reveal .perks li:nth-child(2){ animation-delay:.08s; } .js .hero-tx.reveal .perks li:nth-child(3){ animation-delay:.16s; }
@media (max-width:959px){ .perks{ justify-content:center; } }
@media (prefers-reduced-motion:reduce){ .js .hero-tx.reveal .perks li{ animation:none; } }

/* ---------- phones: less air between the blocks ---------- */
@media (max-width:759px){
  section{ padding-top:44px; padding-bottom:44px; }
  .ticker{ margin-top:6px; }
}

/* ---------- "only in the app": a stage per card, with real pieces of the app on it ---------- */
.feat.fx{ display:block; padding:0; }
.fx-tx{ position:relative; z-index:2; padding:16px 18px 20px; }
.feat.fx h3{ font-size:25px; }
.fa{ position:relative; height:270px; overflow:hidden; isolation:isolate;
  background:radial-gradient(70% 72% at 50% 64%, color-mix(in srgb, var(--a) 60%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--b) 85%, #14130F), #17150F);
  border-bottom:1px solid color-mix(in srgb, var(--a) 40%, transparent); }
.fa::before{ content:''; position:absolute; z-index:-1; left:50%; top:62%; width:900px; height:900px; margin:-450px 0 0 -450px;
  background:repeating-conic-gradient(rgba(255,240,210,.08) 0 6deg, transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle, #000 8%, transparent 52%); mask:radial-gradient(circle, #000 8%, transparent 52%); animation:spin 70s linear infinite; }
.fa::after{ content:''; position:absolute; z-index:6; left:0; right:0; bottom:0; height:46px; background:linear-gradient(transparent, rgba(23,21,15,.92)); pointer-events:none; }
.feat .fa img{ position:absolute; display:block; height:auto; object-fit:fill; border-radius:0; box-shadow:none; filter:drop-shadow(0 16px 22px rgba(0,0,0,.55)); }
/* level pack: the pack with two stickers flying out */
.feat .fa .fa-pack{ z-index:3; width:156px; left:calc(50% - 78px); top:22px; rotate:-5deg; --i:1; }
.feat .fa .fa-fin{ z-index:2; width:108px; top:58px; --i:0; }
.feat .fa .fa-fin.l{ left:calc(50% - 150px); rotate:-20deg; } .feat .fa .fa-fin.r{ left:calc(50% + 44px); rotate:18deg; }
/* events: today's challenge, the Champions night and the week event, dealt like cards */
.feat .fa .fa-ev{ width:min(84%, 320px); }
.feat .fa .fa-ev.d{ z-index:1; left:5%; top:10px; rotate:-4deg; --i:0; }
.feat .fa .fa-ev.c{ z-index:2; right:4%; top:96px; rotate:3deg; --i:1; }
.feat .fa .fa-ev.w{ z-index:3; left:8%; top:178px; rotate:-1.5deg; --i:2; }
/* duel: your code and the face-off */
.feat .fa .fa-duel{ z-index:2; width:min(86%, 330px); left:50%; margin-left:max(-43%, -165px); top:20px; rotate:-2deg; border-radius:18px; --i:0; }
/* the trophy cabinet */
.feat .fa .fa-cab{ z-index:2; width:min(64%, 240px); left:50%; margin-left:max(-32%, -120px); top:16px; --i:0; }
/* managers and eras: fanned out, the front one a little bigger */
.feat .fa .fa-co{ width:126px; top:52px; border-radius:14px; }
.feat .fa .fa-co.a{ z-index:1; left:calc(50% - 168px); rotate:-12deg; --i:0; }
.feat .fa .fa-co.b{ z-index:1; left:calc(50% + 42px); rotate:12deg; --i:1; }
.feat .fa .fa-co.c{ z-index:3; width:144px; left:calc(50% - 72px); top:26px; --i:2; }
.feat .fa .fa-era{ width:124px; top:74px; border-radius:16px; }
.feat .fa .fa-era.a{ z-index:1; left:calc(50% - 160px); rotate:-11deg; --i:0; }
.feat .fa .fa-era.c{ z-index:1; left:calc(50% + 36px); rotate:11deg; --i:1; }
.feat .fa .fa-era.b{ z-index:3; width:144px; left:calc(50% - 72px); top:52px; --i:2; }
/* motion: the pieces fly in when the card comes into view, the front one keeps bobbing */
.js .feat.fx .fa img{ opacity:0; transform:translateY(40px) scale(.84); transition:opacity .5s var(--ease), transform .75s cubic-bezier(.2,1.4,.4,1); }
.js .feat.fx.in .fa img{ opacity:1; transform:none; transition-delay:calc(var(--i, 0) * 110ms + 150ms); }
.feat.fx.in .fa .fa-pack, .feat.fx.in .fa .fa-co.c, .feat.fx.in .fa .fa-era.b, .feat.fx.in .fa .fa-duel{ animation:faBob 5.5s 1.2s ease-in-out infinite; }
@keyframes faBob{ 50%{ translate:0 -7px; } }
@media (hover:hover){
  .feat.fx .fa .fa-fin, .feat.fx .fa .fa-co, .feat.fx .fa .fa-era, .feat.fx .fa .fa-ev{ transition:opacity .5s var(--ease), transform .75s cubic-bezier(.2,1.4,.4,1), rotate .35s var(--ease), translate .35s var(--ease); }
  .feat.fx:hover .fa .fa-fin.l, .feat.fx:hover .fa .fa-co.a, .feat.fx:hover .fa .fa-era.a{ rotate:-18deg; translate:-10px 4px; }
  .feat.fx:hover .fa .fa-fin.r, .feat.fx:hover .fa .fa-co.b, .feat.fx:hover .fa .fa-era.c{ rotate:18deg; translate:10px 4px; }
}
@media (prefers-reduced-motion:reduce){
  .js .feat.fx .fa img{ opacity:1; transform:none; transition:none; }
  .feat.fx.in .fa img, .fa::before{ animation:none !important; }
}