/* Web2App Ultimate — Apex theme · © 2026 Vikas Chandra Guru — Spread Services. */
:root{
  --ink:#070B14; --ink2:#0B1220; --panel:#0E1626;
  --apex:#FF4655; --apex2:#B11118; --apex-soft:#FF8A93;
  --paper:#EAF0F8; --muted:#8B98AE; --line:rgba(255,255,255,.07);
}
*{ -webkit-font-smoothing:antialiased; }
body{ background:var(--ink); color:var(--paper); }

/* film grain */
.grain::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{ position:absolute; border-radius:50%; filter:blur(120px); z-index:0; }
.breathe{ animation:breathe 10s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity:.38; transform:scale(1) } 50%{ opacity:.6; transform:scale(1.1) } }

.grad-text{ background:linear-gradient(115deg,var(--apex-soft),var(--apex) 55%,#C81E2A);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hairline{ border:1px solid var(--line); }
.panel{ background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border:1px solid var(--line); }

.lift{ transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; }
.lift:hover{ transform:translateY(-6px); border-color:rgba(255,70,85,.45);
  box-shadow:0 24px 70px -28px rgba(255,70,85,.4); }

/* staggered reveal */
.reveal{ opacity:0; animation:reveal 1s cubic-bezier(.2,.85,.25,1) forwards; }
@keyframes reveal{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

/* marquee */
.marquee-mask{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee{ display:flex; gap:3.5rem; white-space:nowrap; width:max-content; animation:marquee 30s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* hero phone */
.phone{ box-shadow:0 40px 120px -40px rgba(255,70,85,.45), 0 10px 40px -10px rgba(0,0,0,.8); }
.scan{ background:linear-gradient(180deg,transparent,rgba(255,70,85,.07),transparent); animation:scan 5s linear infinite; }
@keyframes scan{ from{ transform:translateY(-100%) } to{ transform:translateY(220%) } }

.tick{ background:linear-gradient(135deg,var(--apex),var(--apex2)); }
a{ text-decoration:none; }
::selection{ background:var(--apex); color:#fff; }
html{ scroll-behavior:smooth; }

/* ---- animated hero phone (cycles through feature screens like a GIF) ---- */
.hero-screens{ position:absolute; inset:0; }
.hs{ position:absolute; inset:0; opacity:0; animation:heroCycle 15s infinite both; }
@keyframes heroCycle{
  0%{ opacity:0; transform:scale(.985) }
  3%{ opacity:1; transform:none }
  14.5%{ opacity:1; transform:none }
  17.5%{ opacity:0; transform:scale(1.015) }
  100%{ opacity:0 }
}
.hcap{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg,var(--apex),var(--apex2)); padding:4px 11px; border-radius:999px; white-space:nowrap; }
.hpush{ animation:hpush 15s infinite both; animation-delay:5s; }
@keyframes hpush{ 0%{ transform:translateY(-14px); opacity:0 } 4%{ transform:none; opacity:1 } 15%{ opacity:1 } 18%{ opacity:0 } 100%{ opacity:0 } }

/* ---- workspace ---- */
.ws-nav a.active{ color:var(--paper); border-left-color:var(--apex); }
.ws-nav a{ border-left:2px solid transparent; }
.seg{ transition:all .25s; }
.seg.on{ background:linear-gradient(135deg,var(--apex),var(--apex2)); color:#fff; }
.ptr{ animation:spin 1.4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }