/* Messymoji landing. Sticky nav, two-column hero with a playable skull, zigzag feature rows, sticker grid, footer.
   Themes = the app's four themes. Palette values follow the app (ThemeSettings.swift); web-only decoration
   (gallery tiles, blob, phone ring, page texture) comes from the prototype. */

/* ---------- fonts (bundled, no external requests) ---------- */
@font-face{font-family:'Poppins';src:url(fonts/poppins-medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/poppins-semibold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/poppins-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Pop, Film and Glow fonts (latin subset from @fontsource, OFL in fonts/licenses). Only fetched once a theme uses them. */
@font-face{font-family:'Archivo Black';src:url(fonts/archivo-black-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url(fonts/dm-serif-display-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Space Mono';src:url(fonts/space-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url(fonts/space-mono-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url(fonts/space-mono-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(fonts/space-grotesk-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- theme tokens: every theme color and font lives here ---------- */
:root{
  --font:'Poppins',system-ui,-apple-system,sans-serif;
  --w-body:500;--w-strong:600;--w-display:700;
  /* headings (logo, buttons, titles), body text, the accented words; Neon uses Poppins for all three */
  --font-display:var(--font);--font-body:var(--font);--font-em:var(--font-display);--em-style:normal;--w-head:var(--w-display);
}
:root[data-theme="neon"]{
  color-scheme:dark;
  --bg:#000000;--ink:#FFFFFF;--muted:#A3A3A3;--surface:#1A1A1A;--foot:#0E0E0E;
  --accent:#A3E635;--accent-bg:#A3E635;--on-accent:#000000;--chip:#A3E635;--on-chip:#000000;--em-color:#A3E635;
  --line:1px solid #262626;--btn-line:1px solid transparent;--shadow:none;--shadow-sm:none;--radius:24px;
  --t1:#A3E635;--t2:#1C1C1C;--t3:#A3E635;--t4:#262626;
  --blob-bg:#A3E635;--blob-line:0 solid transparent;--blob-shadow:none;--phone-ring:0 0 0 1px #2E2E2E;
  --sw-line:1px solid rgba(255,255,255,.18);--h-track:-2.5px;
}
:root[data-theme="film"]{
  color-scheme:light;
  --bg:#F3ECDE;--ink:#221C18;--muted:#6B5E52;--surface:#FAF6ED;--foot:#EAE0CC;
  --accent:#FF5C2E;--accent-bg:#FF5C2E;--on-accent:#221C18;--chip:#FF5C2E;--on-chip:#221C18;--em-color:#FF5C2E;
  --line:1.5px dashed #221C18;--btn-line:1.5px dashed #221C18;--shadow:none;--shadow-sm:none;--radius:8px;
  --t1:#FF5C2E;--t2:#E6DAC2;--t3:#FAF6ED;--t4:#221C18;
  --blob-bg:#E6DAC2;--blob-line:1.5px dashed #221C18;--blob-shadow:none;--phone-ring:6px 6px 0 #D9CBB0;
  --sw-line:1.5px dashed #221C18;--h-track:-1.5px;
  --font-display:'Archivo Black',system-ui,sans-serif;--font-body:'Space Mono',ui-monospace,monospace;--font-em:'Space Mono',ui-monospace,monospace;--em-style:italic;--w-head:400;--w-body:400;
}
:root[data-theme="pop"]{
  color-scheme:light;
  --bg:#FFFDF8;--ink:#111111;--muted:#55524C;--surface:#FFFFFF;--foot:#FFF4E8;
  --accent:#FF90E8;--accent-bg:#FF90E8;--on-accent:#111111;--chip:#FFD600;--on-chip:#111111;--em-color:#B0168D;
  --line:3px solid #111111;--btn-line:3px solid #111111;--shadow:6px 6px 0 #111111;--shadow-sm:4px 4px 0 #111111;--radius:22px;
  --t1:#FF90E8;--t2:#FFD600;--t3:#FFFFFF;--t4:#111111;
  --blob-bg:#FF90E8;--blob-line:3px solid #111111;--blob-shadow:6px 6px 0 #111111;--phone-ring:8px 8px 0 #FF90E8,8px 8px 0 3px #111111;
  --sw-line:3px solid #111111;--h-track:-2px;
  --font-display:'Archivo Black',system-ui,sans-serif;--font-body:'DM Sans',system-ui,sans-serif;--font-em:'DM Serif Display',Georgia,serif;--em-style:italic;--w-head:400;
}
:root[data-theme="glow"]{
  color-scheme:dark;
  --bg:#0A0814;--ink:#F4F0FF;--muted:#B4ACCC;--surface:#1B1630;--foot:#130F22;
  --accent:#FFC53D;--accent-bg:linear-gradient(90deg,#FFC53D,#FF6E96);--on-accent:#1A1200;--chip:#FFC53D;--on-chip:#1A1200;--em-color:#FF6E96;
  --line:1px solid rgba(255,255,255,.14);--btn-line:1px solid transparent;--shadow:0 0 44px rgba(255,110,150,.16);--shadow-sm:0 0 10px rgba(255,197,61,.55);--radius:20px;
  --t1:linear-gradient(140deg,#FFC53D,#FF6E96);--t2:#1A1530;--t3:linear-gradient(140deg,#6D5BFF,#FF6E96);--t4:#120F24;
  --blob-bg:linear-gradient(90deg,#FFC53D,#FF6E96);--blob-line:0 solid transparent;--blob-shadow:0 0 90px rgba(255,110,150,.55);--phone-ring:0 0 60px rgba(109,91,255,.45);
  --sw-line:1px solid rgba(255,255,255,.18);--h-track:-2.5px;
  --font-display:'Space Grotesk',system-ui,sans-serif;--font-body:'Space Grotesk',system-ui,sans-serif;--font-em:'Space Grotesk',system-ui,sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:var(--w-body);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
:root[data-theme="film"] body{background-image:radial-gradient(rgba(34,28,24,.07) 1px,transparent 1.2px),radial-gradient(rgba(34,28,24,.05) 1px,transparent 1.2px);background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
:root[data-theme="glow"] body{background-image:radial-gradient(60% 40% at 12% 8%,rgba(109,91,255,.28),transparent 70%),radial-gradient(50% 40% at 92% 30%,rgba(255,110,150,.22),transparent 70%),radial-gradient(60% 50% at 40% 95%,rgba(59,130,246,.18),transparent 70%)}
a{color:inherit}
a:hover{opacity:.75}
img{max-width:100%}
/* rows slide in from off-screen and hero emojis hop; never widen the page */
main{overflow-x:clip}
.wrap{max-width:1200px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
@media (min-width:641px){.wrap{padding-inline:24px}}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:var(--line);padding-top:env(safe-area-inset-top)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.logo{font-family:var(--font-display);font-weight:var(--w-head);font-size:22px;letter-spacing:-.5px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:44px;flex:0 0 auto}
.logo img{width:34px;height:34px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-display);font-weight:var(--w-head);font-size:16px;color:var(--on-accent);background:var(--accent-bg);border:var(--btn-line);border-radius:14px;padding:12px 22px;box-shadow:var(--shadow-sm);text-decoration:none}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.soon{font-family:var(--font-body);font-weight:var(--w-display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--on-accent);color:var(--accent);border-radius:6px;padding:3px 7px}
:root[data-theme="glow"] .soon{color:#FFC53D}
.badge-link{display:inline-flex;align-items:center;min-height:44px}
.badge-link img{height:54px;width:auto;display:block}

/* theme switcher */
.switch{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);border:var(--sw-line);flex:0 1 auto;min-width:0}
.sw{font:var(--w-strong) 13px/1 var(--font-body);min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;background:transparent;color:var(--ink)}
.sw[aria-pressed="true"]{background:var(--accent-bg);color:var(--on-accent)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;align-items:center;padding-top:56px;padding-bottom:72px}
.hero-copy{min-width:0}
.kicker{display:inline-block;font-weight:var(--w-display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:var(--btn-line);border-radius:999px;padding:6px 12px;background:var(--chip);color:var(--on-chip)}
.h1{font-family:var(--font-display);font-weight:var(--w-head);font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:var(--h-track);margin:18px 0 0}
.h1 em{font-family:var(--font-em);font-style:var(--em-style);color:var(--em-color)}
:root[data-theme="glow"] .h1 em{background:linear-gradient(90deg,#FFC53D,#FF6E96);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(16px,1.6vw,20px);line-height:1.55;max-width:30em;margin:22px 0 30px;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cta-note{font-size:14px;color:var(--muted)}

/* hero stage: pointer position arrives as CSS variables, nothing re-lays out */
.stage{--px:0;--py:0;--tilt:12;position:relative;width:100%;aspect-ratio:1/1;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.blob{position:absolute;inset:8%;border-radius:46% 54% 50% 50%/52% 46% 54% 48%;background:var(--blob-bg);border:var(--blob-line);box-shadow:var(--blob-shadow)}
.skull{position:absolute;left:14%;top:12%;width:72%;aspect-ratio:1/1;cursor:pointer;transform:perspective(1000px) rotateY(calc(var(--px) * var(--tilt) * 1deg)) rotateX(calc(var(--py) * var(--tilt) * -0.8deg)) translate(calc(var(--px) * 10px),calc(var(--py) * 8px)) scale(var(--sx,1),var(--sy,1));transition:transform .18s ease-out}
.skull.springy{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
/* layers share the jaw hinge (1024 canvas ≈ (845,578)); on the landing the jaw stretches along the hinge line */
.skull .lay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;transform-origin:82.5% 56.4%;transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
/* the swinging mouth shadows show only while the jaw is off its rest pose; at rest three stacked copies would darken the soft edges */
#jaw,#mouth-half,#mouth-full{transform:rotate(-18.05deg) scaleY(1) rotate(18.05deg)}
.swing{visibility:hidden}
.jaw-moving .swing,.play .swing{visibility:visible}
.skull .eye{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.skull .eye-l{-webkit-mask-image:url(img/skull-eyemask-left.png);mask-image:url(img/skull-eyemask-left.png)}
.skull .eye-r{-webkit-mask-image:url(img/skull-eyemask-right.png);mask-image:url(img/skull-eyemask-right.png)}
.skull .pupil{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none;transition:transform .12s ease-out;will-change:transform}
.skull .eyelid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.skull .inmouth{position:absolute;pointer-events:none;opacity:0;-webkit-user-drag:none}
.fl{position:absolute;padding:0;border:0;background:none;cursor:grab;z-index:5;touch-action:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;transform:translate(-50%,-50%) rotate(var(--r));translate:0px 0px;transition:translate .35s cubic-bezier(.34,1.56,.64,1),transform .2s ease-out,opacity .3s}
.fl img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none}
.fl:active{cursor:grabbing}
.fl:focus-visible{border-radius:50%}
.wob{animation:wob .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes wob{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-14deg) scale(1.12)}60%{transform:rotate(9deg) scale(.96)}100%{transform:rotate(0) scale(1)}}

/* ---------- features ---------- */
.sec-h{font-family:var(--font-display);font-weight:var(--w-head);font-size:clamp(34px,4.6vw,60px);letter-spacing:-1.5px;line-height:1.05;margin:0}
.sec-sub{font-size:17px;color:var(--muted);margin:14px 0 0}
.feat{border-top:var(--line);padding:72px 0 40px}
/* zigzag rows: phone right, then left, alternating */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:72px 0}
.row.r-left .row-phone{order:-1}
.row-text{max-width:460px;min-width:0;justify-self:center;transition:opacity .6s ease .15s,transform .6s cubic-bezier(.22,1,.36,1) .15s}
.row-phone{display:flex;justify-content:center;min-width:0;transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.row.pre .row-text{opacity:0;transform:translateY(24px)}
.row.pre .row-phone{opacity:0}
.row.pre.r-right .row-phone{transform:translateX(120px) rotate(6deg)}
.row.pre.r-left .row-phone{transform:translateX(-120px) rotate(-6deg)}
.num{font-family:var(--font-display);font-weight:var(--w-head);font-size:15px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:var(--btn-line);border-radius:50%;background:var(--accent-bg);color:var(--on-accent)}
.row h3{font-family:var(--font-display);font-weight:var(--w-head);font-size:clamp(32px,3.6vw,52px);letter-spacing:-1.5px;margin:18px 0 12px;line-height:1.05}
.row p{font-size:18px;line-height:1.55;margin:0;color:var(--muted)}

/* phone preview art (always the app's Neon look) */
.phone{position:relative;width:280px;height:580px;border-radius:46px;background:#111;padding:12px;box-shadow:var(--phone-ring)}
.screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#0b0b0b}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:86px;height:24px;border-radius:14px;background:#000;z-index:9}
.bar{position:absolute;left:16px;right:16px;top:50px;display:flex;justify-content:space-between;align-items:center}
.pill{height:26px;border-radius:9px;background:#1d1d1d;border:1px solid #2c2c2c}
.pill.lime{background:#A3E635;border-color:#A3E635}
.frame{position:absolute;left:18px;right:18px;top:96px;aspect-ratio:1/1;border:1.5px dashed #3a3a3a;border-radius:14px}
.tray{position:absolute;left:0;right:0;bottom:0;height:150px;background:#151515;border-top:1px solid #2a2a2a;border-radius:22px 22px 0 0;padding:16px 14px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-content:start}
.tray img{width:100%}
.tag{position:absolute;top:56px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:var(--w-display);letter-spacing:.08em;text-transform:uppercase;color:#A3E635;z-index:8}
.ab{position:absolute}
.cutline{position:absolute;height:0;border-top:3px dashed #A3E635}
.drop{transform:translateY(-60%) rotate(-30deg);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1) .5s,opacity .3s .5s}
.play .drop{transform:rotate(10deg);opacity:1}
.split{transition:transform .6s cubic-bezier(.34,1.56,.64,1) .7s}
.play .split{transform:translate(9%,12%)}
.snip{transform:rotate(20deg)}
.play .snip{animation:snip 1.2s ease-in-out infinite}
@keyframes snip{0%,100%{transform:rotate(20deg)}50%{transform:rotate(4deg) translate(-6%,4%)}}
.pop1,.pop2,.pop3{opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.play .pop1{opacity:1;transform:none;transition-delay:.4s}
.play .pop2{opacity:1;transform:none;transition-delay:.9s}
.play .pop3{opacity:1;transform:none;transition-delay:1.4s}
.play .spin{animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.play .shake{animation:shake .5s ease-in-out infinite}
@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-7px) rotate(-6deg)}75%{transform:translateX(7px) rotate(6deg)}}
/* jaw + mouth shadows share origin and timing; the jaw stretches along the hinge line, the half shadow by half as much */
.chomp,.chomp-half{transform-origin:82.5% 56.4%}
.play .chomp{animation:chomp .9s cubic-bezier(.34,1.56,.64,1) infinite}
.play .chomp-half{animation:chomp-half .9s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes chomp{0%,100%{transform:rotate(-18.05deg) scaleY(1) rotate(18.05deg)}45%{transform:rotate(-18.05deg) scaleY(1.45) rotate(18.05deg)}}
@keyframes chomp-half{0%,100%{transform:rotate(-18.05deg) scaleY(1) rotate(18.05deg)}45%{transform:rotate(-18.05deg) scaleY(1.225) rotate(18.05deg)}}
.play .jelly{animation:jelly 1s ease-in-out infinite;transform-origin:50% 100%}
@keyframes jelly{0%,100%{transform:scale(1,1)}50%{transform:scale(1.1,.9)}}
.chat{position:absolute;left:14px;right:14px;top:96px;display:flex;flex-direction:column;gap:10px}
.bub{max-width:75%;padding:10px 13px;border-radius:18px;font-size:13px;line-height:1.3;font-family:system-ui,-apple-system,sans-serif}
.bub.in{align-self:flex-start;background:#262626;color:#eee;border-bottom-left-radius:6px}
.stk{align-self:flex-end;width:44%;position:relative;aspect-ratio:1/1}
.apps{position:absolute;left:12px;right:12px;bottom:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.app{font-size:10.5px;font-weight:700;text-align:center;color:#111;background:#A3E635;border-radius:9px;padding:9px 2px;font-family:system-ui,-apple-system,sans-serif}
.toast{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);background:#fff;color:#111;font-size:11.5px;font-weight:700;border-radius:999px;padding:7px 12px;white-space:nowrap;font-family:system-ui,-apple-system,sans-serif}
.phone-cap{font-size:13px;color:var(--muted);margin:8px 0 0;text-align:center}
.phone-cap[hidden]{display:none}

/* ---------- gallery ---------- */
.gal{border-top:var(--line);padding:80px 0}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
.tile{position:relative;aspect-ratio:1/1;border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tile img{position:absolute}
.tile.a{background:var(--t1)}.tile.b{background:var(--t2)}.tile.c{background:var(--t3)}.tile.d{background:var(--t4)}

/* ---------- footer ---------- */
.foot{border-top:var(--line);background:var(--foot);padding:56px 0 40px}
.foot-grid{display:flex;flex-wrap:wrap;gap:32px 40px;justify-content:space-between;align-items:flex-start}
.motto{margin:10px 0 0;font-size:16px}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;font-weight:var(--w-strong)}
.foot-links a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.foot-links .mail{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);user-select:all}
.qr{width:132px;height:132px;border:2px dashed var(--ink);border-radius:16px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:var(--w-display);padding:10px}
.qr img{width:100%;height:100%;object-fit:contain}
.fine{font-size:13px;color:var(--muted);margin:36px 0 0}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:24px;padding-bottom:48px;gap:8px}
  .hero-art{order:-1;max-width:460px;margin:0 auto;width:100%}
  .feat{padding-top:56px}
  .row{grid-template-columns:minmax(0,1fr);gap:28px;padding:48px 0}
  .row.r-left .row-phone,.row.r-right .row-phone{order:-1}
  .row-text{justify-self:start}
  .row.pre.r-right .row-phone{transform:translateX(60px) rotate(5deg)}
  .row.pre.r-left .row-phone{transform:translateX(-60px) rotate(-5deg)}
  .phone{width:min(62vw,250px);height:min(128vw,518px);border-radius:40px;padding:10px}
  :root[data-theme="pop"] .phone{box-shadow:6px 6px 0 #FF90E8,6px 6px 0 3px #111111}
  .screen{border-radius:32px}
  .apps{left:8px;right:8px;gap:4px}
  .app{font-size:9px;letter-spacing:-.2px;padding:8px 1px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .qr{display:none}
}
@media (max-width:640px){
  .nav-cta{display:none}
  .fl-wide{display:none}
  .nav-in{gap:8px}
  .logo{font-size:18px;gap:6px}
  .logo img{width:28px;height:28px}
  .sw{font-size:12px;padding:0 7px}
}
@media (max-width:370px){
  .logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- reduced motion: no tilt, wobble or phone animation ---------- */
@media (prefers-reduced-motion:reduce){
  .skull,.skull.springy,.skull .lay,.fl{transition:none}
  .skull{transform:none}
  .wob{animation:none}
  .play .spin,.play .shake,.play .chomp,.play .chomp-half,.play .jelly,.play .snip{animation:none}
  .play .swing{visibility:hidden}
  .drop,.split,.pop1,.pop2,.pop3{transition:none}
  .row-text,.row-phone{opacity:1 !important;transform:none !important;transition:none !important}
  body{transition:none}
}