/* ==========================================================================
   Way2Call WOW layer — 3D + glassmorphism + motion
   Same brand palette only: #3E6DF6 #6366F1 #8B5CF6 #06B6D4 #16C79A #0B0E14
   Additive only — never overrides brand colors, only depth/motion/glass.
   ========================================================================== */

:root {
  --w-blue: #3E6DF6;
  --w-indigo: #6366F1;
  --w-purple: #8B5CF6;
  --w-cyan: #06B6D4;
  --w-teal: #16C79A;
  --w-ink: #0B0E14;
  --w-grad: linear-gradient(135deg, #3E6DF6 0%, #6366F1 45%, #8B5CF6 75%, #06B6D4 100%);
  --w-glass-light: rgba(255, 255, 255, 0.66);
  --w-glass-dark: rgba(15, 23, 42, 0.62);
  --w-stroke-light: rgba(255, 255, 255, 0.65);
  --w-stroke-dark: rgba(255, 255, 255, 0.12);
  --w-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

::selection { background: #3E6DF6; color: #fff; }

/* ---------- global 3D stage helpers ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s var(--w-ease), box-shadow 0.35s var(--w-ease);
}

/* ---------- HERO: aurora mesh + depth ---------- */
#landing-page-view .lp3-hero { position: relative; overflow: clip; isolation: isolate; }

#landing-page-view .lp3-hero::before {
  content: "";
  position: absolute; inset: -20%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 420px at 12% 8%, rgba(62, 109, 246, 0.16), transparent 60%),
    radial-gradient(700px 480px at 88% 12%, rgba(139, 92, 246, 0.14), transparent 60%),
    radial-gradient(560px 420px at 70% 88%, rgba(6, 182, 212, 0.13), transparent 60%),
    radial-gradient(520px 380px at 18% 82%, rgba(22, 199, 154, 0.12), transparent 60%);
  filter: saturate(1.2);
  animation: wAurora 16s ease-in-out infinite alternate;
}
@keyframes wAurora {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); }
}

#landing-page-view .lp3-hero-container { position: relative; z-index: 1; }

/* animated gradient headline — same hues */
#landing-page-view .gradient-text {
  background: linear-gradient(100deg, #3E6DF6, #6366F1, #8B5CF6, #06B6D4, #3E6DF6);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wGradShift 7s linear infinite;
}
@keyframes wGradShift { to { background-position: 220% center; } }

/* ---------- true glassmorphism ---------- */
#landing-page-view .lp3-pill,
#landing-page-view .lp3-launcher,
#landing-page-view .lp3-join,
#landing-page-view .lp3-badge,
#landing-page-view .lp3-lobby,
#landing-page-view .nav-bar {
  background: var(--w-glass-light);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--w-stroke-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 20px 50px rgba(15, 23, 42, 0.10);
}
html.dark #landing-page-view .lp3-pill,
html.dark #landing-page-view .lp3-launcher,
html.dark #landing-page-view .lp3-join,
html.dark #landing-page-view .lp3-badge,
html.dark #landing-page-view .lp3-lobby,
html.dark #landing-page-view .nav-bar {
  background: var(--w-glass-dark);
  border-color: var(--w-stroke-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.45);
}

/* launcher glow ring in brand gradient */
#landing-page-view .lp3-launcher { position: relative; }
#landing-page-view .lp3-launcher::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(62,109,246,.5), rgba(139,92,246,.35), rgba(6,182,212,.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55;
}

/* ---------- CTA: magnetic shine ---------- */
#landing-page-view .lp3-cta,
#landing-page-view .lp3-launcher-btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.25s var(--w-ease), box-shadow 0.25s var(--w-ease);
}
#landing-page-view .lp3-cta::before,
#landing-page-view .lp3-launcher-btn::before {
  content: ""; position: absolute; top: 0; left: -80%;
  width: 60%; height: 100%; z-index: 1;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  animation: wShine 4.2s ease-in-out infinite;
}
@keyframes wShine {
  0%, 55% { left: -80%; } 90%, 100% { left: 130%; }
}
#landing-page-view .lp3-cta:hover,
#landing-page-view .lp3-launcher-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(62, 109, 246, 0.38);
}

/* ---------- 3D product stage — the "never seen" moment ---------- */
#landing-page-view .lp3-stage { perspective: 1500px; }
#landing-page-view .lp3-tilt {
  transform:
    rotateY(var(--ry, -9deg))
    rotateX(var(--rx, 6deg))
    translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.25s var(--w-ease);
  will-change: transform;
}
#landing-page-view .lp3-app {
  transform-style: preserve-3d;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 30px 80px rgba(15,23,42,.22),
    0 0 0 1px rgba(62,109,246,.08),
    0 0 90px rgba(62,109,246,.16);
}
#landing-page-view .lp3-layer-1,
#landing-page-view .lp3-layer-2 { filter: blur(1px); }

/* pop badges in Z for real depth */
#landing-page-view .lp3-badge { transform: translateZ(60px); animation: wFloat 6s ease-in-out infinite; }
#landing-page-view .lp3-b2 { animation-delay: -1.5s; }
#landing-page-view .lp3-b3 { animation-delay: -3s; }
#landing-page-view .lp3-b4 { animation-delay: -4.2s; }
#landing-page-view .lp3-b5 { animation-delay: -2.2s; }
#landing-page-view .lp3-lobby { transform: translateZ(90px); }
@keyframes wFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -9px; }
}

/* orbs: slower cinematic drift */
#landing-page-view .lp3-orb { animation: wOrb 11s ease-in-out infinite alternate; }
#landing-page-view .lp3-orb-b { animation-duration: 14s; }
#landing-page-view .lp3-orb-c { animation-duration: 17s; }
@keyframes wOrb {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(34px, 26px, 0) scale(1.12); }
}

/* ---------- trust row: marquee on mobile, glow on desktop ---------- */
@media (max-width: 860px) {
  #landing-page-view .lp2-trust-row {
    display: flex; overflow-x: auto; gap: 14px;
    padding-bottom: 8px; scroll-snap-type: x mandatory;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  #landing-page-view .lp2-trust-row > span { flex: 0 0 auto; scroll-snap-align: center; }
}

/* ---------- scroll reveal (works with router re-renders) ---------- */
.wow-reveal {
  opacity: 0; transform: translateY(26px) scale(0.99);
  transition: opacity 0.7s var(--w-ease), transform 0.7s var(--w-ease);
  transition-delay: var(--w-d, 0ms);
}
.wow-reveal.in { opacity: 1; transform: none; }

/* enhance existing reveal without breaking it */
.lp2-reveal {
  transition: opacity 0.7s var(--w-ease), transform 0.7s var(--w-ease), box-shadow 0.35s var(--w-ease);
}

/* ---------- cards: VISIBLE glass + depth (high-spec to beat app.css late rules) ---------- */
#landing-page-view .feature-card,
#landing-page-view .lp2-cap,
#landing-page-view .lp2-bento-card,
#landing-page-view .lp2-stat,
#landing-page-view .lp2-arch-node,
#landing-page-view .pricing-card {
  position: relative;
  transition: transform 0.35s var(--w-ease), box-shadow 0.35s var(--w-ease), border-color 0.35s;
}

/* Light: frosted glass over mesh — NOT flat white */
html:not(.dark) #landing-page-view .feature-card,
html:not(.dark) #landing-page-view .lp2-cap,
html:not(.dark) #landing-page-view .lp2-bento-card,
html:not(.dark) #landing-page-view .lp2-stat,
html:not(.dark) #landing-page-view .lp2-arch-node {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.72) 100%);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  outline: 1px solid rgba(15, 23, 42, 0.06);
  outline-offset: -1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 2px 6px rgba(15, 23, 42, 0.06),
    0 18px 44px rgba(15, 23, 42, 0.10),
    0 32px 80px rgba(62, 109, 246, 0.10);
}
html:not(.dark) #landing-page-view .feature-card:hover,
html:not(.dark) #landing-page-view .lp2-cap:hover,
html:not(.dark) #landing-page-view .lp2-bento-card:hover,
html:not(.dark) #landing-page-view .lp2-stat:hover {
  transform: translateY(-7px);
  border-color: rgba(62, 109, 246, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 10px rgba(15, 23, 42, 0.07),
    0 26px 60px rgba(15, 23, 42, 0.15),
    0 0 0 1px rgba(62, 109, 246, 0.18),
    0 0 48px rgba(62, 109, 246, 0.18);
}

/* Dark: smoked glass, glow stays visible */
html.dark #landing-page-view .feature-card,
html.dark #landing-page-view .lp2-cap,
html.dark #landing-page-view .lp2-bento-card,
html.dark #landing-page-view .lp2-stat,
html.dark #landing-page-view .lp2-arch-node {
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.72));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 44px rgba(62, 109, 246, 0.14);
}
html.dark #landing-page-view .feature-card:hover,
html.dark #landing-page-view .lp2-cap:hover,
html.dark #landing-page-view .lp2-bento-card:hover,
html.dark #landing-page-view .lp2-stat:hover {
  transform: translateY(-7px);
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 26px 64px rgba(0, 0, 0, 0.55),
    0 0 54px rgba(62, 109, 246, 0.22);
}

/* pricing: stronger tier separation */
html:not(.dark) #landing-page-view .pricing-card {
  background: linear-gradient(170deg, rgba(255,255,255,.94), rgba(248,250,252,.78));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.9);
  outline: 1px solid rgba(15,23,42,.06);
  outline-offset: -1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 14px 36px rgba(15,23,42,.09),
    0 30px 70px rgba(15,23,42,.08);
}
html:not(.dark) #landing-page-view .pricing-card.featured {
  border: 1.5px solid rgba(62,109,246,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 18px 44px rgba(62,109,246,.20),
    0 34px 90px rgba(99,102,241,.22);
  transform: translateY(-4px);
}
html.dark #landing-page-view .pricing-card {
  background: linear-gradient(170deg, rgba(30,41,59,.88), rgba(15,23,42,.75));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 55px rgba(0,0,0,.5);
}
html.dark #landing-page-view .pricing-card.featured {
  border-color: rgba(96,165,250,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 70px rgba(62,109,246,.35);
}

/* icons: raised 3D tile so cards read as glass, not flat */
#landing-page-view .feature-icon,
#landing-page-view .lp2-cap-icon {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 8px 20px rgba(62,109,246,.18);
}

/* section canvas: faint mesh so frosted blur is actually visible */
html:not(.dark) #landing-page-view #capabilities,
html:not(.dark) #landing-page-view #features,
html:not(.dark) #landing-page-view #solutions,
html:not(.dark) #landing-page-view #pricing {
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(62,109,246,.07), transparent 60%),
    radial-gradient(700px 320px at 88% 20%, rgba(139,92,246,.06), transparent 60%),
    radial-gradient(600px 300px at 50% 100%, rgba(6,182,212,.05), transparent 60%),
    #F8FAFC;
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
html.dark #landing-page-view #capabilities,
html.dark #landing-page-view #features,
html.dark #landing-page-view #solutions,
html.dark #landing-page-view #pricing {
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(62,109,246,.12), transparent 60%),
    radial-gradient(700px 320px at 88% 20%, rgba(139,92,246,.10), transparent 60%),
    #0B0E14;
}

/* ---------- section dividers: gradient hairline ---------- */
.section-padding { position: relative; }
#landing-page-view .section-padding::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1180px, 88%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,109,246,.35), rgba(139,92,246,.35), transparent);
}

/* ---------- compare table + code block glass ---------- */
.cmp-wrap, .lp2-code {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
}

/* ---------- final CTA: 3D gradient panel ---------- */
.lp2-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #3E6DF6 0%, #6366F1 48%, #8B5CF6 100%) !important;
  box-shadow: 0 30px 80px rgba(62,109,246,.4);
  transform-style: preserve-3d;
}
.lp2-cta::before {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(400px 280px at 20% 20%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(500px 320px at 85% 80%, rgba(6,182,212,.35), transparent 60%),
    radial-gradient(420px 300px at 70% 15%, rgba(22,199,154,.28), transparent 60%);
  animation: wAurora 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.lp2-cta > * { position: relative; z-index: 1; }

/* ---------- ecosystem orbit pulse ---------- */
.lp2-eco-ring { animation: wPing 3.6s ease-out infinite; }
.lp2-eco-ring.r2 { animation-delay: 1.8s; }
@keyframes wPing {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- router inner pages share the same language ---------- */
#app-container .page-hero {
  position: relative; overflow: clip; isolation: isolate;
}
#app-container .page-hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background:
    radial-gradient(560px 360px at 15% 10%, rgba(62,109,246,.14), transparent 60%),
    radial-gradient(560px 360px at 85% 20%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(500px 340px at 60% 90%, rgba(6,182,212,.10), transparent 60%);
  animation: wAurora 15s ease-in-out infinite alternate;
}

/* ---------- responsive: kill heavy 3D on small / weak devices ---------- */
@media (max-width: 900px) {
  #landing-page-view .lp3-tilt { transform: rotateY(-2.5deg) rotateX(1.5deg); }
  #landing-page-view .lp3-badge { transform: none; }
}
@media (max-width: 640px) {
  #landing-page-view .lp3-hero::before { opacity: 0.8; }
  #landing-page-view .lp3-tilt { transform: none; }
}

/* ---------- new content: metrics band + stories (same glass language) ---------- */
#landing-page-view .wow-metrics {
  max-width: 1180px; margin: 26px auto 48px; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
#landing-page-view .wow-metric {
  padding: 20px 22px; border-radius: 18px; text-align: left;
  background: linear-gradient(165deg, rgba(255,255,255,.9), rgba(248,250,252,.7));
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.9);
  outline: 1px solid rgba(15,23,42,.06); outline-offset: -1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 36px rgba(15,23,42,.09), 0 0 32px rgba(62,109,246,.08);
}
#landing-page-view .wow-metric b {
  display: block; font-family: 'Sora',sans-serif; font-size: 1.9rem; letter-spacing: -.04em;
  background: linear-gradient(100deg,#3E6DF6,#6366F1); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#landing-page-view .wow-metric .wow-unit { font-size: 1rem; margin-left: 2px; }
#landing-page-view .wow-metric span:last-child { display: block; margin-top: 6px; color: #475569; font-size: .86rem; line-height: 1.5; }
html.dark #landing-page-view .wow-metric {
  background: linear-gradient(165deg, rgba(30,41,59,.85), rgba(15,23,42,.72));
  border-color: rgba(255,255,255,.12); outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 50px rgba(0,0,0,.45);
}
html.dark #landing-page-view .wow-metric span:last-child { color: #9FB3CC; }

#landing-page-view .wow-stories { position: relative; }
#landing-page-view .wow-story-grid {
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
#landing-page-view .wow-story {
  padding: 28px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(248,250,252,.72));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.9);
  outline: 1px solid rgba(15,23,42,.06); outline-offset: -1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 44px rgba(15,23,42,.10), 0 32px 80px rgba(62,109,246,.10);
  transition: transform .35s var(--w-ease), box-shadow .35s var(--w-ease);
}
#landing-page-view .wow-story:hover {
  transform: translateY(-7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 26px 60px rgba(15,23,42,.15), 0 0 48px rgba(62,109,246,.18);
  border-color: rgba(62,109,246,.4);
}
#landing-page-view .wow-story-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
#landing-page-view .wow-story-ico {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg,#3E6DF6,#6366F1); color: #fff; font-size: 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px rgba(62,109,246,.35);
}
#landing-page-view .wow-story-tag {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; padding: 6px 11px; border-radius: 999px;
}
#landing-page-view .wow-story h3 { font-size: 1.08rem; letter-spacing: -.02em; margin-bottom: 9px; color: #0F172A; }
#landing-page-view .wow-story p { color: #475569; font-size: .93rem; line-height: 1.65; margin-bottom: 14px; }
#landing-page-view .wow-story-meta { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: #0E9C79; }
html.dark #landing-page-view .wow-story { background: linear-gradient(165deg, rgba(30,41,59,.85), rgba(15,23,42,.72)); border-color: rgba(255,255,255,.12); outline: none; }
html.dark #landing-page-view .wow-story h3 { color: #F1F5F9; }
html.dark #landing-page-view .wow-story p { color: #9FB3CC; }
@media (max-width: 900px) {
  #landing-page-view .wow-metrics { grid-template-columns: repeat(2, 1fr); }
  #landing-page-view .wow-story-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #landing-page-view .wow-metrics { grid-template-columns: 1fr; }
}

/* ---------- reduced motion: keep glass + 3D static, no animation ---------- */
@media (prefers-reduced-motion: reduce) {
  #landing-page-view .lp3-hero::before,
  #landing-page-view .gradient-text,
  #landing-page-view .lp3-cta::before,
  #landing-page-view .lp3-launcher-btn::before,
  #landing-page-view .lp3-badge,
  #landing-page-view .lp3-orb,
  .lp2-cta::before,
  .lp2-eco-ring { animation: none !important; }
  .wow-reveal { opacity: 1; transform: none; transition: none; }
  [data-tilt] { transition: none; }
}