/* ==========================================================================
   Intro · Services · Why · Process · Pricing
   ========================================================================== */

/* --------------------------------------------------------------------------
   Introduction — editorial
   -------------------------------------------------------------------------- */

.intro { overflow: hidden; }

.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
}
.intro__grid .eyebrow { grid-column: 1 / -1; }
.intro__title {
  grid-column: 1 / span 10;
  font-size: clamp(2.6rem, 6.4vw, 6.2rem);
  line-height: 1.04;
}
.intro__aside {
  grid-column: 6 / span 6;
  margin-top: clamp(1rem, 3vw, 3rem);
}
.intro__lead {
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  line-height: 1.6;
  color: rgba(245, 247, 255, 0.78);
  max-width: 34em;
}

.pillars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(3rem, 7vw, 6.5rem);
  border-top: 1px solid var(--line);
}
.pillar {
  position: relative;
  padding: 1.8rem clamp(1rem, 2.4vw, 2.5rem) 0 0;
}
.pillar + .pillar { padding-left: clamp(1rem, 2.4vw, 2.5rem); border-left: 1px solid var(--line); }
.pillar__n { font-size: 0.7rem; letter-spacing: 0.14em; color: var(--blue-soft); }
.pillar h3 {
  margin: 1.4rem 0 0.7rem;
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  letter-spacing: -0.015em;
}
.pillar p { color: var(--muted); max-width: 25em; }

/* glass shard that drifts behind the headline */
.intro__shard {
  position: absolute;
  top: 8%; right: 4%;
  width: clamp(9rem, 20vw, 20rem);
  aspect-ratio: 0.55;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(143, 176, 255, 0.26), rgba(71, 123, 255, 0.06) 45%, rgba(124, 92, 255, 0.2) 100%);
  clip-path: polygon(54% 0, 100% 46%, 46% 100%, 0 52%);
  opacity: 0.8;
}
.intro__shard::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
  clip-path: polygon(54% 0, 100% 46%, 46% 100%, 0 52%);
}
.intro__grid { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .intro__title { grid-column: 1 / -1; }
  .intro__aside { grid-column: 1 / -1; margin-top: 0; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 1.6rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .pillar h3 { margin-top: 0.8rem; }
}

/* --------------------------------------------------------------------------
   Why VEXORY — sticky lead + ledger
   -------------------------------------------------------------------------- */

.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 8vw, 8rem);
  align-items: start;
}
.why__lead { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 1.5rem; }
.why__title { font-size: clamp(2.8rem, 6vw, 5.8rem); }
.why__copy { max-width: 26rem; color: var(--muted); }
.why__gem {
  width: clamp(12rem, 24vw, 22rem);
  margin: 1.5rem 0 0 -1rem;
  animation: gem-turn 28s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes gem-turn { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

.benefits { counter-reset: b; border-top: 1px solid var(--line); }
.benefit {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: clamp(1.8rem, 3.4vw, 3rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.7s var(--ease);
}
.benefit::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--blue), transparent 70%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1s var(--ease);
}
.benefit:hover { padding-left: 1rem; }
.benefit:hover::before { transform: scaleX(1); }
.benefit__n { padding-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--blue-soft); }
.benefit h3 {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(1.55rem, 2.5vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.benefit p { margin-top: 0.8rem; max-width: 30em; color: var(--muted); }

@media (max-width: 960px) {
  .why__grid { grid-template-columns: 1fr; }
  .why__lead { position: static; }
  .why__gem { display: none; }
}

/* --------------------------------------------------------------------------
   Process — timeline that draws as you scroll
   -------------------------------------------------------------------------- */

.steps {
  --progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.5rem);
  padding-top: 1rem;
}
/* the rail */
.steps::before, .steps::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(clamp(5rem, 9vw, 9rem) + 1.9rem);
  height: 1px;
}
.steps::before { background: var(--line); }
.steps::after {
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  box-shadow: 0 0 18px rgba(71, 123, 255, 0.8);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress));
}

.step { position: relative; }
.step__num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(5rem, 9vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  transition: -webkit-text-stroke-color 0.8s, color 0.8s;
}
.step__node {
  position: relative;
  display: block;
  width: 0.9rem; height: 0.9rem;
  margin: 1.45rem 0 1.8rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  transition: border-color 0.6s, background 0.6s, box-shadow 0.6s;
}
.step h3 {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.step p { margin-top: 0.7rem; color: var(--muted); max-width: 17em; }
.js .step h3, .js .step p { opacity: 0.35; transition: opacity 0.8s var(--ease); }

.step.is-lit .step__num { -webkit-text-stroke-color: var(--blue-soft); color: rgba(71, 123, 255, 0.08); }
.step.is-lit .step__node { border-color: var(--blue-soft); background: var(--blue); box-shadow: 0 0 0 5px rgba(71, 123, 255, 0.18), 0 0 22px rgba(71, 123, 255, 0.9); }
.step.is-lit h3, .step.is-lit p { opacity: 1; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 0; padding-left: 2.2rem; }
  .steps::before, .steps::after { left: 0.45rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps::after { transform: scaleY(var(--progress)); transform-origin: 50% 0; background: linear-gradient(180deg, var(--blue), var(--blue-soft)); }
  .step { padding: 0 0 2.6rem; }
  .step__num { font-size: 4.4rem; }
  .step__node { position: absolute; left: -2.2rem; top: 1.6rem; margin: 0; }
  .step h3 { margin-top: 0.6rem; }
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 2.8vw, 2.8rem);
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  transition: border-color 0.5s, transform 0.7s var(--ease);
}
.plan:hover { border-color: var(--line-strong); }

.plan__name {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1.6rem 0 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.plan__price strong {
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(3.2rem, 4.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
}
.plan__desc { min-height: 4.8em; color: rgba(245, 247, 255, 0.72); max-width: 24em; }
.plan__list { margin: 1.8rem 0 2.4rem; border-top: 1px solid var(--line); }
.plan__list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: rgba(245, 247, 255, 0.82);
}
.plan__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.28rem;
  width: 0.7rem; height: 1px;
  background: var(--blue-soft);
}
.plan .btn { margin-top: auto; width: 100%; }

/* the highlighted package */
.plan--featured {
  z-index: 1;
  margin-block: -1.2rem;
  padding-block: calc(clamp(1.8rem, 2.8vw, 2.8rem) + 1.2rem);
  border-color: transparent;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(71, 123, 255, 0.32), transparent 70%),
    linear-gradient(180deg, rgba(20, 30, 62, 0.95), rgba(9, 13, 28, 0.98));
  box-shadow: 0 40px 90px -30px rgba(71, 123, 255, 0.55), 0 0 0 1px rgba(143, 176, 255, 0.35) inset;
}
.plan--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--spin, 0deg), rgba(71, 123, 255, 0), rgba(143, 176, 255, 0.95), rgba(124, 92, 255, 0.75), rgba(71, 123, 255, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: spin 7s linear infinite;
}
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }
.plan--featured .plan__name { color: var(--blue-soft); }
.plan__flag {
  position: absolute;
  top: 1.1rem; right: 1.4rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(143, 176, 255, 0.5);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-soft);
  background: rgba(71, 123, 255, 0.12);
}

@media (max-width: 980px) {
  .plans { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .plan--featured { margin-block: 0; padding-block: clamp(1.8rem, 2.8vw, 2.8rem); order: -1; }
  .plan__desc { min-height: 0; }
}