/* ═══════════════════════════════════════════════
   xM-Flow — Product page (extends styles.css tokens)
   ═══════════════════════════════════════════════ */

.xm-main{position:relative;z-index:1}

/* ── Shared section shell ── */
.xm-section{padding:clamp(4rem,9vw,8rem) clamp(1.5rem,5vw,4rem);position:relative}
.xm-inner{max-width:1180px;margin:0 auto}
.xm-section.alt{background:linear-gradient(180deg,transparent,rgba(124,111,255,0.025),transparent)}

/* ── Hero ── */
.xm-hero{
  min-height:100vh;display:flex;align-items:center;
  padding:160px clamp(1.5rem,5vw,4rem) 5rem;position:relative;overflow:hidden;
}
.xm-hero-grid{
  max-width:1180px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;
}
.xm-eyebrow{
  font-family:var(--mono);font-size:0.66rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--accent2);margin-bottom:1.6rem;padding:0.3rem 1rem;
  border:0.5px solid var(--accent-border);border-radius:100px;background:var(--accent-dim);
  display:inline-block;
}
.xm-title{
  font-family:var(--serif);font-size:clamp(2.1rem,4.35vw,3.65rem);font-weight:300;
  line-height:1.07;letter-spacing:0;color:var(--fg);margin-bottom:1.6rem;max-width:760px;
}
.xm-title em{
  font-style:normal;font-weight:400;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.xm-sub{font-size:clamp(0.95rem,1.3vw,1.04rem);color:var(--fg2);max-width:500px;font-weight:400;line-height:1.72;margin-bottom:2.2rem}

/* Slogan: purple glowing dot before each word */
.xm-slogan{display:flex;flex-wrap:wrap;gap:1.4rem;margin-bottom:2.4rem}
.xm-w{
  font-family:var(--serif);font-style:normal;font-weight:300;font-size:clamp(1.05rem,1.7vw,1.35rem);
  color:var(--fg);display:flex;align-items:center;gap:0.5rem;
}
.xm-d{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px var(--accent);flex-shrink:0;
}

.xm-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.xm-btn{
  display:inline-flex;align-items:center;gap:0.55rem;padding:0.9rem 1.9rem;
  border-radius:var(--r8);font-family:var(--mono);font-size:0.78rem;font-weight:500;
  letter-spacing:0.07em;text-transform:uppercase;transition:all 0.25s;
}
.xm-btn.solid{background:var(--accent);color:#fff;box-shadow:0 0 40px rgba(124,111,255,0.25)}
.xm-btn.solid:hover{background:var(--accent2);transform:translateY(-2px)}
.xm-btn.ghost{border:0.5px solid var(--line2);color:var(--fg2)}
.xm-btn.ghost:hover{border-color:var(--accent-border);color:var(--fg)}


/* ── Screenshot stack: 3 depth layers with perspective DOF ── */
.xm-shots{
  position:relative;height:500px;perspective:1600px;
}
/* ambient purple glow */
.xm-shots::after{
  content:'';position:absolute;inset:-16% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 58% 42%,rgba(124,111,255,0.26),transparent 60%);
  filter:blur(36px);
}
.xm-shot{
  position:absolute;width:76%;border-radius:14px;overflow:hidden;
  background:#0c0c14;transform-style:preserve-3d;
  border:0.5px solid rgba(255,255,255,0.06);
}
.xm-shot img{
  width:100%;height:100%;object-fit:cover;object-position:top left;
  display:block;
  opacity:1;transition:opacity 0.42s ease;
}
/* back — most blurred, darkest, bottom of stack */
.xm-shot.back{
  top:2%;left:0;height:330px;z-index:1;
  transform:rotateY(16deg) rotateX(6deg) rotate(-7deg) scale(0.91);
  filter:blur(7px) brightness(0.62);opacity:0.65;
  box-shadow:0 32px 80px rgba(0,0,0,0.6);
}
/* mid — slight blur */
.xm-shot.mid{
  top:22%;left:14%;height:330px;z-index:2;
  transform:rotateY(14deg) rotateX(5deg) rotate(-5.5deg) scale(0.96);
  filter:blur(2.5px) brightness(0.82);opacity:0.88;
  box-shadow:0 36px 80px rgba(0,0,0,0.55);
}
/* front — sharp, highest z, purple glow */
.xm-shot.front{
  top:8%;right:0;height:355px;z-index:3;
  transform:rotateY(13deg) rotateX(4deg) rotate(-4.5deg);
  filter:none;opacity:1;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 44px 100px rgba(0,0,0,0.68),
    0 0 72px rgba(124,111,255,0.14);
}

/* ── Responsive ── */
@media(max-width:960px){
  .xm-shots{height:380px}
  .xm-shot.back,.xm-shot.mid{height:250px}
  .xm-shot.front{height:270px}
}
@media(max-width:560px){
  .xm-shots{height:290px}
  .xm-shot.back,.xm-shot.mid{height:190px}
  .xm-shot.front{height:210px}
}

/* ── AI agents highlight ── */
.xm-ai{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3rem}
.xm-aicard{
  display:flex;gap:1.1rem;padding:1.9rem;border-radius:var(--r16);
  border:0.5px solid var(--line2);background:var(--bg2);transition:border-color 0.25s,transform 0.25s;
}
.xm-aicard:hover{border-color:var(--accent-border);transform:translateY(-3px)}
.xm-aicard .ic{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  background:var(--accent-dim);border:0.5px solid var(--accent-border);
}
.xm-aicard h4{font-size:1.02rem;color:var(--fg);font-weight:500;margin-bottom:0.4rem}
.xm-aicard p{color:var(--fg2);font-size:0.9rem;line-height:1.7}
.xm-aicard .tags{margin-top:0.7rem;display:flex;flex-wrap:wrap;gap:0.4rem}
.xm-aicard .tags span{
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent2);border:0.5px solid var(--accent-border);background:var(--accent-dim);
  padding:0.18rem 0.6rem;border-radius:100px;
}

/* ── Pillars / objectives ── */
.xm-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.xm-pillar{
  border:0.5px solid var(--line2);border-radius:var(--r16);background:var(--bg2);
  padding:2.2rem 1.9rem;transition:border-color 0.25s,transform 0.25s;
}
.xm-pillar:hover{border-color:var(--accent-border);transform:translateY(-4px)}
.xm-pillar h3{
  font-family:var(--serif);font-style:normal;font-size:1.28rem;font-weight:400;
  color:var(--fg);display:flex;align-items:center;gap:0.6rem;margin-bottom:0.8rem;
}
.xm-pillar h3 .xm-d{width:8px;height:8px}
.xm-pillar p{color:var(--fg2);font-size:0.92rem;line-height:1.75}

/* ── Value points ── */
.xm-values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:0.5px solid var(--line);border-radius:var(--r12);overflow:hidden;margin-top:3rem}
.xm-value{background:var(--bg2);padding:2rem 1.9rem;transition:background 0.2s}
.xm-value:hover{background:var(--bg3)}
.xm-value .num{font-family:var(--mono);font-size:0.7rem;color:var(--accent2);letter-spacing:0.15em}
.xm-value h3{font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--fg);margin:0.7rem 0 0.6rem}
.xm-value p{color:var(--fg2);font-size:0.9rem;line-height:1.7}

/* ── Modules grid ── */
.xm-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:0.5px solid var(--line);border-radius:var(--r12);overflow:hidden;margin-top:3rem}
.xm-mod{background:var(--bg2);padding:1.5rem 1.3rem;transition:background 0.2s}
.xm-mod:hover{background:var(--bg3)}
.xm-mod .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);margin-bottom:0.8rem}
.xm-mod h4{font-size:0.95rem;color:var(--fg);font-weight:500;margin-bottom:0.3rem}
.xm-mod p{font-size:0.78rem;color:var(--fg3);line-height:1.6}

/* ── Roadmap / ecosystem flow ── */
.xm-tag{
  display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--mono);
  font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);
  border:0.5px solid rgba(196,164,107,0.3);background:var(--gold-dim);
  padding:0.3rem 0.9rem;border-radius:100px;margin-bottom:1.2rem;
}
.xm-flow{display:flex;flex-direction:column;gap:0;margin-top:3rem;position:relative}
.xm-step{
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;
  padding:1.6rem 0;border-bottom:0.5px solid var(--line);
}
.xm-step:last-child{border-bottom:none}
.xm-step .idx{
  font-family:var(--mono);font-size:0.85rem;color:var(--accent2);
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:0.5px solid var(--accent-border);background:var(--accent-dim);flex-shrink:0;
}
.xm-step h4{font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--fg);margin-bottom:0.4rem}
.xm-step p{color:var(--fg2);font-size:0.92rem;line-height:1.75;max-width:760px}
.xm-step .hl{color:var(--accent2)}

/* Closing note that wraps up the roadmap */
.xm-flow-note{
  display:flex;align-items:flex-start;gap:1rem;margin-top:2.6rem;
  padding:1.5rem 1.8rem;border-radius:var(--r16);
  border:0.5px solid var(--accent-border);
  background:linear-gradient(135deg,var(--accent-dim),transparent 70%);
}
.xm-flow-note .xm-d{margin-top:0.55rem}
.xm-flow-note p{
  margin:0;color:var(--fg2);font-size:0.98rem;line-height:1.75;max-width:780px;
}
.xm-flow-note strong{color:var(--fg);font-weight:500}

/* ── Closing CTA ── */
.xm-final{text-align:center;padding:clamp(5rem,10vw,9rem) 1.5rem}
.xm-final h2{
  font-family:var(--serif);font-size:clamp(1.85rem,3.8vw,2.95rem);font-weight:300;
  line-height:1.12;color:var(--fg);margin:0 auto 1.4rem;max-width:820px;
}
.xm-final h2 em{font-style:normal;font-weight:400;color:var(--accent2)}
.xm-final p{color:var(--fg2);max-width:480px;margin:0 auto 2.4rem;font-size:0.98rem}

/* ── Reveal ── */
.xm-rev{opacity:0;transform:translateY(20px);transition:opacity 0.7s,transform 0.7s}
.xm-rev.in{opacity:1;transform:none}

/* ── Responsive ── */
@media(max-width:960px){
  .xm-hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .xm-pillars{grid-template-columns:1fr}
  .xm-values{grid-template-columns:1fr}
  .xm-ai{grid-template-columns:1fr}
  .xm-mods{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .xm-mods{grid-template-columns:1fr}
  .xm-step{grid-template-columns:1fr;gap:0.7rem}
}

/* ═══════════════════════════════════════════════
   xM-Flow — Design Elevation Layer
   Aligns with new brand: heavy / thin contrast,
   purple dot motif, premium materiality.
   ═══════════════════════════════════════════════ */

/* ── Hero title: heavier em to echo ABILIX wordmark ── */
.xm-title{font-weight:300;letter-spacing:-0.018em}
.xm-title em{
  font-weight:700;letter-spacing:-0.008em;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 60%, var(--gold) 110%);
  background-size:200% 200%;animation:gradMove 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 22px rgba(124,111,255,0.32));
}

/* ── Slogan refinement ── */
.xm-w{font-weight:400;letter-spacing:-0.005em}
.xm-d{
  width:7px;height:7px;
  box-shadow:0 0 14px var(--accent), 0 0 4px rgba(255,255,255,0.4) inset;
  animation:pulse-dot 2.4s ease-in-out infinite;
}

/* ── Refined buttons matching home CTA style ── */
.xm-btn{
  padding:1rem 2rem;font-weight:600;letter-spacing:0.1em;font-size:0.76rem;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.xm-btn.solid{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  background-size:200% 100%;
  box-shadow:0 1px 0 rgba(255,255,255,0.15) inset, 0 12px 32px rgba(124,111,255,0.28);
}
.xm-btn.solid:hover{
  background-position:100% 0;transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,0.2) inset, 0 18px 44px rgba(124,111,255,0.45);
}
.xm-btn.ghost{
  background:rgba(124,111,255,0.04);
  border:0.5px solid var(--accent-border);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.xm-btn.ghost:hover{
  background:rgba(124,111,255,0.1);
  border-color:var(--accent);color:var(--fg);
  box-shadow:0 0 24px rgba(124,111,255,0.2);
}

/* ── Eyebrow refinement (consistent with home) ── */
.xm-eyebrow{
  font-weight:500;letter-spacing:0.24em;font-size:0.64rem;
  background:rgba(124,111,255,0.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 24px rgba(124,111,255,0.12);
}

/* ── Section title refinement ── */
.xm-section .section-title,
.xm-section h2.section-title{
  font-weight:300;letter-spacing:-0.015em;
}
.xm-section .section-title em{
  font-weight:700;letter-spacing:-0.005em;
}

/* ── AI cards / Module cards / Step cards: refined hover ── */
.xm-aicard,.xm-mod,.xm-step,.xm-value,.xm-pillar{
  transition:border-color 0.3s, box-shadow 0.3s, background 0.3s, transform 0.3s;
}
.xm-aicard:hover,.xm-mod:hover,.xm-pillar:hover{
  border-color:var(--accent-border);
  box-shadow:0 0 0 1px var(--accent-border), 0 0 36px rgba(124,111,255,0.14);
  background:linear-gradient(180deg, var(--bg2) 0%, rgba(124,111,255,0.04) 100%);
}


/* ── Subtle ambient glow on hero ── */
.xm-hero::after{
  content:'';position:absolute;top:30%;right:-10%;
  width:60%;height:60%;border-radius:50%;
  background:radial-gradient(circle, rgba(124,111,255,0.08) 0%, transparent 60%);
  pointer-events:none;z-index:0;filter:blur(40px);
}
.xm-hero-grid{position:relative;z-index:1}