/* ════════════════════════════════════════════════════════
   EasyAs! — deep-space POS. Unbounded / Instrument Sans / Space Mono
   ════════════════════════════════════════════════════════ */

:root{
  --bg:        #050810;
  --bg2:       #0a1120;
  --panel:     #0d1526;
  --ink:       #e9eff8;
  --muted:     #8a96ab;
  --cyan:      #22d3ee;
  --blue:      #3b82f6;
  --orange:    #fb923c;
  --amber:     #fbbf24;
  --line:      rgba(140,165,205,.14);
  --font-d:    'Unbounded', sans-serif;
  --font-b:    'Instrument Sans', sans-serif;
  --font-m:    'Space Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme:dark; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--cyan); color:#03121a; }

body::after{ /* film grain */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
h1,h2,h3,h4{ font-family:var(--font-d); line-height:1.12; font-weight:700; }

/* ── cursor glow ─────────────────────────────── */
.cursor-glow{
  position:fixed; left:0; top:0; width:520px; height:520px; pointer-events:none; z-index:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(34,211,238,.07) 0%, transparent 60%);
  transition:opacity .4s;
}

/* ── shared bits ─────────────────────────────── */
.kicker{
  font-family:var(--font-m); font-size:.72rem; letter-spacing:.32em;
  color:var(--cyan); display:flex; align-items:center; gap:.7em; text-transform:uppercase;
}
.kicker-dot{
  width:8px; height:8px; border-radius:50%; background:var(--orange); flex:0 0 auto;
  box-shadow:0 0 12px var(--orange); animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.55);opacity:.6} }

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-d); font-weight:600; font-size:.85rem;
  padding:1em 1.7em; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s;
  position:relative; overflow:hidden;
}
.btn-accent{
  background:linear-gradient(120deg, var(--cyan), var(--blue));
  color:#04111c;
  box-shadow:0 8px 30px -8px rgba(34,211,238,.55);
}
.btn-accent:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 44px -10px rgba(34,211,238,.7); }
.btn-ghost{
  border-color:var(--line); color:var(--ink); background:rgba(140,165,205,.05);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ transform:translateY(-3px); border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.08); }
/* neon-tile styled buttons — dark glass fill with a glowing accent border
   & neon text, matching the app carousel tiles */
.btn-wa, .btn-blue, .btn-amber, .btn-cyan, .btn-orange{
  background:linear-gradient(165deg, #0e1626, #070c17);
  border:1px solid color-mix(in srgb, var(--neon) 48%, transparent);
  color:var(--neon-ink);
  text-shadow:0 0 10px color-mix(in srgb, var(--neon) 45%, transparent);
  box-shadow:
    0 16px 38px -22px rgba(0,0,0,.9),
    0 0 24px -10px color-mix(in srgb, var(--neon) 60%, transparent),
    inset 0 0 18px -12px color-mix(in srgb, var(--neon) 75%, transparent);
}
.btn-wa:hover, .btn-blue:hover, .btn-amber:hover, .btn-cyan:hover, .btn-orange:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:color-mix(in srgb, var(--neon) 88%, transparent);
  box-shadow:
    0 20px 48px -22px rgba(0,0,0,.95),
    0 0 42px -6px color-mix(in srgb, var(--neon) 72%, transparent),
    inset 0 0 22px -10px color-mix(in srgb, var(--neon) 85%, transparent);
}
.btn-wa{   --neon:#25d366; --neon-ink:#5ff09a; }
.btn-blue{ --neon:#3b82f6; --neon-ink:#7db4ff; }
.btn-amber{--neon:#fbbf24; --neon-ink:#fcd667; }
.btn-cyan{ --neon:#22d3ee; --neon-ink:#7fe9f7; }
.btn-orange{ --neon:#fb923c; --neon-ink:#ffb27a; }
.btn-small{ padding:.65em 1.2em; font-size:.72rem; }
.btn .arrow{ transition:transform .3s; }
.btn:hover .arrow{ transform:translateY(3px); }

.section{ position:relative; padding:9rem 6vw; max-width:1380px; margin:0 auto; }
.section-head{ max-width:680px; margin-bottom:4.5rem; }
.section-title{
  font-size:clamp(2.1rem, 4.6vw, 3.6rem); margin:1.1rem 0 1.2rem; letter-spacing:-.01em;
}
.section-title em{
  font-style:normal;
  background:linear-gradient(110deg, var(--cyan), var(--blue) 55%, var(--orange));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.section-sub{ color:var(--muted); font-size:1.05rem; max-width:56ch; }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(46px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ── NAV ─────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; gap:2.5rem;
  padding:1.05rem 4vw;
  transition:background .4s, box-shadow .4s, padding .4s;
}
.nav.scrolled{
  background:rgba(5,9,18,.78); backdrop-filter:blur(18px);
  box-shadow:0 1px 0 var(--line); padding:.65rem 4vw;
}
.nav-logo{
  font-family:var(--font-d); font-weight:800; font-size:1.35rem; letter-spacing:-.02em;
}
.logo-as{ color:var(--cyan); }
.logo-suffix{
  font-family:var(--font-m); font-weight:400; font-size:.56rem; letter-spacing:.24em;
  color:var(--muted); text-transform:uppercase; margin-left:.9em; vertical-align:.18em;
  white-space:nowrap;
}
@media (max-width:560px){ .logo-suffix{ display:none; } }
.logo-bang{ color:var(--orange); display:inline-block; animation:bangBounce 3.2s cubic-bezier(.3,1.6,.4,1) infinite; }
@keyframes bangBounce{ 0%,86%,100%{transform:none} 90%{transform:translateY(-6px) rotate(8deg)} 95%{transform:translateY(1px)} }
.nav-links{ display:flex; gap:2.1rem; margin-left:auto; }
.nav-links a{
  font-size:.86rem; font-weight:600; color:var(--muted); letter-spacing:.04em;
  position:relative; transition:color .25s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--orange)); border-radius:2px; transition:width .3s;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-links .nav-flag{ color:var(--amber); }
.nav .nav-quote{ margin-left:.7rem; white-space:nowrap; }
.nav-links + .btn{ white-space:nowrap; }
.nav-logo{ white-space:nowrap; flex:0 0 auto; }

/* ── HERO ────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:7rem 6vw 5rem;
}
/* Fixed to the viewport (not the hero) so the drifting stars + meteors stay
   visible all the way down the page; z-index:-1 keeps them behind content. */
#starfield{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; }
.hero-orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; }
.orb-a{ width:560px; height:560px; left:-160px; top:-120px; background:radial-gradient(circle, rgba(59,130,246,.4), transparent 65%); animation:orbDrift 14s ease-in-out infinite alternate; }
.orb-b{ width:480px; height:480px; right:-140px; bottom:-100px; background:radial-gradient(circle, rgba(251,146,60,.28), transparent 65%); animation:orbDrift 18s ease-in-out infinite alternate-reverse; }
@keyframes orbDrift{ from{transform:translate(0,0) scale(1)} to{transform:translate(70px,50px) scale(1.12)} }
.hero-grid-fade{
  position:absolute; inset:auto 0 0 0; height:46%; pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 8%, transparent),
    repeating-linear-gradient(90deg, rgba(34,211,238,.06) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(34,211,238,.06) 0 1px, transparent 1px 90px);
  transform:perspective(700px) rotateX(58deg) scale(1.6);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 30%, transparent 95%);
  -webkit-mask-image:linear-gradient(to top, #000 30%, transparent 95%);
}
.hero-inner{ position:relative; z-index:2; max-width:920px; min-width:0; width:100%; }
.hero-kicker{ justify-content:center; margin-bottom:1.8rem; animation:fadeUp 1s .15s both; }
.hero-title{
  font-size:clamp(2.6rem, 7.4vw, 5.6rem); font-weight:800; letter-spacing:-.02em;
}
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.08em; }
.hero-title .word{
  display:inline-block; transform:translateY(115%);
  animation:wordUp 1s cubic-bezier(.2,.75,.2,1) both;
  margin-right:.22em;
}
.hero-title .line:nth-child(2) .word{ margin-right:.05em; }
.hero-title .word:nth-child(1){ animation-delay:.25s }
.hero-title .word:nth-child(2){ animation-delay:.37s }
.hero-title .line:nth-child(2) .word:nth-child(1){ animation-delay:.52s }
.hero-title .line:nth-child(2) .word:nth-child(2){ animation-delay:.62s }
.hero-title .line:nth-child(2) .word:nth-child(3){ animation-delay:.74s }
@keyframes wordUp{ from{transform:translateY(115%)} to{transform:translateY(0)} }
.hero-title .grad{
  background:linear-gradient(110deg, var(--cyan) 10%, var(--blue) 70%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-title .bang{
  color:var(--orange); -webkit-text-fill-color:var(--orange);
  text-shadow:0 0 44px rgba(251,146,60,.65);
}
.hero-sub{
  color:var(--muted); font-size:clamp(1rem, 1.6vw, 1.18rem); max-width:60ch;
  margin:1.6rem auto 2.4rem; animation:fadeUp 1s .9s both;
}
.hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp 1s 1.05s both; }
.contact .hero-cta{ animation:none; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }

.hero-stats{
  display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; justify-content:center; align-items:center;
  margin-top:3.4rem; animation:fadeUp 1s 1.25s both;
}
.stat{ display:flex; flex-direction:column; gap:.1rem; }
.stat-num{ font-family:var(--font-d); font-weight:800; font-size:2rem; color:var(--cyan); }
.stat-label{ font-size:.78rem; color:var(--muted); letter-spacing:.06em; }
.stat-divider{ width:1px; height:44px; background:var(--line); }

.scroll-hint{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2;
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.3em; color:var(--muted); text-transform:uppercase;
  animation:fadeUp 1s 1.6s both;
}
.scroll-wheel{
  width:22px; height:36px; border:1.5px solid var(--muted); border-radius:12px; position:relative;
}
.scroll-wheel::after{
  content:''; position:absolute; left:50%; top:6px; width:3px; height:7px; border-radius:3px;
  background:var(--cyan); transform:translateX(-50%); animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{ 0%{top:6px;opacity:1} 70%{top:20px;opacity:0} 100%{top:6px;opacity:0} }

/* ── MARQUEE ─────────────────────────────────── */
.marquee{
  border-block:1px solid var(--line); padding:1.1rem 0; overflow:hidden;
  background:linear-gradient(180deg, rgba(13,21,38,.6), rgba(13,21,38,.2));
  position:relative; z-index:2;
}
.marquee-track{
  display:flex; gap:2.6rem; align-items:center; width:max-content;
  animation:marquee 36s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--font-d); font-weight:600; font-size:.95rem; letter-spacing:.08em;
  color:var(--muted); text-transform:uppercase; white-space:nowrap;
  transition:color .3s; cursor:default;
}
.marquee-track span:hover{ color:var(--cyan); }
.marquee-track .mq-link{ cursor:pointer; }
.marquee-track .mq-link:hover{ text-shadow:0 0 18px rgba(34,211,238,.5); }
.marquee-track i{ color:var(--orange); font-style:normal; font-size:.8rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ── INDUSTRIES ──────────────────────────────── */
.industry-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(290px,100%),1fr)); gap:1.3rem;
}
.ind-card{
  --ac:var(--cyan);
  position:relative; padding:2rem 1.8rem 1.7rem; border-radius:8px;
  background:linear-gradient(160deg, rgba(20,30,52,.85), rgba(10,17,32,.9));
  border:1px solid var(--line);
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .35s, box-shadow .35s, opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  overflow:hidden; cursor:pointer;
}
.ind-card.in{ transition:border-color .35s, box-shadow .35s, transform .15s ease-out; }
.ind-card::before{ /* glare */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.08), transparent 45%);
}
.ind-card:hover{ border-color:color-mix(in srgb, var(--ac) 55%, transparent); box-shadow:0 24px 60px -28px color-mix(in srgb, var(--ac) 50%, transparent); }
.ind-card:hover::before{ opacity:1; }
.ind-icon{
  width:54px; height:54px; border-radius:8px; display:grid; place-items:center; margin-bottom:1.3rem;
  background:color-mix(in srgb, var(--ac) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--ac) 35%, transparent);
  box-shadow:0 0 26px -6px color-mix(in srgb, var(--ac) 45%, transparent);
  transform:translateZ(34px);
}
.ind-icon svg{ width:27px; height:27px; fill:none; stroke:var(--ac); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ind-card h3{ font-size:1.05rem; margin-bottom:.55rem; transform:translateZ(26px); }
.ind-card p{ font-size:.9rem; color:var(--muted); transform:translateZ(18px); min-height:4.2em; }
.ind-more{
  display:inline-block; margin-top:1.1rem; font-family:var(--font-m); font-size:.68rem; letter-spacing:.18em;
  color:var(--ac); text-transform:uppercase; transform:translateZ(22px);
  opacity:.7; transition:opacity .3s, letter-spacing .3s;
}
.ind-card:hover .ind-more{ opacity:1; letter-spacing:.26em; }

/* ── 3D APP CHAMBER ──────────────────────────── */
.chamber-wrap{ position:relative; padding-top:8rem; background:linear-gradient(180deg, var(--bg) 0%, #060c18 30%, #04070f 100%); }
.chamber-head{ text-align:center; max-width:720px; margin:0 auto 1rem; padding:0 6vw; }
.chamber-head .kicker{ justify-content:center; }
.chamber-hint{ margin:0 auto; font-family:var(--font-m); font-size:.78rem; letter-spacing:.12em; }

.chamber{
  position:relative; height:100svh; min-height:640px; overflow:hidden;
  perspective:1150px; perspective-origin:50% 42%;
}
.chamber-vignette{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 52%, var(--bg) 100%);
}
.chamber-scene{
  position:absolute; inset:0; transform-style:preserve-3d; will-change:transform;
  /* the scene's own plane sits at z=0, in front of the tiles in 3D —
     it must not swallow their clicks */
  pointer-events:none;
}
.chamber-floor{
  position:absolute; left:50%; top:78%; width:3000px; height:3000px;
  transform:translateX(-50%) rotateX(90deg);
  transform-origin:top center;
  background:
    repeating-linear-gradient(90deg, rgba(34,211,238,.13) 0 1.5px, transparent 1.5px 110px),
    repeating-linear-gradient(0deg,  rgba(34,211,238,.13) 0 1.5px, transparent 1.5px 110px),
    radial-gradient(60% 50% at 50% 0%, rgba(59,130,246,.12), transparent 70%);
  mask-image:radial-gradient(58% 58% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(58% 58% at 50% 0%, #000 25%, transparent 78%);
}
.chamber-horizon{
  position:absolute; left:50%; top:50%; width:1900px; height:900px;
  transform:translate(-50%,-58%) translateZ(-1250px);
  background:
    radial-gradient(48% 42% at 50% 62%, rgba(34,211,238,.2), transparent 70%),
    radial-gradient(34% 30% at 50% 64%, rgba(251,146,60,.13), transparent 70%);
  filter:blur(6px);
}
.dust{
  position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); opacity:.5; box-shadow:0 0 9px var(--cyan);
  animation:dustFloat var(--dd,9s) ease-in-out var(--ddel,0s) infinite alternate;
}
.dust.warm{ background:var(--orange); box-shadow:0 0 9px var(--orange); }
@keyframes dustFloat{
  from{ transform:translate(-50%,-50%) translate3d(var(--dx),var(--dy),var(--dz)); }
  to  { transform:translate(-50%,-50%) translate3d(var(--dx),calc(var(--dy) - 90px),var(--dz)); }
}

/* — the wall of screens — */
.chamber-wall{
  position:absolute; left:50%; top:47%;
  display:grid; grid-template-columns:repeat(3, 300px); gap:32px 36px;
  transform:translate(-50%,-50%) rotateX(5deg) rotateY(-13deg) translateZ(-190px);
  transform-style:preserve-3d;
}
.wall-tile{
  --ac:var(--cyan);
  width:300px; transform:translateZ(var(--tz,0)); transform-style:preserve-3d;
  opacity:0;
}
.chamber-wall.live .wall-tile{ animation:tileRise .9s cubic-bezier(.2,.8,.25,1) var(--d,0s) both; }
@keyframes tileRise{
  from{ opacity:0; transform:translateZ(calc(var(--tz, 0px) - 220px)); }
  to  { opacity:1; transform:translateZ(var(--tz, 0px)); }
}
.tile-screen{
  position:relative; height:188px; border-radius:8px; overflow:hidden; cursor:pointer;
  pointer-events:auto;
  background:linear-gradient(165deg, #0e1626, #070c17);
  border:1px solid color-mix(in srgb, var(--ac) 32%, transparent);
  box-shadow:0 28px 64px -26px rgba(0,0,0,.85), 0 0 36px -14px color-mix(in srgb, var(--ac) 45%, transparent);
  transition:transform .45s cubic-bezier(.2,.9,.25,1.15), border-color .3s, box-shadow .3s;
}
.tile-screen:hover, .tile-screen:focus-visible{
  transform:translateZ(48px) scale(1.045);
  border-color:color-mix(in srgb, var(--ac) 80%, transparent);
  box-shadow:0 44px 96px -30px rgba(0,0,0,.95), 0 0 64px -8px color-mix(in srgb, var(--ac) 65%, transparent);
  outline:none;
}
.tile-scan{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  background-size:100% 240%; animation:scan 5.5s linear infinite;
}
@keyframes scan{ from{ background-position:0 -140% } to{ background-position:0 140% } }
.tile-meta{
  display:flex; justify-content:space-between; align-items:center; padding:.6rem .2rem 0;
  font-family:var(--font-m); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
}
.tile-name{ color:#aebbd2; }
.tile-name .bang{ color:var(--orange); font-style:normal; }
.tile-no{ color:#46536b; }
.wall-tile:hover .tile-name{ color:var(--ac); }
.flag-badge{
  position:absolute; top:10px; right:10px; z-index:3;
  font-family:var(--font-m); font-size:.58rem; letter-spacing:.22em;
  background:linear-gradient(120deg, var(--amber), var(--orange)); color:#1a0e02;
  padding:.32em .85em; border-radius:6px; font-weight:700;
  box-shadow:0 6px 18px -6px rgba(251,146,60,.8);
}
.wall-tile.flagship .tile-screen{ border-width:1.5px; }
.wall-tile.soon .tile-screen{ border-style:dashed; cursor:default; }
.wall-tile.soon .tile-screen:hover{ transform:none; }

/* ═══════════════════════════════════════════════════════════════
   3D CAROUSEL EXPERIMENT — double-line ring of app screens.
   To REVERT to the flat 3x3 wall, delete this whole block.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:861px){
  .chamber-wall{
    display:block;                 /* drop the 3-column grid */
    transform-style:preserve-3d;
    /* --cspin is driven by mouse X (see script.js look loop): it rotates
       the whole curve about its own centre of curvature (z=620) so tiles
       swing into focus as the mouse moves left/right. */
    transform:translate(-50%,-50%) translateZ(-110px) rotateX(5deg)
              translateZ(620px) rotateY(var(--cspin,0deg)) translateZ(-620px);
  }

  .chamber-wall .wall-tile{
    position:absolute; left:0; top:0; width:248px;
    transform-style:preserve-3d;
    opacity:0; transition:opacity .8s ease;
  }
  .chamber-wall.live .wall-tile{ opacity:1; animation:none; }

  /* two stacked lines bent into a CONCAVE curve that recedes INTO the
     screen: the centre tiles sit deepest, the edge tiles wrap forward
     toward you on the left & right (inside-of-a-curved-screen look).
     All 9 stay visible at once.
     translateZ(R) rotateY(a) translateZ(-R) pivots each tile around a
     centre BEHIND the wall -> concave. R = 620px; arc about ±52deg;
     rowY = -125px (top line, 5 tiles) / +125px (bottom line, 4 tiles). */
  .wall-tile:nth-child(1){ transform:translate(-50%,-50%) translateZ(620px) rotateY(52deg)  translateZ(-620px) translateY(-125px); }
  .wall-tile:nth-child(2){ transform:translate(-50%,-50%) translateZ(620px) rotateY(26deg)  translateZ(-620px) translateY(-125px); }
  .wall-tile:nth-child(3){ transform:translate(-50%,-50%) translateZ(620px) rotateY(0deg)   translateZ(-620px) translateY(-125px); }
  .wall-tile:nth-child(4){ transform:translate(-50%,-50%) translateZ(620px) rotateY(-26deg) translateZ(-620px) translateY(-125px); }
  .wall-tile:nth-child(5){ transform:translate(-50%,-50%) translateZ(620px) rotateY(-52deg) translateZ(-620px) translateY(-125px); }
  .wall-tile:nth-child(6){ transform:translate(-50%,-50%) translateZ(620px) rotateY(39deg)  translateZ(-620px) translateY(125px); }
  .wall-tile:nth-child(7){ transform:translate(-50%,-50%) translateZ(620px) rotateY(13deg)  translateZ(-620px) translateY(125px); }
  .wall-tile:nth-child(8){ transform:translate(-50%,-50%) translateZ(620px) rotateY(-13deg) translateZ(-620px) translateY(125px); }
  .wall-tile:nth-child(9){ transform:translate(-50%,-50%) translateZ(620px) rotateY(-39deg) translateZ(-620px) translateY(125px); }

  /* click -> the picked tile flies out of the curve to front & centre,
     the rest fade back, then the app screen opens (see script.js). */
  .wall-tile.tile-zoom{
    z-index:60;
    transition:transform .6s cubic-bezier(.22,.85,.22,1.02);
    transform:translate(-50%,-50%) translateZ(470px) rotateX(0deg) rotateY(0deg) translateY(0px) scale(1.05) !important;
  }
  .wall-tile.tile-zoom .tile-screen{
    box-shadow:0 60px 120px -30px rgba(0,0,0,.95),
               0 0 90px -6px color-mix(in srgb, var(--ac) 75%, transparent);
    border-color:color-mix(in srgb, var(--ac) 85%, transparent);
  }
  .chamber-wall.zooming .wall-tile:not(.tile-zoom){
    transition:opacity .45s ease, transform .6s cubic-bezier(.4,0,.6,1);
    opacity:0; pointer-events:none;
  }
}
/* ═══════════ END 3D CAROUSEL EXPERIMENT ═══════════ */

/* ─── floating sound toggle (injected by script.js) ─── */
.ez-sound-toggle{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:8px; cursor:pointer;
  background:rgba(20,28,46,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(120,160,220,.25); color:#aebbd2;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
  transition:color .25s, border-color .25s, transform .2s, box-shadow .25s, background .25s;
}
.ez-sound-toggle svg{ width:22px; height:22px; }
.ez-sound-toggle:hover{ transform:translateY(-2px); color:#e5e9f0; border-color:rgba(34,211,238,.5); }
.ez-sound-toggle.on{
  color:#22d3ee; border-color:rgba(34,211,238,.55);
  box-shadow:0 8px 28px -8px rgba(34,211,238,.5);
}
@media (max-width:600px){ .ez-sound-toggle{ right:12px; bottom:12px; width:40px; height:40px; } }

/* corner labels */
.chamber-lbl{
  position:absolute; z-index:6; pointer-events:none;
  font-family:var(--font-m); font-size:.6rem; letter-spacing:.26em;
  color:#5b6c8a; text-transform:uppercase;
}
.lbl-tl{ top:1.4rem; left:1.8rem; } .lbl-tr{ top:1.4rem; right:1.8rem; }
.lbl-bl{ bottom:1.2rem; left:1.8rem; } .lbl-br{ bottom:1.2rem; right:1.8rem; }

/* — mini screen art — */
.art{ position:absolute; inset:0; }
.art-img{
  background-size:cover; background-repeat:no-repeat; background-position:center;
}
.art-img.art-dim{ filter:grayscale(.3) brightness(.85); }
/* LunarPOS: dashboard grid */
.art-lunar{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:16px; }
.art-lunar i{
  border-radius:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  animation:lunarPulse 3.6s ease-in-out infinite;
}
.art-lunar i:nth-child(2){ animation-delay:.4s } .art-lunar i:nth-child(3){ animation-delay:.8s }
.art-lunar i:nth-child(4){ animation-delay:1.2s } .art-lunar i:nth-child(5){ animation-delay:1.6s }
.art-lunar i:nth-child(6){ animation-delay:2s } .art-lunar i:nth-child(7){ animation-delay:2.4s }
.art-lunar i:nth-child(8){ animation-delay:2.8s } .art-lunar i:nth-child(9){ animation-delay:3.2s }
@keyframes lunarPulse{ 0%,100%{ filter:brightness(.9) } 50%{ filter:brightness(1.3) } }
/* MobilePOS: printing receipt */
.art-receipt{ display:grid; place-items:center; }
.art-receipt .rcpt{
  width:46%; height:78%; background:#FFFDF7; border-radius:4px 4px 0 0; padding:12px 10px;
  display:flex; flex-direction:column; gap:7px; position:relative;
  animation:rcptPrint 4.5s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(#000 92%, transparent);
  mask-image:linear-gradient(#000 92%, transparent);
}
@keyframes rcptPrint{ 0%{ transform:translateY(26%) } 45%,100%{ transform:translateY(4%) } }
.art-receipt b{ height:4px; border-radius:2px; background:#c9c4b8; display:block; }
.art .w40{ width:40% } .art .w50{ width:50% } .art .w60{ width:60% } .art .w70{ width:70% } .art .w80{ width:80% }
.art-receipt .total{ font-family:var(--font-m); font-weight:700; font-size:.6rem; color:#1F2937; margin-top:2px; }
.art-receipt .paid{
  position:absolute; right:8px; top:34%; transform:rotate(-14deg);
  font-family:var(--font-m); font-weight:700; font-size:.58rem; letter-spacing:.14em;
  color:#059669; border:1.5px solid #059669; border-radius:4px; padding:.15em .5em;
  animation:stampIn 4.5s ease-in-out infinite;
}
@keyframes stampIn{ 0%,55%{ opacity:0; transform:rotate(-14deg) scale(1.6) } 65%,100%{ opacity:1; transform:rotate(-14deg) scale(1) } }
/* TableSide: table + order */
.art-table{ overflow:hidden; }
.art-table .tbl{
  position:absolute; left:50%; top:52%; width:74px; height:74px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 36% 32%, #2c3b58, #16233c 70%);
  border:1.5px solid rgba(251,146,60,.5);
}
.art-table .seat{
  position:absolute; width:20px; height:20px; border-radius:50%;
  background:#1d2a44; border:1px solid rgba(140,165,205,.3);
}
.art-table .s1{ left:calc(50% - 10px); top:13% } .art-table .s2{ left:calc(50% - 10px); bottom:9% }
.art-table .s3{ left:17%; top:calc(52% - 10px) } .art-table .s4{ right:17%; top:calc(52% - 10px) }
.art-table .ordchip{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  font-family:var(--font-m); font-size:.52rem; letter-spacing:.1em; white-space:nowrap;
  color:#04111c; background:var(--orange); border-radius:4px; padding:.3em .7em; font-weight:700;
  animation:ordFly 3.8s ease-in-out infinite;
}
@keyframes ordFly{
  0%,18%{ opacity:0; transform:translate(-50%,-50%) scale(.6) }
  28%,55%{ opacity:1; transform:translate(-50%,-50%) scale(1) }
  75%,100%{ opacity:0; transform:translate(-50%,-260%) scale(.8) }
}
/* WashPro: queue lanes */
.art-wash{ display:flex; flex-direction:column; gap:10px; padding:18px 16px; }
.art-wash .lane{
  flex:1; position:relative; border-radius:6px; background:rgba(56,189,248,.07);
  border:1px solid rgba(56,189,248,.18);
}
.art-wash em{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  font-family:var(--font-m); font-style:normal; font-size:.5rem; letter-spacing:.2em; color:#5b87a6;
}
.art-wash .car{
  position:absolute; top:50%; width:26px; height:11px; border-radius:5px 7px 3px 3px;
  transform:translateY(-50%);
  background:var(--cyan); box-shadow:0 0 10px rgba(34,211,238,.6);
  animation:laneMove 5s ease-in-out infinite;
}
.art-wash .c1{ background:#38bdf8; animation-delay:0s }
.art-wash .c2{ background:#fb923c; animation-delay:-1.7s }
.art-wash .c3{ background:#4ade80; animation-delay:-3.4s }
@keyframes laneMove{ 0%{ left:24% } 50%{ left:74% } 100%{ left:24% } }
/* EasyStock: shelves + barcode */
.art-stock{ display:flex; flex-direction:column; justify-content:flex-end; gap:9px; padding:16px 18px; }
.art-stock .shelf{
  display:flex; gap:7px; align-items:flex-end; border-bottom:2px solid rgba(140,165,205,.25); padding-bottom:3px;
}
.art-stock .shelf i{
  width:24px; height:20px; border-radius:3px;
  background:linear-gradient(160deg, #2a3a5c, #1a2741); border:1px solid rgba(74,222,128,.35);
  animation:boxPop 4.2s ease-in-out infinite;
}
.art-stock .shelf i:nth-child(2){ height:26px; animation-delay:.5s }
.art-stock .shelf i:nth-child(3){ height:17px; animation-delay:1s }
.art-stock .shelf:nth-child(2) i{ animation-delay:1.5s }
.art-stock .shelf:nth-child(2) i:nth-child(2){ height:24px; animation-delay:2s }
@keyframes boxPop{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
.art-stock .bcode{
  height:16px; border-radius:3px;
  background:repeating-linear-gradient(90deg, #aebbd2 0 2px, transparent 2px 5px, #aebbd2 5px 8px, transparent 8px 10px);
  opacity:.7; animation:bcodeScan 3s linear infinite;
}
@keyframes bcodeScan{ 0%,100%{ opacity:.45 } 50%{ opacity:.9 } }
/* Kitchen Display: tickets */
.art-kds{ display:flex; gap:9px; padding:16px; align-items:flex-start; }
.art-kds .tkt{
  flex:1; border-radius:5px; padding:9px 8px; display:flex; flex-direction:column; gap:6px;
  background:#FFFDF7; box-shadow:0 4px 10px rgba(0,0,0,.4);
  animation:tktSlide 4.8s ease-in-out infinite;
}
.art-kds .tkt b{ height:4px; border-radius:2px; background:#c9c4b8; display:block; }
.art-kds .t1{ border-top:3px solid #fb7185; }
.art-kds .t2{ border-top:3px solid #fbbf24; animation-delay:-1.6s; margin-top:14px; }
.art-kds .t3{ border-top:3px solid #4ade80; animation-delay:-3.2s; margin-top:6px; }
@keyframes tktSlide{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
/* PawnDog: contract + signature */
.art-pawn{ display:grid; place-items:center; }
.art-pawn .doc{
  width:52%; height:74%; background:#FFFDF7; border-radius:4px; padding:12px 11px;
  display:flex; flex-direction:column; gap:7px;
}
.art-pawn b{ height:4px; border-radius:2px; background:#c9c4b8; display:block; }
.art-pawn svg{ margin-top:auto; width:100%; }
.art-pawn svg path{
  stroke:#1F2937; stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:120; stroke-dashoffset:120;
  animation:signIt 4.6s ease-in-out infinite;
}
@keyframes signIt{ 0%,15%{ stroke-dashoffset:120 } 55%,85%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:0 } }
/* coming soon: static */
.art-soon{
  display:grid; place-items:center;
  background:repeating-linear-gradient(0deg, rgba(140,165,205,.04) 0 1px, transparent 1px 3px);
}
.art-soon span{
  font-family:var(--font-d); font-weight:800; font-size:2.6rem; color:#2c3a54;
  animation:soonPulse 2.6s ease-in-out infinite;
}
@keyframes soonPulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }

/* ── APP DETAIL SCREEN ───────────────────────── */
.app-screen{
  position:fixed; inset:0; z-index:800; display:grid; place-items:center;
  visibility:hidden; opacity:0; transition:opacity .45s, visibility 0s .45s;
}
.app-screen.open{ visibility:visible; opacity:1; transition:opacity .45s; }
.app-screen-bg{
  position:absolute; inset:0; background:rgba(4,7,14,.88); backdrop-filter:blur(16px);
}
.app-screen-bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 70% 30%, color-mix(in srgb, var(--ac,#22d3ee) 14%, transparent), transparent 70%);
}
.app-screen-close{
  position:absolute; top:1.4rem; left:1.4rem; z-index:3;
  width:48px; height:48px; border-radius:6px; cursor:pointer;
  background:#374151; border:2px solid #fff; display:grid; place-items:center;
  transition:transform .25s, background .25s;
}
.app-screen-close:hover{ transform:scale(1.07); background:#46546b; }
.app-screen-close svg{ width:20px; height:20px; stroke:#fff; stroke-width:2.2; stroke-linecap:round; fill:none; }
.app-screen-body{
  position:relative; z-index:2; width:min(1060px, 92vw); max-height:86vh; overflow-y:auto;
  transform:scale(.9) translateY(34px);
  transition:transform .55s cubic-bezier(.2,.85,.25,1);
  padding:1rem;
}
.app-screen.open .app-screen-body{ transform:none; }
.as-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:3.4rem; align-items:center; }
.as-icon{
  width:92px; height:92px; border-radius:8px; display:grid; place-items:center; margin-bottom:1.6rem;
  background:color-mix(in srgb, var(--ac,#22d3ee) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--ac,#22d3ee) 45%, transparent);
  box-shadow:0 0 70px -12px color-mix(in srgb, var(--ac,#22d3ee) 70%, transparent);
}
.as-icon svg{ width:48px; height:48px; fill:none; stroke:var(--ac,#22d3ee); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.as-left h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin:.9rem 0 .7rem; }
.as-left h2 .bang{ color:var(--orange); }
.as-tag{ color:var(--muted); font-size:1.05rem; }
.as-chips{ display:flex; gap:.6rem; flex-wrap:wrap; margin:1.4rem 0 1.8rem; }
.as-chips span{
  font-family:var(--font-m); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45em 1em; border-radius:6px; border:1px solid var(--line); color:var(--muted);
}
.as-features{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.as-features li{
  display:flex; gap:.85em; align-items:flex-start; font-size:.95rem; color:#c6d2e4;
  padding:.85em 1.1em; border-radius:8px;
  background:rgba(20,30,52,.55); border:1px solid var(--line);
  opacity:0; transform:translateX(36px);
}
.app-screen.open .as-features li{ animation:featIn .6s cubic-bezier(.2,.8,.25,1) both; animation-delay:calc(.18s + var(--i)*.07s); }
@keyframes featIn{ from{opacity:0; transform:translateX(36px)} to{opacity:1; transform:none} }
.as-features li::before{
  content:'◆'; color:var(--ac,#22d3ee); font-size:.7em; margin-top:.55em; flex:0 0 auto;
}
.as-works-label{
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.26em; color:var(--muted); margin-top:.4rem;
}
.as-works{ margin:.7rem 0 1.6rem; }
.appchip{
  font-family:var(--font-d); font-weight:600; font-size:.72rem; cursor:pointer;
  padding:.6em 1.1em; border-radius:6px;
  background:color-mix(in srgb, var(--ac, #22d3ee) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ac, #22d3ee) 45%, transparent);
  color:var(--ac, #22d3ee); transition:transform .25s, box-shadow .25s;
}
.appchip:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -12px color-mix(in srgb, var(--ac, #22d3ee) 70%, transparent); }

/* ── BOOK-A-DEMO SCREEN ──────────────────────── */
.demo-screen{ z-index:900; }
.demo-screen .app-screen-body{ width:min(1080px, 94vw); padding:.5rem 1rem; }
.demo-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:2.8rem; align-items:center; }
.demo-left h2{
  font-size:clamp(1.8rem, 3.4vw, 2.7rem); margin:.9rem 0 .8rem;
}
.demo-left h2 em{
  font-style:normal;
  background:linear-gradient(110deg, var(--cyan), var(--blue) 60%, var(--orange));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.demo-info{ list-style:none; margin-top:2.2rem; display:flex; flex-direction:column; gap:1rem; }
.demo-info li{
  display:flex; align-items:baseline; gap:1.2em; font-size:.95rem; color:#c6d2e4;
}
.demo-info b{
  font-family:var(--font-m); font-weight:700; font-size:.6rem; letter-spacing:.24em;
  color:var(--cyan); min-width:72px;
}
.demo-form{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field.full, .demo-actions{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.22em; color:var(--muted); text-transform:uppercase;
}
.field label i{ font-style:normal; opacity:.6; text-transform:none; letter-spacing:.05em; }
.field input, .field select, .field textarea{
  font-family:var(--font-b); font-size:.93rem; color:var(--ink);
  background:#0f1828; border:1px solid var(--line); border-radius:8px;
  padding:.66em 1em; outline:none; width:100%;
  transition:border-color .25s, box-shadow .25s;
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238a96ab' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center;
}
.field select option{ background:#0f1828; }
.field select optgroup{ background:#0f1828; color:var(--muted); font-style:normal; }
.field textarea{ resize:vertical; min-height:56px; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(34,211,238,.6); box-shadow:0 0 0 3px rgba(34,211,238,.12);
}
/* never let browser autofill paint the fields white */
@keyframes fieldStayDark{ to{ background-color:#0f1828; color:#e9eff8; } }
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active,
.field select:-webkit-autofill,
.field select:-webkit-autofill:hover,
.field select:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:hover,
.field textarea:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #0f1828 inset !important;
  box-shadow:0 0 0 1000px #0f1828 inset !important;
  -webkit-text-fill-color:#e9eff8 !important;
  caret-color:#e9eff8;
  background-color:#0f1828 !important;
  background-image:none !important;
  transition:background-color 99999s ease-in-out 0s;
  animation:fieldStayDark 0s forwards !important;
}
.field input:autofill,
.field select:autofill,
.field textarea:autofill{
  background-color:#0f1828 !important;
  color:#e9eff8 !important;
  box-shadow:0 0 0 1000px #0f1828 inset !important;
}
.field.err input{ border-color:rgba(239,68,68,.7); box-shadow:0 0 0 3px rgba(239,68,68,.1); }
.f-err{ display:none; font-size:.74rem; color:#f87171; }
.field.err .f-err{ display:block; }
.demo-hp{ position:absolute; left:-5000px; opacity:0; pointer-events:none; }
.demo-actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:.4rem; }
.demo-status{ font-size:.85rem; color:var(--muted); }
.demo-status.fail{ color:#fbbf24; }
.demo-status a{ color:var(--cyan); text-decoration:underline; }
.demo-success{
  grid-column:1 / -1; text-align:center; padding:3rem 1rem 2rem;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.demo-success[hidden]{ display:none; }
.demo-success .bang{ color:var(--orange); }
.demo-success .as-tag{ max-width:46ch; }
.ok-ring{
  width:92px; height:92px; border-radius:50%; display:grid; place-items:center;
  background:rgba(74,222,128,.1); border:2px solid rgba(74,222,128,.55);
  box-shadow:0 0 60px -10px rgba(74,222,128,.55);
  animation:okPop .6s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes okPop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }
.ok-ring svg{ width:44px; height:44px; fill:none; stroke:#4ade80; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:30; stroke-dashoffset:30; animation:okDraw .5s ease-out .25s forwards; }
@keyframes okDraw{ to{ stroke-dashoffset:0 } }
/* quote builder */
.q-add{ display:flex; gap:.7rem; }
.q-add select{ flex:1; min-width:0; }
.btn-add{
  background:linear-gradient(120deg, #ef4444, #dc2626); color:#fff;
  box-shadow:0 8px 26px -10px rgba(239,68,68,.6); padding:.66em 1.6em;
}
.btn-add:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -10px rgba(239,68,68,.75); }
.btn-add:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.q-tablewrap{ grid-column:1 / -1; }
.q-table{
  width:100%; border-collapse:collapse; font-size:.88rem;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.q-table th{
  text-align:left; font-family:var(--font-m); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); padding:.7em .9em;
  background:rgba(20,30,52,.6); border-bottom:1px solid var(--line);
}
.q-table td{ padding:.6em .9em; border-bottom:1px solid var(--line); color:#c6d2e4; }
.q-table tr:last-child td{ border-bottom:0; }
.q-plat{
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.12em; color:var(--cyan);
  border:1px solid rgba(34,211,238,.35); border-radius:6px; padding:.25em .7em; white-space:nowrap;
}
.q-remove{
  width:32px; height:32px; border-radius:6px; cursor:pointer;
  background:#374151; border:1px solid var(--line); color:#ef4444; font-weight:700;
  transition:transform .2s, background .2s;
}
.q-remove:hover{ transform:scale(1.08); background:#46546b; }
.q-empty{ font-family:var(--font-m); font-size:.68rem; letter-spacing:.14em; color:var(--muted); }

.buy-alt{ margin-top:1rem; font-size:.85rem; color:var(--muted); }
.buy-alt a{ color:var(--cyan); }
.buy-alt a:hover{ text-decoration:underline; }

/* ── HARDWARE ────────────────────────────────── */
.hardware{ background:radial-gradient(70% 60% at 50% 0%, rgba(59,130,246,.06), transparent 70%); }
.hw-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(245px,100%),1fr)); gap:1.3rem; }
.hw-card{
  padding:1.4rem 1.4rem 1.5rem; border-radius:8px; text-align:left; cursor:pointer;
  background:linear-gradient(165deg, rgba(20,30,52,.85), rgba(10,17,32,.9));
  border:1px solid var(--line);
  transition:border-color .35s, box-shadow .35s, transform .35s;
}
.hw-card:hover{
  border-color:rgba(34,211,238,.45); box-shadow:0 26px 60px -28px rgba(34,211,238,.4);
  transform:translateY(-6px);
}
.hw-photo{
  height:150px; border-radius:8px; margin-bottom:1.2rem; overflow:hidden;
  background-size:cover; background-repeat:no-repeat; background-position:center;
  border:1px solid var(--line);
}
.hw-photo .hw-svg{ display:block; width:100%; height:100%; }

/* ── HARDWARE TILE HOVER ANIMATIONS ─────────────
   Idle (resting) states — these read as intentional
   "off / closed" looks for each device. */
.sc-laser{ opacity:0; }                                   /* scanner: laser off  */
.sc-flash{ opacity:0; }
.cd-tray{ transform:translateY(74px);                     /* cash drawer: closed */
  transition:transform .55s cubic-bezier(.34,1.25,.5,1) !important; }
.pd-clip1, .pd-clip2{ transform:scaleX(0); transform-origin:left;
  transform-box:fill-box; }                               /* pole display: blank */
.pd-clip1{ transition:transform .8s steps(13) !important; }
.pd-clip2{ transition:transform .7s steps(14) .5s !important; }
.pd-cursor{ opacity:0; }
.fp-check{ opacity:0; transform-box:fill-box; transform-origin:center; }
.ts-ripple1, .ts-ripple2{ transform-box:fill-box; transform-origin:center; }

/* Reveal on hover — instant fallback so the effect still
   works for visitors who prefer reduced motion. */
.hw-card:hover .sc-laser{ opacity:1; }
.hw-card:hover .cd-tray{ transform:translateY(0); }       /* slide open          */
.hw-card:hover .pd-clip1,
.hw-card:hover .pd-clip2{ transform:scaleX(1); }          /* type the figures in */
.hw-card:hover .pd-cursor{ opacity:1; }
.hw-card:hover .fp-check{ opacity:1; }

/* Motion layer — forced on for ALL visitors. Normally these would sit
   behind @media (prefers-reduced-motion: no-preference) to respect the OS
   "reduce motion" accessibility setting, but per request they always run
   (the effects are small, decorative and hover-only). */
  .hw-card:hover .sc-laser{ animation:sc-laser 1.1s ease-in-out infinite !important; }
  .hw-card:hover .sc-flash{ animation:sc-flash 1.1s ease-in-out infinite !important; }
  @keyframes sc-laser{ 0%,100%{opacity:.45} 50%{opacity:1} }
  @keyframes sc-flash{ 0%,55%,100%{opacity:0} 70%{opacity:.5} 86%{opacity:.12} }

  .hw-card:hover .sp-receipt{ animation:sp-feed 1.3s ease-in-out infinite !important; }
  .hw-card:hover .sp-led{ animation:hw-blink 1s steps(1,end) infinite !important; }
  @keyframes sp-feed{ 0%,100%{transform:translateY(9px)} 50%{transform:translateY(1px)} }

  .ts-ripple1, .ts-ripple2{ opacity:0; }
  .hw-card:hover .ts-ripple1{ animation:ts-rip 1.4s ease-out infinite !important; }
  .hw-card:hover .ts-ripple2{ animation:ts-rip 1.4s ease-out .55s infinite !important; }
  @keyframes ts-rip{ 0%{transform:scale(.35); opacity:.9} 100%{transform:scale(1.6); opacity:0} }
  .hw-card:hover .ts-tile{ animation:ts-tap 1.4s steps(1,end) infinite !important; }
  @keyframes ts-tap{ 0%,100%{opacity:1} 28%{opacity:.4} 36%{opacity:1} }

  .hw-card:hover .pd-cursor{ animation:hw-blink .7s steps(1,end) infinite !important; }

  .rf-wave1, .rf-wave2{ opacity:0; }
  .hw-card:hover .rf-wave1{ animation:rf-wave 1.5s ease-out infinite !important; }
  .hw-card:hover .rf-wave2{ animation:rf-wave 1.5s ease-out .45s infinite !important; }
  @keyframes rf-wave{ 0%{opacity:0} 25%{opacity:.95} 100%{opacity:0} }
  .hw-card:hover .rf-led{ animation:hw-blink 1s steps(1,end) infinite !important; }
  .rf-tag{ transform-box:fill-box; transform-origin:center; }
  .hw-card:hover .rf-tag{ animation:rf-tag 1.5s ease-in-out infinite !important; }
  @keyframes rf-tag{ 0%,100%{transform:translateX(10px)} 50%{transform:translateX(0)} }

  .hw-card:hover .fp-scan{ animation:fp-scan 1.7s ease-in-out infinite !important; }
  @keyframes fp-scan{ 0%{transform:translateY(-62px); opacity:.4} 50%{transform:translateY(54px); opacity:.95} 100%{transform:translateY(-62px); opacity:.4} }
  .hw-card:hover .fp-check{ animation:fp-pop .5s ease-out both !important; }
  @keyframes fp-pop{ 0%{transform:scale(0)} 70%{transform:scale(1.18)} 100%{transform:scale(1)} }

  .hw-card:hover .sl-produce{ animation:sl-bob 1.15s ease-in-out infinite !important; }
  @keyframes sl-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
  .hw-card:hover .sl-disp{ animation:sl-flick 1.4s steps(1,end) infinite !important; }
  @keyframes sl-flick{ 0%,100%{opacity:1} 46%{opacity:.45} 52%{opacity:1} }

  @keyframes hw-blink{ 0%,100%{opacity:1} 50%{opacity:.2} }

.hw-more{
  display:inline-block; margin-top:.9rem; font-family:var(--font-m); font-size:.64rem;
  letter-spacing:.2em; color:var(--cyan); text-transform:uppercase; opacity:.7; transition:opacity .3s;
}
.hw-card:hover .hw-more{ opacity:1; }
.hw-card h4{ font-size:.92rem; margin-bottom:.45rem; }
.hw-card p{ font-size:.85rem; color:var(--muted); }
.hw-brands{
  display:flex; gap:3rem; justify-content:center; flex-wrap:wrap; margin-top:4rem;
}
.hw-brands span{
  font-family:var(--font-d); font-weight:600; font-size:.95rem; letter-spacing:.24em; color:#3d4c66;
  transition:color .35s, text-shadow .35s; cursor:default;
}
.hw-brands span:hover{ color:var(--cyan); text-shadow:0 0 24px rgba(34,211,238,.6); }

/* ── REVIEWS ─────────────────────────────────── */
.reviews .section-head{ text-align:center; max-width:none; }
.reviews .kicker{ justify-content:center; }
.quote-stage{
  position:relative; max-width:760px; margin:0 auto; min-height:240px; text-align:center;
  padding:3rem 2.5rem 4.5rem; border-radius:8px;
  background:linear-gradient(165deg, rgba(20,30,52,.6), rgba(10,17,32,.75));
  border:1px solid var(--line);
}
.quote-mark{
  position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  font-family:var(--font-d); font-size:5rem; line-height:1; color:var(--orange);
  text-shadow:0 0 38px rgba(251,146,60,.5);
}
.quote{ position:absolute; inset:3.4rem 2.5rem auto; opacity:0; transform:translateY(18px) scale(.985); transition:opacity .7s, transform .7s; pointer-events:none; }
.quote.active{ opacity:1; transform:none; pointer-events:auto; }
.quote p{ font-size:clamp(1.05rem, 2vw, 1.3rem); line-height:1.65; color:#d4dded; font-style:italic; }
.quote footer{ margin-top:1.3rem; font-family:var(--font-m); font-size:.72rem; letter-spacing:.2em; color:var(--cyan); text-transform:uppercase; }
.quote-dots{ position:absolute; bottom:1.6rem; left:0; right:0; display:flex; gap:.7rem; justify-content:center; }
.qdot{
  width:10px; height:10px; border-radius:50%; border:1px solid var(--muted); background:transparent;
  cursor:pointer; transition:background .3s, border-color .3s, transform .3s; padding:0;
}
.qdot.active{ background:var(--orange); border-color:var(--orange); transform:scale(1.25); box-shadow:0 0 12px rgba(251,146,60,.7); }

/* ── LUNARPOS PROMO (homepage) ───────────────── */
.lp-promo{ padding-top:0; }
.lp-promo-card{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:center;
  padding:3.5rem; border-radius:8px;
  background:linear-gradient(165deg, rgba(28,40,68,.92), rgba(8,13,25,.96));
  border:1px solid rgba(251,191,36,.3);
}
.lp-promo-glow{
  position:absolute; inset:-30%; pointer-events:none;
  background:
    radial-gradient(34% 40% at 78% 24%, rgba(251,191,36,.12), transparent 70%),
    radial-gradient(30% 36% at 18% 80%, rgba(34,211,238,.1), transparent 70%);
}
.lp-promo-text, .lp-promo-img{ position:relative; }
.lp-promo .section-title{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); }
.lp-promo .section-sub{ margin-bottom:1.8rem; }
.lp-promo-cta{ justify-content:flex-start; flex-wrap:nowrap; gap:.6rem; }
.lp-promo-cta .btn{ white-space:nowrap; padding:.85em 1.15em; font-size:.78rem; }
.lp-promo-img img{
  border-radius:10px; border:1px solid var(--line);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.9), 0 0 60px -24px rgba(251,191,36,.4);
}
@media (max-width:860px){
  .lp-promo-card{ grid-template-columns:1fr; gap:2rem; padding:2rem 1.4rem; }
}

/* ── CONTACT ─────────────────────────────────── */
.contact-card{
  position:relative; overflow:hidden; text-align:center;
  padding:5.5rem 3rem; border-radius:8px;
  background:linear-gradient(165deg, rgba(20,30,52,.85), rgba(8,13,25,.95));
  border:1px solid var(--line);
}
.contact-card .kicker{ justify-content:center; }
.contact-card .section-sub{ margin:0 auto 2.4rem; }
.contact-glow{
  position:absolute; inset:-40%; pointer-events:none;
  background:
    radial-gradient(34% 40% at 28% 30%, rgba(34,211,238,.13), transparent 70%),
    radial-gradient(30% 36% at 74% 72%, rgba(251,146,60,.11), transparent 70%);
  animation:glowSpin 16s linear infinite;
}
@keyframes glowSpin{ to{ transform:rotate(360deg) } }
.contact-card > *{ position:relative; }
.contact-hours{ margin-top:2.2rem; font-family:var(--font-m); font-size:.72rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
.contact-details{
  display:grid; grid-template-columns:1.2fr 1fr .8fr; gap:2.5rem;
  margin-top:3.5rem; padding-top:2.8rem; border-top:1px solid var(--line);
  text-align:left;
}
.cd-head{
  font-size:.85rem; margin-bottom:1.2rem; color:var(--ink);
}
.cd-col{ display:flex; flex-direction:column; gap:.75rem; }
.cd-row{
  display:flex; align-items:baseline; gap:1em; font-size:.92rem; color:#c6d2e4; margin:0;
  transition:color .25s;
}
a.cd-row:hover{ color:var(--cyan); }
.cd-row b{
  font-family:var(--font-m); font-weight:700; font-size:.58rem; letter-spacing:.2em;
  color:var(--cyan); flex:0 0 150px; white-space:nowrap;
}
.cd-row i{ font-style:normal; color:var(--muted); font-size:.82rem; }
.cd-addr{ display:block; line-height:1.7; }
.cd-map{
  display:block; margin-top:.6rem; font-family:var(--font-m); font-size:.64rem;
  letter-spacing:.16em; color:var(--orange); text-transform:uppercase;
}
.cd-jiffie{ display:block; margin-top:1rem; color:#fff; font-size:1.08rem; }
.cd-jiffie a{ color:#fff; }
.cd-jiffie a b{ font-family:inherit; font-size:1em; font-weight:800; letter-spacing:normal; text-transform:none; color:#4FC3F7; }
.cd-jiffie a:hover b{ text-decoration:underline; }
/* ── OPEN / CLOSED NEON BADGE ─────────────────── */
.open-status{
  align-self:flex-start; margin-top:.85rem; display:inline-flex; align-items:center; gap:.55em;
  padding:.5em .95em; border-radius:8px; font-family:var(--font-m); font-weight:700;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; opacity:0; transition:opacity .3s;
}
.open-status::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:currentColor; box-shadow:0 0 8px currentColor, 0 0 14px currentColor;
  animation:pulseDot 2.4s ease-in-out infinite;
}
.open-status.is-shown{ opacity:1; }
.open-status.is-open{
  color:#34f5b0; border:1px solid rgba(52,245,176,.4);
  background:rgba(52,245,176,.08);
  box-shadow:0 0 14px rgba(52,245,176,.25), inset 0 0 14px rgba(52,245,176,.06);
  text-shadow:0 0 10px rgba(52,245,176,.6);
}
.open-status.is-closed{
  color:#ff5d7a; border:1px solid rgba(255,93,122,.4);
  background:rgba(255,93,122,.08);
  box-shadow:0 0 14px rgba(255,93,122,.25), inset 0 0 14px rgba(255,93,122,.06);
  text-shadow:0 0 10px rgba(255,93,122,.6);
}
@media (max-width:860px){
  .contact-details{ grid-template-columns:1fr; gap:2rem; }
}

/* ── FOOTER ──────────────────────────────────── */
.footer{
  border-top:1px solid var(--line); padding:3.2rem 6vw; text-align:center;
  display:flex; flex-direction:column; gap:1.4rem; align-items:center;
}
.footer-links{ display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; }
.footer-links a{ font-size:.84rem; color:var(--muted); transition:color .25s; }
.footer-links a:hover{ color:var(--cyan); }
.socials{ display:flex; gap:1rem; }
.socials a{
  width:42px; height:42px; border-radius:8px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(13,21,38,.6);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.socials a:hover{
  transform:translateY(-4px); border-color:rgba(34,211,238,.55);
  box-shadow:0 14px 30px -14px rgba(34,211,238,.6);
}
.socials svg{ width:19px; height:19px; fill:#8a96ab; transition:fill .25s; }
.socials a:hover svg{ fill:var(--cyan); }
.socials svg.stroked{ fill:none; stroke:#8a96ab; stroke-width:1.8; transition:stroke .25s; }
.socials a:hover svg.stroked{ stroke:var(--cyan); }
.socials svg.stroked .filled{ fill:#8a96ab; stroke:none; }
.socials a:hover svg.stroked .filled{ fill:var(--cyan); }
.footer-visitors{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8rem; color:var(--muted);
}
.footer-visitors svg{ width:15px; height:15px; fill:var(--cyan); opacity:.85; }
.footer-visitors #visitorCount{ color:#cdd6e6; font-weight:600; font-variant-numeric:tabular-nums; }
.footer-copy{ font-size:.76rem; color:#46536b; }

/* ════════════════════════════════════════════════════════
   LUNARPOS SHOWCASE PAGE
   ════════════════════════════════════════════════════════ */
/* Fixed to the viewport (not the hero) so the starfield stays visible all the
   way down the page as you scroll; z-index:-1 keeps every dot behind content. */
.lp-stars{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.lp-stars i{
  position:absolute; display:block; border-radius:50%;
  background:#cfe6f7; opacity:.18;
  animation:lpTwinkle ease-in-out infinite;
}
.lp-stars i.warm{ background:#fbc78a; }
@keyframes lpTwinkle{
  0%, 100%{ opacity:.15; transform:scale(1); box-shadow:none; }
  50%{ opacity:.95; transform:scale(1.4); box-shadow:0 0 6px rgba(190,225,250,.8); }
}
@media (prefers-reduced-motion: reduce){ .lp-stars i{ animation:none; } }
.lp-hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8rem 6vw 4rem;
}
.lp-moon{
  position:absolute; top:5%; right:6%; width:225px; height:225px; z-index:1;
  /* LunarPOS planet logo, re-rendered as a true-alpha cutout (planet+rings+wordmark only) */
  background:url('assets/lp-logo-planet.webp?v=4') center/contain no-repeat;
  filter:drop-shadow(0 0 40px rgba(80,130,255,.16));
  will-change:transform, filter;
  animation:moonDrift 16s ease-in-out infinite alternate,
            moonGlow 7s ease-in-out infinite alternate;
}
@keyframes moonDrift{
  from{ transform:translateY(0) rotate(-1.5deg); }
  to{ transform:translateY(34px) rotate(2deg); }
}
@keyframes moonGlow{
  from{ filter:drop-shadow(0 0 32px rgba(80,130,255,.14)); }
  to{ filter:drop-shadow(0 0 55px rgba(120,170,255,.30)) drop-shadow(0 0 90px rgba(255,150,70,.10)); }
}
/* daily space quote — floats just below the planet; JS swaps the text once a
   day (day-of-year pick). Shares moonDrift so it moves in sync with the logo.
   The clamp keeps its left edge clear of the 720px showcase panel (which
   paints above it and would clip the text); below 1240px there's no gutter
   left, so it hides. */
.lp-moon-quote{
  position:absolute; top:calc(5% + 237px); width:225px; z-index:1;
  right:clamp(10px, 50vw - 652px, 6%);
  margin:0; pointer-events:none;
  font-style:italic; text-align:center;
  font-size:.8rem; line-height:1.55; color:var(--muted);
  text-shadow:0 2px 14px rgba(0,0,0,.65);
  will-change:transform;
  animation:moonDrift 16s ease-in-out infinite alternate;
}
@media (max-width:1240px){ .lp-moon-quote{ display:none; } }
.lp-ufo{
  position:absolute; top:calc(6% + 70px); right:calc(8% + 60px); width:110px; z-index:0;
  opacity:0; pointer-events:none; will-change:transform;
  filter:drop-shadow(0 6px 18px rgba(34,211,238,.35));
}
.lp-ufo.run{ animation:ufoFly 12s ease-in-out both; }   /* fired by JS parade */
@keyframes ufoFly{
  0%       { opacity:0; transform:translate(40px,30px) scale(.22) rotate(0deg); }
  6%       { opacity:1; transform:translate(-40px,-40px) scale(.55) rotate(-7deg); }
  18%      { transform:translate(-200px,5px) scale(.7) rotate(6deg); }
  32%      { transform:translate(-380px,-40px) scale(.8) rotate(-6deg); }
  48%      { transform:translate(-52vw,15px) scale(.9) rotate(5deg); }
  62%      { opacity:1; transform:translate(-112vw,-50px) scale(1) rotate(-10deg); }
  63%,100% { opacity:0; transform:translate(-120vw,-50px) scale(1) rotate(-10deg); }
}
.ufo-light{ animation:ufoBlink 1.1s steps(1) infinite; }
.ufo-light.l2{ animation-delay:.35s; }
.ufo-light.l3{ animation-delay:.7s; }
@keyframes ufoBlink{ 0%,60%{ opacity:1 } 61%,100%{ opacity:.25 } }
/* comet — streaks once, 10s after the UFO has left (UFO gone ~10s in).
   Starts bottom-right, exits top-left. */
.lp-comet{
  position:absolute; top:calc(100svh - 180px); right:-280px; width:260px; height:4px; z-index:0;
  pointer-events:none; opacity:0; will-change:transform;
  background:linear-gradient(90deg, #ffffff, rgba(34,211,238,.85) 18%, rgba(34,211,238,.25) 55%, transparent);
  border-radius:4px;
  transform:rotate(24deg);
}
.lp-comet.run{ animation:cometFly 3s cubic-bezier(.3,.1,.4,1) both; }   /* fired by JS parade */
.lp-comet::before{
  content:''; position:absolute; left:-7px; top:50%; width:14px; height:14px;
  transform:translateY(-50%); border-radius:50%;
  background:radial-gradient(circle, #ffffff 30%, rgba(34,211,238,.9) 60%, transparent 75%);
  box-shadow:0 0 22px 6px rgba(150,230,255,.65);
}
@keyframes cometFly{
  0%   { opacity:0; transform:rotate(24deg) translateX(0); }
  6%   { opacity:1; }
  85%  { opacity:1; }
  100% { opacity:0; transform:rotate(24deg) translateX(-150vw); }
}
/* astronaut — drifts by once, 15s after the comet (comet ends ~23s) */
.lp-astro{
  position:absolute; top:6svh; right:-200px; width:33px; z-index:700;
  opacity:0; cursor:pointer; will-change:transform;
  filter:drop-shadow(0 4px 12px rgba(140,180,230,.3));
}
.lp-astro.run{ animation:astroFloat 17s linear both; }   /* fired by JS parade */
.lp-astro svg{ display:block; }
.lp-astro.flip svg{ animation:astroFlip .9s cubic-bezier(.35,.6,.35,1); }
@keyframes astroFlip{
  0%   { transform:rotate(0deg) translateY(0); }
  50%  { transform:rotate(-180deg) translateY(-20px); }
  100% { transform:rotate(-360deg) translateY(0); }
}
@keyframes astroFloat{
  0%   { opacity:0; transform:translate(0,0) rotate(-10deg); }
  4%   { opacity:1; }
  25%  { transform:translate(-30vw,-34px) rotate(8deg); }
  50%  { transform:translate(-60vw,22px) rotate(-12deg); }
  75%  { transform:translate(-90vw,-28px) rotate(9deg); }
  95%  { opacity:1; }
  100% { opacity:0; transform:translate(-122vw,8px) rotate(-5deg); }
}
/* satellite — slow drift left -> right once, after the astronaut (~60s) */
.lp-sat{
  position:absolute; top:18%; left:-230px; width:118px; z-index:0;
  opacity:0; pointer-events:none; will-change:transform;
  filter:drop-shadow(0 6px 16px rgba(120,160,220,.3));
}
.lp-sat.run{ animation:satFloat 26s linear both; }   /* fired by JS parade */
.lp-sat .sat-blink{ animation:satBlink 1.6s steps(1) infinite; }
@keyframes satBlink{ 0%,70%{ opacity:1 } 71%,100%{ opacity:.2 } }
@keyframes satFloat{
  0%   { opacity:0; transform:translate(0,0) rotate(-8deg); }
  5%   { opacity:1; }
  50%  { transform:translate(56vw,-30px) rotate(6deg); }
  95%  { opacity:1; transform:translate(108vw,12px) rotate(-3deg); }
  100% { opacity:0; transform:translate(122vw,18px) rotate(-4deg); }
}
.lp-hero-inner{ position:relative; z-index:2; max-width:880px; }
.lp-title{
  font-size:clamp(2.8rem, 8vw, 6rem); font-weight:800; letter-spacing:-.02em;
}
.lp-title .lp-lunar{ color:var(--ink); }
.lp-title .lp-pos{
  background:linear-gradient(110deg, var(--cyan), var(--blue));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lp-version{
  display:inline-flex; align-items:center; gap:.8em; margin-top:1.2rem;
  font-family:var(--font-m); font-size:.7rem; letter-spacing:.18em; color:var(--muted);
  border:1px solid var(--line); padding:.55em 1.2em; border-radius:6px;
  animation:fadeUp 1s .65s both;
}
.lp-version b{ color:var(--amber); font-weight:700; }
.lp-hero .hero-sub{ animation-delay:.5s; }
.lp-hero .hero-cta{ animation-delay:.8s; }

.lp-logo-wrap{
  position:relative; display:inline-block; border-radius:14px; overflow:hidden;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9), 0 0 80px -28px rgba(59,130,246,.5);
  animation:lpLogoReveal 1.4s .25s cubic-bezier(.2,.7,.3,1) both,
            lpLogoFloat 9s 2s ease-in-out infinite alternate,
            lpLogoGlow 4.5s 2s ease-in-out infinite alternate;
}
.lp-logo{ display:block; width:min(720px, 92vw); border-radius:14px; }
@keyframes lpLogoReveal{
  from{ opacity:0; transform:translateY(46px) scale(.82); filter:blur(12px); }
  to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes lpLogoFloat{ from{ transform:translateY(0); } to{ transform:translateY(-12px); } }
@keyframes lpLogoGlow{
  from{ box-shadow:0 40px 100px -40px rgba(0,0,0,.9), 0 0 80px -28px rgba(59,130,246,.45); }
  to{ box-shadow:0 40px 100px -40px rgba(0,0,0,.9), 0 0 110px -22px rgba(96,165,250,.75); }
}
@media (prefers-reduced-motion: reduce){
  .lp-logo-wrap{ animation:none; }
}
.lp-shot{ display:block; width:100%; }
.lp-screen-img{ aspect-ratio:auto; }
.lp-shot-caption{
  text-align:center; margin-top:1.4rem; font-family:var(--font-m); font-size:.68rem;
  letter-spacing:.2em; color:var(--muted); text-transform:uppercase;
}
.lp-action-frame{
  border-radius:14px; overflow:hidden; perspective:1200px;
  border:1px solid rgba(34,211,238,.25);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9), 0 0 70px -28px rgba(34,211,238,.4);
  transition:transform .6s cubic-bezier(.2,.8,.25,1), opacity .9s cubic-bezier(.2,.7,.2,1);
}
.lp-action-frame:hover{ transform:scale(1.012); }
.lp-action-frame img{ display:block; width:100%; }

/* tablet mockup */
.lp-tablet-wrap{
  perspective:1500px; margin:4.5rem auto 0; max-width:980px; width:100%;
  animation:fadeUp 1.1s 1s both; position:relative; z-index:2;
}
.lp-tablet{
  border-radius:22px; padding:16px; background:linear-gradient(160deg,#2a3548,#0d1322);
  border:1px solid rgba(160,185,220,.25);
  box-shadow:0 60px 130px -40px rgba(0,0,0,.9), 0 0 90px -30px rgba(34,211,238,.35);
  transform:rotateX(12deg); transform-origin:center bottom;
  transition:transform .8s cubic-bezier(.2,.8,.25,1);
}
.lp-tablet-wrap:hover .lp-tablet{ transform:rotateX(4deg) scale(1.015); }
.lp-screen{
  border-radius:10px; background:#1F2937; overflow:hidden; aspect-ratio:3/2;
  display:flex; flex-direction:column; text-align:left;
}
.lp-statusbar{
  display:flex; align-items:center; gap:1em; padding:.7em 1.2em;
  background:#111827; font-family:var(--font-m); font-size:.6rem; letter-spacing:.12em;
}
.lp-online{
  display:inline-flex; align-items:center; gap:.6em; color:#10B981; font-weight:700;
}
.lp-online::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#10B981;
  box-shadow:0 0 8px #10B981; animation:pulseDot 2s ease-in-out infinite;
}
.lp-sb-title{ color:#9aa7bd; margin-left:auto; }
.lp-heartbeat{ display:flex; align-items:flex-end; gap:2.5px; height:14px; }
.lp-heartbeat i{
  width:3.5px; background:var(--cyan); border-radius:2px;
  animation:hb 1.1s ease-in-out var(--d,0s) infinite alternate;
}
@keyframes hb{ from{ height:22% } to{ height:100% } }
.lp-dash{
  flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px;
  align-content:stretch;
}
.lp-tile{
  border-radius:8px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
  padding:10px 12px; color:#fff; min-height:0;
  font-family:var(--font-d); font-weight:600; font-size:clamp(.5rem, 1.1vw, .72rem);
  opacity:0; transform:translateY(16px) scale(.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px -8px rgba(0,0,0,.6);
  transition:filter .3s, transform .3s;
  cursor:default;
}
.lp-tile:hover{ filter:brightness(1.18); transform:translateY(-2px) scale(1.02); }
.lp-screen.live .lp-tile{ animation:tileIn .55s cubic-bezier(.2,.9,.3,1.3) both; animation-delay:calc(var(--i)*.07s); }
@keyframes tileIn{ from{opacity:0; transform:translateY(16px) scale(.94)} to{opacity:1; transform:none} }
.lp-tile small{ font-family:var(--font-b); font-weight:400; opacity:.75; font-size:.85em; }

/* lunar sections */
.lp-section{ position:relative; padding:7.5rem 6vw; max-width:1380px; margin:0 auto; }
.lp-pillars{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(255px,100%),1fr)); gap:1.2rem; }
.lp-pillar{
  --ac:var(--cyan);
  padding:1.8rem 1.6rem; border-radius:8px;
  background:linear-gradient(160deg, rgba(20,30,52,.8), rgba(10,17,32,.88));
  border:1px solid var(--line); transition:border-color .35s, transform .35s, box-shadow .35s, opacity .9s cubic-bezier(.2,.7,.2,1);
}
.lp-pillar:hover{
  transform:translateY(-6px); border-color:color-mix(in srgb, var(--ac) 50%, transparent);
  box-shadow:0 22px 56px -26px color-mix(in srgb, var(--ac) 45%, transparent);
}
.lp-pillar .ind-icon{ margin-bottom:1rem; }
.lp-pillar h3{ font-size:.95rem; margin-bottom:.5rem; }
.lp-pillar p{ font-size:.86rem; color:var(--muted); }

/* LunarAi */
.lp-ai{
  background:
    radial-gradient(55% 70% at 18% 30%, rgba(34,211,238,.09), transparent 70%),
    radial-gradient(45% 60% at 85% 75%, rgba(59,130,246,.08), transparent 70%);
  border-block:1px solid var(--line);
}
.lp-ai-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; max-width:1380px; margin:0 auto; }
.lp-voice{ display:flex; align-items:center; gap:.45rem; height:64px; margin:1.8rem 0; }
.lp-voice i{
  width:6px; border-radius:4px; background:linear-gradient(180deg, var(--cyan), var(--blue));
  animation:vb 1s ease-in-out var(--d,0s) infinite alternate;
  box-shadow:0 0 14px rgba(34,211,238,.5);
}
@keyframes vb{ from{ height:14%; opacity:.65 } to{ height:100%; opacity:1 } }
.lp-ai-feats{ list-style:none; display:flex; flex-direction:column; gap:.85rem; margin-top:1.8rem; }
.lp-ai-feats li{ display:flex; gap:.9em; align-items:flex-start; color:#c6d2e4; font-size:.96rem; }
.lp-ai-feats li::before{ content:'✦'; color:var(--cyan); margin-top:.1em; flex:0 0 auto; }
.lp-chat{
  border-radius:8px; padding:1.8rem; background:rgba(10,16,30,.85);
  border:1px solid rgba(34,211,238,.25);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 70px -30px rgba(34,211,238,.4);
  font-size:.92rem;
}
.lp-chat-head{
  display:flex; align-items:center; gap:.8em; padding-bottom:1.1rem; margin-bottom:1.3rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-m); font-size:.66rem; letter-spacing:.22em; color:var(--cyan); text-transform:uppercase;
}
.lp-chat-head::before{
  content:''; width:10px; height:10px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulseDot 2s infinite;
}
.lp-bubble{ border-radius:8px; padding:.95em 1.2em; margin-bottom:.9rem; max-width:88%; line-height:1.5; opacity:0; transform:translateY(14px); }
.lp-ai-grid.in .lp-bubble{ animation:featIn .6s cubic-bezier(.2,.8,.25,1) both; }
.lp-bubble.user{ background:#27344c; margin-left:auto; color:#dde6f3; }
.lp-ai-grid.in .lp-bubble.user{ animation-delay:.3s; }
.lp-bubble.luno{ background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.3); color:#c9ecf5; }
.lp-ai-grid.in .lp-bubble.luno{ animation-delay:.9s; }
.lp-bubble.luno b{ color:var(--cyan); }
.lp-bubble .cursor{ display:inline-block; width:8px; height:1em; vertical-align:-.15em; background:var(--cyan); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* dual DB */
.lp-db-stage{
  display:flex; align-items:center; justify-content:center; gap:0; margin-top:3.5rem; flex-wrap:wrap;
}
.lp-node{
  width:230px; padding:2rem 1.6rem; border-radius:8px; text-align:center;
  background:linear-gradient(165deg, rgba(20,30,52,.9), rgba(10,17,32,.92));
  border:1px solid rgba(34,211,238,.3);
}
.lp-node h4{ font-size:.9rem; margin:.9rem 0 .35rem; }
.lp-node p{ font-size:.78rem; color:var(--muted); }
.lp-node .ind-icon{ margin:0 auto; }
.lp-sync{
  position:relative; width:200px; height:3px; margin:0 .5rem;
  background:rgba(34,211,238,.18); border-radius:3px; overflow:visible;
}
.lp-sync::before{
  content:''; position:absolute; top:50%; left:0; width:34px; height:7px; border-radius:6px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, var(--cyan));
  box-shadow:0 0 16px var(--cyan);
  animation:syncPulse 1.8s ease-in-out infinite alternate;
}
@keyframes syncPulse{ from{ left:0 } to{ left:calc(100% - 34px) } }
.lp-sync-label{
  position:absolute; top:-2.2em; left:50%; transform:translateX(-50%);
  font-family:var(--font-m); font-size:.6rem; letter-spacing:.24em; color:var(--cyan); white-space:nowrap;
}
.lp-status-pills{ display:flex; gap:.8rem; justify-content:center; margin-top:2.6rem; flex-wrap:wrap; }
.lp-pill{
  font-family:var(--font-m); font-size:.64rem; letter-spacing:.2em; padding:.55em 1.3em; border-radius:6px;
}
.lp-pill.on{ background:rgba(16,185,129,.12); color:#10B981; border:1px solid rgba(16,185,129,.4); }
.lp-pill.off{ background:rgba(239,68,68,.1); color:#EF4444; border:1px solid rgba(239,68,68,.4); }
.lp-pill.sync{ background:rgba(245,158,11,.1); color:#F59E0B; border:1px solid rgba(245,158,11,.4); }

/* modules + hardware chips */
.lp-chips{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.4rem; }
.lp-chip{
  font-family:var(--font-d); font-weight:600; font-size:.78rem; letter-spacing:.06em;
  padding:.8em 1.5em; border-radius:8px; border:1px solid var(--line); color:var(--muted);
  transition:color .3s, border-color .3s, transform .3s, box-shadow .3s; cursor:default;
}
.lp-chip:hover{
  color:var(--ink); border-color:rgba(34,211,238,.5); transform:translateY(-3px);
  box-shadow:0 14px 34px -16px rgba(34,211,238,.5);
}

/* security strip */
.lp-sec{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.3rem; margin-top:3rem; }
@media (max-width:960px){ .lp-sec{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .lp-sec{ grid-template-columns:1fr; } }
.lp-sec-item{
  padding:1.9rem 1.6rem; border-radius:8px; border:1px solid var(--line);
  background:rgba(13,21,38,.6); display:flex; flex-direction:column; gap:1rem;
  align-items:flex-start; min-height:210px;
}
.lp-sec-item .ind-icon{ width:44px; height:44px; margin:0; flex:0 0 auto; }
.lp-sec-item .ind-icon svg{ width:22px; height:22px; }
.lp-sec-item h4{ font-size:.86rem; margin-bottom:.3rem; }
.lp-sec-item p{ font-size:.82rem; color:var(--muted); }

/* back-link breadcrumb */
.lp-back{
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:2rem;
  font-family:var(--font-m); font-size:.68rem; letter-spacing:.2em; color:var(--muted);
  text-transform:uppercase; transition:color .3s; animation:fadeUp 1s .1s both;
}
.lp-back:hover{ color:var(--cyan); }

/* ── responsive ──────────────────────────────── */
@media (max-width:1020px){
  .as-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .lp-ai-grid{ grid-template-columns:1fr; gap:3rem; }
  .hw-stage{ grid-template-columns:1fr; }
  .lp-moon{ width:180px; height:180px; right:3%; top:4%; }
}
@media (max-width:760px){
  .demo-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .demo-form{ grid-template-columns:1fr; }
  .demo-left h2 br{ display:none; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav .btn-accent{ margin-left:auto; }
  .nav .nav-quote{ margin-left:.5rem; }
}
@media (max-width:560px){
  .nav{ gap:.4rem; padding:.7rem 3vw; }
  .nav.scrolled{ padding:.55rem 3vw; }
  .nav .btn-small{ padding:.55em .7em; font-size:.56rem; letter-spacing:.02em; }
  .nav .nav-quote{ margin-left:.3rem; }
}
@media (max-width:380px){
  .nav .btn-small{ padding:.5em .55em; font-size:.5rem; letter-spacing:0; }
}
@media (max-width:860px){
  .hero-stats{ gap:1.4rem; }
  .stat-num{ font-size:1.5rem; }
  .section{ padding:6rem 6vw; }
  /* chamber flattens to a simple grid on touch/small screens */
  .chamber{ height:auto; min-height:0; perspective:none; overflow:visible; }
  .chamber-vignette, .chamber-floor, .chamber-horizon, .dust, .chamber-lbl{ display:none; }
  .chamber-scene{
    position:relative; inset:auto; transform:none !important;
    padding:2.5rem 6vw 3.5rem;
  }
  .chamber-wall{
    position:relative; left:auto; top:auto; transform:none;
    display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  }
  .wall-tile{ width:auto; transform:none; opacity:1; animation:none !important; }
  .tile-screen{ height:150px; }
  .quote-stage{ padding:2.6rem 1.4rem 4.5rem; }
  .quote{ inset:2.6rem 1.4rem auto; }
  .lp-sync{ transform:rotate(90deg); margin:2.6rem 0; }
}

.hint-mobile{ display:none; }

/* ── phones ──────────────────────────────────── */
@media (max-width:600px){
  body{ font-size:16px; }
  .hint-desktop{ display:none; }
  .hint-mobile{ display:inline; }

  /* hero */
  .hero{ padding:6.5rem 6vw 4.5rem; }
  .hero-title{ font-size:clamp(1.9rem, 8.6vw, 2.6rem); }
  .hero-kicker{ font-size:.6rem; }
  .hero-stats{ flex-wrap:wrap; gap:1.2rem 1.6rem; margin-top:2.6rem; }
  .stat-divider{ display:none; }
  .stat{ align-items:center; }
  .hero-cta{ flex-direction:column; align-items:stretch; width:100%; max-width:340px; margin-left:auto; margin-right:auto; }
  .hero-cta .btn{ justify-content:center; }
  .scroll-hint{ display:none; }

  /* sections */
  .section{ padding:4.5rem 6vw; }
  .section-head{ margin-bottom:2.8rem; }
  .ind-card p{ min-height:0; }

  /* detail screens & demo form */
  .app-screen-body{ max-height:none; height:100%; padding:4.5rem 1.1rem 2rem; }
  .app-screen{ place-items:stretch; }
  .as-left h2{ font-size:1.7rem; }
  .as-features li{ font-size:.88rem; }
  .app-screen-close{ width:42px; height:42px; top:1rem; left:1rem; }
  .demo-info{ margin-top:1.4rem; }

  /* reviews — quotes need room when narrow */
  .quote-stage{ min-height:460px; }
  .quote p{ font-size:1rem; }

  /* contact + footer */
  .contact-card{ padding:3.5rem 1.4rem; }
  .cd-row{ flex-wrap:wrap; gap:.3em 1em; }
  .footer-links{ gap:1.1rem 1.4rem; }

  /* lunarpos page */
  .lp-hero{ padding:6.5rem 6vw 3.5rem; }
  .lp-moon{ width:115px; height:115px; top:2.5%; right:3%; }
  .lp-version{ flex-wrap:wrap; justify-content:center; text-align:center; line-height:2; }
  .lp-tablet{ padding:8px; border-radius:14px; }
  .lp-section{ padding:4.5rem 6vw; }
  .lp-chat{ padding:1.2rem; }
  .lp-node{ width:100%; max-width:280px; }
}

/* NOTE: a global @media (prefers-reduced-motion: reduce) reset used to live
   here — it neutralised every animation/transition (and the scroll reveals,
   marquee, starfield, app + hardware tiles) on machines with the OS
   "reduce motion" setting on. Disabled by request so the site animates
   the same for everyone. The JS reducedMotion flag is forced false to match. */