/* ============================================================
   PREMIUM LAYER — motion system + live product showcase
   Adds to the existing homepage without changing it.
   Pure CSS/JS. No libraries. Total weight a few KB.
   ============================================================ */

:root{
  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --e-soft:cubic-bezier(.22,.61,.36,1);
  --e-sharp:cubic-bezier(.4,0,.2,1);
}

/* ---------- 1. HEADLINE: words rise in sequence ---------- */
.wsplit{ display:inline-block; overflow:hidden; vertical-align:top; }
.wsplit > i{ display:inline-block; font-style:inherit; transform:translateY(105%);
             opacity:0; transition:transform .9s var(--e-expo), opacity .7s var(--e-soft); }
.wsplit.in > i{ transform:none; opacity:1; }

/* ---------- 2. REVEAL with direction + stagger ---------- */
[data-rise]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--e-soft), transform .9s var(--e-expo); }
[data-rise].in{ opacity:1; transform:none; }
[data-rise="left"]{ transform:translateX(-30px); }
[data-rise="right"]{ transform:translateX(30px); }
[data-rise="scale"]{ transform:scale(.94); }
[data-rise].in{ transform:none; }
[data-stagger] > *{ opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--e-soft), transform .8s var(--e-expo); }
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(1){ transition-delay:.00s }
[data-stagger].in > *:nth-child(2){ transition-delay:.07s }
[data-stagger].in > *:nth-child(3){ transition-delay:.14s }
[data-stagger].in > *:nth-child(4){ transition-delay:.21s }
[data-stagger].in > *:nth-child(5){ transition-delay:.28s }
[data-stagger].in > *:nth-child(6){ transition-delay:.35s }
[data-stagger].in > *:nth-child(7){ transition-delay:.42s }
[data-stagger].in > *:nth-child(8){ transition-delay:.49s }
[data-stagger].in > *:nth-child(9){ transition-delay:.56s }

/* ---------- 3. CARDS: lift, tilt, glow edge ---------- */
.lift{ transition:transform .5s var(--e-expo), border-color .4s, background .4s, box-shadow .5s var(--e-expo); will-change:transform; }
.lift:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(20,22,26,.10); }
.tilt{ transform-style:preserve-3d; transition:transform .35s var(--e-soft); }
.edge{ position:relative; }
.edge::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(130deg, rgba(14,116,144,.65), rgba(109,40,217,.45) 45%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--e-soft); pointer-events:none;
}
.edge:hover::after{ opacity:1; }

/* ---------- 4. MAGNETIC BUTTONS ---------- */
.mag{ transition:transform .35s var(--e-spring); will-change:transform; }

/* ---------- 5. CURSOR SPOTLIGHT (desktop only) ---------- */
#spot{ position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0;
  transition:opacity .6s var(--e-soft);
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),
             rgba(109,40,217,.06), transparent 62%); }
body.spot-on #spot{ opacity:1; }

/* ---------- 6. SCROLL PROGRESS BAR ---------- */
#prog{ position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:0 50%;
  transform:scaleX(0); background:var(--grad); z-index:200; }

/* ---------- 7. SECTION PARALLAX ---------- */
[data-par]{ will-change:transform; }

/* ---------- 8. MARQUEE ---------- */
.marq{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
       padding:18px 0; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marq-in{ display:flex; gap:52px; width:max-content; animation:marq 38s linear infinite; }
.marq:hover .marq-in{ animation-play-state:paused; }
.marq span{ font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--txt3);
            white-space:nowrap; display:inline-flex; align-items:center; gap:12px; letter-spacing:-.01em; }
.marq span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--cyan); flex:none; }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ============================================================
   LIVE PRODUCT SHOWCASE
   ============================================================ */
.live-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; }
@media(max-width:900px){ .live-wrap{ grid-template-columns:1fr; } }

.ind-pills{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.ind-pills button{ background:var(--panel); border:1px solid var(--line2); color:var(--txt2);
  padding:10px 18px; border-radius:999px; font-size:.88rem; font-weight:500; cursor:pointer;
  font-family:inherit; transition:.3s var(--e-soft); }
.ind-pills button:hover{ border-color:var(--cyan); color:var(--txt); transform:translateY(-2px); }
.ind-pills button.on{ background:var(--grad); color:#fff; border-color:transparent; font-weight:600; }

.live-copy h3{ font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.03em; margin-bottom:12px; }
.live-copy .prob{ color:var(--txt2); font-size:1.02rem; line-height:1.65; }
.live-feats{ margin-top:22px; }
.live-feats div{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line);
  font-size:.94rem; color:var(--txt2); opacity:0; transform:translateX(-14px);
  transition:opacity .5s var(--e-soft), transform .6s var(--e-expo); }
.live-feats.in div{ opacity:1; transform:none; }
.live-feats.in div:nth-child(2){ transition-delay:.08s } .live-feats.in div:nth-child(3){ transition-delay:.16s }
.live-feats.in div:nth-child(4){ transition-delay:.24s }
.live-feats div:last-child{ border-bottom:none; }
.live-feats b{ color:var(--txt); }
.live-feats .dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--cyan); margin-top:8px;
  box-shadow:0 0 10px rgba(14,116,144,.45); }

/* the phone */
.dev{ position:relative; width:302px; max-width:100%; margin:0 auto; }
.dev::before{ content:''; position:absolute; inset:-14% -22% -10%;
  background:radial-gradient(closest-side, rgba(109,40,217,.13), transparent 70%); pointer-events:none; }
.dev-body{ position:relative; border:1px solid var(--line2); border-radius:40px; background:#101018;
  padding:11px; box-shadow:0 40px 80px rgba(20,22,26,.22), 0 8px 20px rgba(20,22,26,.10), inset 0 1px 0 rgba(255,255,255,.08); }
/* The phone keeps its own dark UI — a real device sitting on paper.
   Everything inside re-declares the palette, otherwise the new dark ink
   would render invisible against the dark screen. */
.dev-scr{ background:#0B0B12; border:1px solid rgba(255,255,255,.10); border-radius:31px; overflow:hidden;
  height:568px; display:flex; flex-direction:column;
  --txt:#F3F4F7; --txt2:rgba(243,244,247,.66); --txt3:rgba(243,244,247,.42);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --cyan:#34E5FF; --violet:#8B5CFF;
  --grad:linear-gradient(100deg,#34E5FF,#8B5CFF);
  color:var(--txt); }
.dev-bar{ height:26px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; font-size:.62rem; color:var(--txt3); flex:none; }

.pane{ display:none; flex-direction:column; height:100%; animation:paneIn .45s var(--e-expo); }
.pane.on{ display:flex; }
@keyframes paneIn{ from{ opacity:0; transform:translateX(10px) } to{ opacity:1; transform:none } }
.pane-top{ padding:12px 17px 13px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:11px; flex:none; }
.pane-back{ width:27px; height:27px; border-radius:50%; border:1px solid var(--line2); display:grid;
  place-items:center; cursor:pointer; color:var(--txt2); font-size:.95rem; flex:none; transition:.25s; }
.pane-back:hover{ border-color:var(--cyan); color:var(--cyan); }
.pane-t{ font-family:var(--display); font-weight:700; font-size:.98rem; letter-spacing:-.02em; }
.pane-s{ font-size:.7rem; color:var(--txt3); margin-top:1px; }
.pane-body{ padding:15px 17px 20px; overflow-y:auto; flex:1; }
.pane-body::-webkit-scrollbar{ width:0 }

.mrow{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); }
.mrow:last-child{ border-bottom:none }
.mrow.go{ cursor:pointer; margin:0 -9px; padding-left:9px; padding-right:9px; border-radius:11px; transition:.22s; }
.mrow.go:hover{ background:rgba(255,255,255,.05) }
.mrow .ic{ flex:none; width:31px; height:31px; border-radius:10px; display:grid; place-items:center;
  font-size:.88rem; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.mrow .m{ flex:1; min-width:0 }
.mrow .nm{ font-size:.84rem; font-weight:600 }
.mrow .sb{ font-size:.7rem; color:var(--txt3); margin-top:1px }
.mrow .rt{ font-size:.74rem; font-weight:700; color:var(--cyan); white-space:nowrap }
.mrow .ch{ color:var(--txt3); font-size:.85rem }

.mbig{ text-align:center; padding:16px 0 14px }
.mbig .v{ font-family:var(--display); font-weight:800; font-size:2.5rem; letter-spacing:-.035em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1 }
.mbig .k{ font-size:.74rem; color:var(--txt2); margin-top:6px }
.mmeter{ height:7px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin:11px 0 5px }
.mmeter i{ display:block; height:100%; border-radius:99px; background:var(--grad); width:0;
  transition:width 1.1s var(--e-expo) .2s }
.pane.on .mmeter i{ width:var(--w,60%) }
.mlab{ font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt3); margin:16px 0 7px }
.mnote{ font-size:.76rem; line-height:1.55; padding:11px 13px; border-radius:11px; margin:11px 0;
  background:rgba(52,229,255,.10); border:1px solid rgba(52,229,255,.28); color:var(--txt) }
.mnote b{ color:var(--cyan) }
.mmeal{ border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:9px;
  background:rgba(255,255,255,.028) }
.mmeal .h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px }
.mmeal .t{ font-family:var(--display); font-weight:700; font-size:.8rem }
.mmeal .c{ font-size:.67rem; color:var(--cyan); font-weight:700 }
.mmeal li{ font-size:.73rem; color:var(--txt2); padding:3px 0 3px 12px; position:relative; list-style:none }
.mmeal li::before{ content:''; position:absolute; left:0; top:11px; width:4px; height:4px;
  border-radius:50%; background:var(--cyan) }

.taphint{ text-align:center; margin-top:20px; font-size:.82rem; color:var(--txt3);
  display:inline-flex; align-items:center; gap:9px; }
.taphint .k{ padding:3px 9px; border:1px solid var(--line2); border-radius:6px; font-size:.72rem; color:var(--txt2) }
.dev-foot{ text-align:center; margin-top:18px }

@media (prefers-reduced-motion: reduce){
  .wsplit > i, [data-rise], [data-stagger] > *, .live-feats div{ transition:none !important; opacity:1 !important; transform:none !important; }
  .marq-in{ animation:none }
  .pane{ animation:none }
}