/* ==========================================================================
   NovaStacks — Premium elevation layer (v2)
   Reference-driven: depth, lighting, motion. Loaded after styles.css.
   ========================================================================== */

:root {
  --r-card: 20px;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
  --shadow-float: 0 30px 80px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
  --glow-indigo: rgba(99,102,241,.55);
  --glow-cyan: rgba(34,211,238,.45);
  --glow-violet: rgba(139,92,246,.5);
}

/* ----------------------------------------------------------- animated background */
.site-bg { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.site-bg .aura { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.site-bg .a1 { width: 46vw; height: 46vw; top: -14vw; right: -8vw; background: radial-gradient(circle, var(--glow-indigo), transparent 68%); animation: drift1 26s ease-in-out infinite; }
.site-bg .a2 { width: 40vw; height: 40vw; top: 28vh; left: -12vw; background: radial-gradient(circle, var(--glow-cyan), transparent 68%); animation: drift2 32s ease-in-out infinite; }
.site-bg .a3 { width: 38vw; height: 38vw; bottom: -12vw; left: 38vw; background: radial-gradient(circle, var(--glow-violet), transparent 68%); animation: drift3 30s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-4vw,5vh,0) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(5vw,-4vh,0) scale(1.15)} }
@keyframes drift3 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-3vw,-6vh,0) scale(1.1)} }
/* tone down the static gradients from styles.css so the animated ones lead */
body::before { opacity: .5; }

/* ----------------------------------------------------------- shared polish */
.section-head .eyebrow { box-shadow: 0 0 30px -8px var(--glow-indigo); }
.card, .pcard, .feature-card, .stat-card { border-radius: var(--r-card); }
.btn-primary { box-shadow: 0 10px 30px -10px rgba(99,102,241,.7), 0 0 0 1px rgba(129,140,248,.25) inset; }

/* ----------------------------------------------------------- HERO redesign */
.hero { padding-block: clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem); }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1.18fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
.hero-grid .hero-inner { max-width: 600px; }
.hero h1 { font-size: clamp(2.5rem,4.4vw,4rem); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.8rem 2.4rem; margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--border); }
.hero-stats .stat-num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats .stat-label { font-size: .82rem; color: var(--text-dim); margin-top: .35rem; }

/* hero floating composition */
.hero-stage { position: relative; perspective: 1700px; min-height: 460px; }
.stage-inner { position: relative; transform-style: preserve-3d; will-change: transform; }
.stage-glow { position: absolute; inset: -8% -4% -4% -4%; background:
  radial-gradient(50% 50% at 70% 35%, rgba(99,102,241,.35), transparent 70%),
  radial-gradient(45% 45% at 25% 75%, rgba(34,211,238,.28), transparent 70%); filter: blur(20px); z-index: 0; }
.laptop { position: relative; z-index: 2; transform: rotateY(-15deg) rotateX(7deg) translateZ(0); transform-origin: center; box-shadow: var(--shadow-float); border-radius: 16px; }
.laptop-screen { border: 9px solid #1a2236; border-bottom-width: 7px; border-radius: 16px 16px 6px 6px; background: #0b1120; overflow: hidden; aspect-ratio: 16/10; position: relative; }
.laptop-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 40%); pointer-events: none; }
.laptop-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.laptop-base { height: 13px; margin: 0 -22px; border-radius: 0 0 14px 14px; background: linear-gradient(#2a3450, #0e1421); box-shadow: inset 0 2px 4px rgba(255,255,255,.08); position: relative; }
.laptop-base::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 90px; height: 6px; background: #0a0f18; border-radius: 0 0 8px 8px; }

.stage-phone { position: absolute; z-index: 3; width: 116px; border-radius: 22px; border: 6px solid #0e1421; background: #0e1421; overflow: hidden; box-shadow: var(--shadow-float); }
.stage-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-phone.p1 { bottom: -6%; left: -4%; transform: rotate(-6deg); animation: floaty 7s ease-in-out infinite; }
.stage-phone.p2 { top: -8%; right: 2%; width: 104px; transform: rotate(7deg); animation: floaty 8.5s ease-in-out infinite reverse; }

.stage-card { position: absolute; z-index: 4; right: -2%; bottom: 14%; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(20,26,42,.85), rgba(12,16,26,.8)); backdrop-filter: blur(12px); box-shadow: var(--shadow-soft); animation: floaty 6s ease-in-out infinite; }
.stage-card .sc-row { display: flex; align-items: center; gap: .6rem; }
.stage-card .sc-dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--accent)); }
.stage-card .sc-dot svg { width: 16px; height: 16px; color: #fff; }
.stage-card .sc-k { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1; }
.stage-card .sc-l { font-size: .72rem; color: var(--text-dim); }

@keyframes floaty { 0%,100%{ transform: translateY(0) var(--rot,rotate(0deg)); } 50%{ transform: translateY(-12px) var(--rot,rotate(0deg)); } }
.stage-phone.p1 { --rot: rotate(-6deg); }
.stage-phone.p2 { --rot: rotate(7deg); }

/* ----------------------------------------------------------- marquee strip */
.strip { padding-block: clamp(2rem,4vw,3rem); border-block: 1px solid var(--border); position: relative; }
.strip-label { text-align: center; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.4rem; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 3rem; animation: scrollx 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 46s; }
.marquee-item { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: #aeb8cf; white-space: nowrap; opacity: .85; transition: color .2s, opacity .2s; }
.marquee-item:hover { color: #fff; opacity: 1; }
.marquee-item svg { width: 20px; height: 20px; color: var(--accent); opacity: .9; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------- product grid v2 */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.pcard { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.pcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(129,140,248,.5), transparent 40%, transparent 60%, rgba(34,211,238,.35)); -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 .3s; pointer-events: none; }
.pcard:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-float); }
.pcard:hover::before { opacity: 1; }
.pcard-media { position: relative; background: #0a0e18; border-bottom: 1px solid var(--border); overflow: hidden; }
.pcard-media .browser-bar { padding: 8px 12px; }
.pcard-shot { aspect-ratio: 16/10; overflow: hidden; }
.pcard-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.pcard:hover .pcard-shot img { transform: scale(1.03); }
.pcard-banner { aspect-ratio: 16/10; display: grid; place-items: center; background: #0a0e18; padding: 1.1rem; }
.pcard-banner img { width: 100%; height: 100%; object-fit: contain; }
.pcard-phone { aspect-ratio: 16/10; display: grid; place-items: center; background: radial-gradient(60% 80% at 50% 20%, rgba(99,102,241,.18), transparent 70%); padding: 1rem 0 0; }
.pcard-phone .mini-phone { width: 116px; border-radius: 20px 20px 0 0; border: 6px solid #0e1421; border-bottom: 0; background: #0e1421; overflow: hidden; box-shadow: var(--shadow-soft); }
.pcard-phone .mini-phone img { display: block; width: 100%; object-fit: cover; }
.pcard-body { padding: 1.3rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.pcard-head { display: flex; align-items: center; gap: .7rem; }
.pcard-head .product-logo { width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; }
.pcard-head h3 { font-size: 1.18rem; margin: 0; line-height: 1.1; }
.pcard-head .cat { font-size: .76rem; color: var(--accent); font-family: var(--font-display); }
.pcard-body > p { font-size: .9rem; color: var(--text-muted); margin: 0; }
.pcard .tag-row { margin-top: auto; }
.pcard-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.pcard-actions .btn { padding: .6rem 1rem; font-size: .85rem; flex: 1; justify-content: center; }
.pcard-actions .btn svg { width: 15px; height: 15px; }

/* ----------------------------------------------------------- stats band */
.stats-band { border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: clamp(1.8rem,3.5vw,2.8rem) clamp(1.5rem,3vw,2.5rem);
  background: radial-gradient(700px 300px at 80% 0%, rgba(99,102,241,.16), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat-item .stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,4vw,2.8rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-item .stat-label { font-size: .9rem; color: var(--text-muted); margin-top: .5rem; }
.stat-item + .stat-item { border-left: 1px solid var(--border); }

/* ----------------------------------------------------------- why feature cards */
.feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.feature-card { padding: 1.6rem; border: 1px solid var(--border); border-radius: var(--r-card); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); transition: transform .25s, border-color .25s, box-shadow .25s; }
.feature-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-soft); }
.feature-card .fc-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 1.1rem; background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(34,211,238,.16)); border: 1px solid rgba(129,140,248,.28); }
.feature-card .fc-ico svg { width: 24px; height: 24px; color: #c7d0ff; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.feature-card p { font-size: .92rem; }

/* product page hero media — show FULL screenshot (no crop) */
.product-hero-media .browser-frame > img { aspect-ratio: 16/10; object-fit: cover; object-position: top center; }
.gallery .browser-frame > img { aspect-ratio: 16/10; object-fit: cover; object-position: top center; }

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-bg .aura, .stage-phone, .stage-card, .marquee-track { animation: none !important; }
  .laptop { transform: none; }
}

/* ----------------------------------------------------------- responsive */
/* collapse nav to hamburger earlier so tablets never overflow */
@media (max-width: 900px) {
  .site-header .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: block; position: fixed; inset: 74px 0 auto 0; z-index: 99; background: rgba(8,11,20,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 1.2rem var(--gutter) 1.6rem; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .25s; }
  .mobile-menu.open { transform: none; opacity: 1; pointer-events: auto; }
  .mobile-menu .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; }
  .mobile-menu .nav-links a { padding: .85rem 1rem; font-size: 1rem; }
  .mobile-menu .btn { display: inline-flex; width: 100%; margin-top: .8rem; }
}
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-grid .hero-inner { max-width: 640px; }
  .hero-stage { min-height: 360px; max-width: 560px; margin-inline: auto; width: 100%; }
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
  .stat-item + .stat-item { border-left: 0; }
  .stat-item:nth-child(3), .stat-item:nth-child(4) { border-top: 1px solid var(--border); padding-top: 1.4rem; }
}
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; }
  .laptop { transform: rotateY(-8deg) rotateX(4deg); }
  .stage-phone.p2 { display: none; }
  .stage-phone.p1 { width: 92px; }
  .hero-stats { gap: 1.4rem 1.8rem; }
}
@media (max-width: 460px) {
  .feature-cards { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item:nth-child(2) { border-top: 1px solid var(--border); padding-top: 1.4rem; }
}