/* Nashmi Landing v2 — "Prism" redesign.
   Scoped entirely under body.landing-v2 so it can never leak onto the other
   ~20 marketing/SEO pages that still load the base landing.css unmodified.
   Loaded AFTER landing.css — these rules override it for this page only. */

body.landing-v2 {
  --accent: #21e69a;
  --accent-dim: #12a866;
  --accent-deep: #0a6b42;
  --accent-glow: rgba(33, 230, 154, 0.35);
  --gold: #e0b354;
  --gold-dim: #b8903f;
  --gold-glow: rgba(224, 179, 84, 0.28);
  --bg: #080a09;
  --bg-elev: #0e1210;
  --text: #f3f7f4;
  --text-muted: #9fb3a9;
  --text-dim: #6b7d75;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-strong: rgba(33, 230, 154, 0.22);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-3d: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --glow-ring: 0 0 0 1px rgba(33, 230, 154, 0.35), 0 0 40px rgba(33, 230, 154, 0.15);
  --gemini-gradient: linear-gradient(120deg, var(--accent) 0%, #4fd9c7 45%, var(--gold) 100%);
  --cut: 16px;
}

/* ── Signature shape motif: one clipped corner, used across cards, badges,
   buttons-outline. A quiet repeated cue instead of uniform rounded-everything. */
body.landing-v2 .feature-card,
body.landing-v2 .page-pill,
body.landing-v2 .hero-card-inner,
body.landing-v2 .badge {
  clip-path: polygon(
    var(--cut) 0%, 100% 0%, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0% 100%, 0% var(--cut)
  );
  border-radius: 0;
}
body.landing-v2 .page-pill { --cut: 12px; }
body.landing-v2 .badge { --cut: 10px; }

body.landing-v2 .brand strong,
body.landing-v2 .grad {
  background: var(--gemini-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

body.landing-v2 .badge {
  border-color: rgba(224, 179, 84, 0.35);
  background: linear-gradient(120deg, rgba(33, 230, 154, 0.1), rgba(224, 179, 84, 0.08));
  box-shadow: 0 0 40px rgba(224, 179, 84, 0.1);
}

body.landing-v2 .btn-primary {
  background: var(--gemini-gradient);
  background-size: 160% 160%;
  color: #04150e;
  box-shadow: 0 10px 34px var(--accent-glow), 0 0 0 1px rgba(224, 179, 84, 0.25) inset;
}
body.landing-v2 .btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 28px var(--gold-glow);
}

body.landing-v2 .feature-card {
  border-color: var(--glass-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
}
body.landing-v2 .feature-card:hover {
  border-color: rgba(224, 179, 84, 0.4);
  box-shadow: 0 0 0 1px rgba(224, 179, 84, 0.35), 0 0 40px rgba(224, 179, 84, 0.15);
}
body.landing-v2 .feature-card .icon {
  border-radius: 0;
  clip-path: polygon(22% 0%, 100% 0%, 100% 78%, 78% 100%, 0% 100%, 0% 22%);
  background: linear-gradient(135deg, rgba(33, 230, 154, 0.16), rgba(224, 179, 84, 0.12));
  border-color: rgba(224, 179, 84, 0.28);
}

body.landing-v2 .page-pill:hover {
  border-color: rgba(224, 179, 84, 0.5);
  box-shadow: 0 12px 30px var(--gold-glow);
  color: var(--gold);
}

/* ── Ambient background: replace the plain blurred-circle orbs with a
   faceted gradient field + slow-drifting angular shards. */
body.landing-v2 .orb-1 {
  background: radial-gradient(circle, rgba(33, 230, 154, 0.5), transparent 70%);
}
body.landing-v2 .orb-2 {
  background: radial-gradient(circle, rgba(224, 179, 84, 0.32), transparent 70%);
}
body.landing-v2 .float-shape {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background: linear-gradient(145deg, rgba(224, 179, 84, 0.22), rgba(33, 230, 154, 0.08));
  border-color: rgba(224, 179, 84, 0.22);
}

/* ── Hero gem: the new 3D centerpiece, replaces the flat mock-chat card
   visually while the original markup (.hero-card / chat-demo) stays intact
   underneath as a floating panel — see hero-gem-wrap in HTML. */
body.landing-v2 .hero-stage { perspective: 1600px; }

.hero-gem-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
.hero-gem {
  position: relative;
  width: 260px;
  height: 260px;
  transform-style: preserve-3d;
  opacity: 0.9;
}
.hero-gem .facet {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(224, 179, 84, 0.35);
  background: linear-gradient(135deg, rgba(33, 230, 154, 0.16), rgba(224, 179, 84, 0.1) 60%, transparent);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 40px rgba(33, 230, 154, 0.08);
}
.hero-gem .facet:nth-child(1) { transform: rotateY(0deg) translateZ(105px); }
.hero-gem .facet:nth-child(2) { transform: rotateY(60deg) translateZ(105px); }
.hero-gem .facet:nth-child(3) { transform: rotateY(120deg) translateZ(105px); }
.hero-gem .facet:nth-child(4) { transform: rotateY(180deg) translateZ(105px); }
.hero-gem .facet:nth-child(5) { transform: rotateY(240deg) translateZ(105px); }
.hero-gem .facet:nth-child(6) { transform: rotateY(300deg) translateZ(105px); }
.hero-gem .facet-cap {
  position: absolute;
  inset: 0; margin: auto;
  width: 148px; height: 148px;
  background: radial-gradient(circle, rgba(224, 179, 84, 0.35), transparent 70%);
  transform: rotateX(90deg) translateZ(105px);
}
.hero-gem .facet-cap.bottom { transform: rotateX(-90deg) translateZ(105px); }

@media (max-width: 900px) {
  .hero-gem-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gem { animation: none !important; }
}

/* ── Scroll-reveal targets: JS (landing-motion.js) adds/animates opacity +
   transform via GSAP; this just sets the pre-animation resting state so
   there's no flash-of-unstyled-content if JS is slow to attach. */
body.landing-v2 [data-reveal] { opacity: 0; }
body.landing-v2.js-ready [data-reveal] { opacity: 0; }
body.landing-v2:not(.js-ready) [data-reveal] { opacity: 1; }