/* ============================================================
   CARD PRIME D 3.0 — Homepage: the issuance showcase
   Hero card · lifecycle ring · instant timeline · embossing
   · digital wallet · limits matrix · vault
   ============================================================ */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(70px, 9vw, 120px) clamp(64px, 8vw, 110px); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.85; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, var(--bg) 100%);
}
.hero__in {
  position: relative; z-index: 2;
  width: min(100% - (var(--pad-x) * 2), var(--w-wide)); margin-inline: auto;
  display: grid; gap: 52px; align-items: center;
}
@media (min-width: 1000px) { .hero__in { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.hero h1 { max-width: 16ch; }
.hero__sub { max-width: 52ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

/* ---------- The card ---------- */
.pcard__scene { perspective: 1200px; display: grid; place-items: center; padding: 20px; }
.pcard {
  width: min(100%, 440px); aspect-ratio: 1.586;
  position: relative; transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-14deg);
  transition: transform 260ms var(--ease-out);
  will-change: transform;
}
.pcard__face {
  position: absolute; inset: 0; border-radius: var(--r-card);
  background:
    linear-gradient(145deg, #241C3D 0%, #15112A 46%, #0E0B1B 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* etched guilloche — code-generated, no image */
.pcard__face::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background:
    repeating-linear-gradient(64deg, rgba(139,92,246,0.10) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-58deg, rgba(34,211,238,0.07) 0 1px, transparent 1px 13px);
  mask-image: radial-gradient(ellipse 84% 84% at 76% 18%, #000 10%, transparent 76%);
}
.pcard__holo {
  position: absolute; inset: -40% -120%; z-index: 2; pointer-events: none;
  background: var(--grad-holo);
  transform: translateX(-30%) rotate(8deg);
  animation: sweep 6.5s var(--ease-io) infinite;
  mix-blend-mode: screen;
}
@keyframes sweep {
  0%, 62%  { transform: translateX(-42%) rotate(8deg); }
  100%     { transform: translateX(42%) rotate(8deg); }
}
.pcard__top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; }
.pcard__issuer { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.pcard__kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em;
               text-transform: uppercase; color: var(--gold); }
.pcard__mid { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; }
.pcard__chip { width: 46px; height: 36px; flex-shrink: 0; }
.pcard__wave { width: 22px; height: 26px; color: var(--ink-dim); }
.pcard__pan {
  position: relative; z-index: 3;
  font-family: var(--font-mono); font-size: clamp(15px, 2.6vw, 19px);
  letter-spacing: 0.1em; color: var(--ink);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.08);
}
.pcard__bot { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.pcard__lbl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em;
              text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 3px; }
.pcard__val { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; color: var(--ink); }
.pcard__scheme { width: 52px; height: 32px; }

/* the stack behind it — instant, digital, virtual */
.pcard__ghost {
  position: absolute; inset: 0; border-radius: var(--r-card);
  border: 1px solid var(--line-strong); background: rgba(22,18,31,0.55);
  backdrop-filter: blur(2px);
}
.pcard__ghost--1 { transform: translate3d(22px, 22px, -60px) rotate(3deg); opacity: 0.55; }
.pcard__ghost--2 { transform: translate3d(42px, 42px, -110px) rotate(6deg); opacity: 0.28; }
.pcard__tag {
  position: absolute; z-index: 5; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(10,8,18,0.82); white-space: nowrap;
}

/* ---------- Lifecycle ring ---------- */
.ring { display: grid; place-items: center; }
.ring svg { width: min(100%, 460px); height: auto; overflow: visible; }
.ring__track { fill: none; stroke: var(--line); stroke-width: 1.4; }
.ring__arc   { fill: none; stroke: url(#ringGrad); stroke-width: 2.4; stroke-linecap: round;
               transition: stroke-dashoffset 900ms var(--ease-out); }
.ring__node circle { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.2; }
.ring__node text { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 9.5px;
                   letter-spacing: 0.08em; text-transform: uppercase; }
.ring__node.on circle { fill: var(--prime-soft); stroke: var(--prime); stroke-width: 1.8; }
.ring__node.on text { fill: var(--prime); }
.ring__hub  { fill: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ring__hub2 { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; }

/* ---------- Instant timeline ---------- */
.steps { display: grid; gap: 0; position: relative; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 28px 24px; border: 1px solid var(--line); background: var(--panel); }
@media (min-width: 900px) {
  .step { border-right: 0; }
  .step:first-child { border-radius: var(--r) 0 0 var(--r); }
  .step:last-child  { border-radius: 0 var(--r) var(--r) 0; border-right: 1px solid var(--line); }
}
@media (max-width: 899px) {
  .step:first-child { border-radius: var(--r) var(--r) 0 0; }
  .step:last-child  { border-radius: 0 0 var(--r) var(--r); }
  .step + .step { border-top: 0; }
}
.step__n {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; margin-bottom: 16px;
  border: 1px solid var(--line-strong); color: var(--ink-faint);
  transition: all var(--dur-2) var(--ease-out);
}
.step.on .step__n { background: var(--grad-gold); border-color: transparent; color: #1A1206; }
.step.on { background: linear-gradient(165deg, var(--panel-2), var(--panel)); }
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: 14px; margin-bottom: 0; }
.step__t { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--gold); display: block; margin-top: 14px; }

.clock {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 28px;
  font-family: var(--font-mono);
}
.clock b { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; color: var(--gold);
           font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.clock span { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Embossing lane ---------- */
.perso { display: grid; gap: 16px; }
@media (min-width: 860px) { .perso { grid-template-columns: repeat(4, 1fr); align-items: stretch; } }
.perso__cell {
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 20px; position: relative; background: rgba(22,18,31,0.5);
}
.perso__cell h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
                  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.perso__cell p { font-size: 13.5px; margin: 0; }
.perso__cell--lock { border-style: solid; border-color: rgba(232,201,155,0.35); }
.perso__lock { position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; color: var(--gold); }

.vendors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.vendor {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim);
  background: var(--panel); transition: all var(--dur-1) var(--ease-out);
}
.vendor.on { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }

/* ---------- Digital / phone ---------- */
.phone {
  width: min(100%, 268px); aspect-ratio: 9 / 18.8; margin-inline: auto;
  border-radius: 34px; border: 1px solid var(--line-strong);
  background: linear-gradient(170deg, #17122A, #0C0916);
  box-shadow: var(--shadow); padding: 14px; position: relative; overflow: hidden;
}
.phone::before {
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 20px; border-radius: 999px; background: #08060F; z-index: 4;
}
.phone__screen {
  position: absolute; inset: 14px; border-radius: 24px; background: #0B0816;
  padding: 44px 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.phone__mini {
  aspect-ratio: 1.586; border-radius: 11px; position: relative; overflow: hidden;
  background: linear-gradient(145deg, #2A2049, #14102A);
  border: 1px solid var(--line-strong); padding: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.phone__mini::after {
  content: ""; position: absolute; inset: -40% -120%;
  background: var(--grad-holo); mix-blend-mode: screen;
  animation: sweep 7.5s var(--ease-io) infinite 1.2s;
}
.phone__mini b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
                 color: var(--ink); position: relative; z-index: 2; font-weight: 400; }
.phone__mini span { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em;
                    color: var(--gold); position: relative; z-index: 2; text-transform: uppercase; }
.phone__act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone__btn {
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); text-align: center;
}
.phone__btn.on { border-color: var(--spark); color: var(--spark); background: var(--spark-soft); }
.phone__list { display: grid; gap: 7px; margin-top: 2px; }
.phone__row {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; background: rgba(233,228,248,0.035);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ink-faint);
}
.phone__row b { color: var(--ink-dim); font-weight: 400; }
.phone__nfc { display: grid; place-items: center; padding-top: 10px; margin-top: auto; padding-bottom: 8px; }
.phone__nfc svg { width: 46px; height: 46px; color: var(--spark); }
.nfc-a { animation: nfc 2.2s ease-in-out infinite; }
.nfc-b { animation: nfc 2.2s ease-in-out infinite 0.35s; }
.nfc-c { animation: nfc 2.2s ease-in-out infinite 0.7s; }
@keyframes nfc { 0%, 100% { opacity: 0.18; } 45% { opacity: 1; } }

/* ---------- Limits matrix ---------- */
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.matrix th, .matrix td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.matrix thead th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
  border-bottom: 1px solid var(--line-strong);
}
.matrix tbody th { font-weight: 600; color: var(--ink); font-family: var(--font-display); }
.matrix td { color: var(--ink-dim); font-family: var(--font-mono); font-size: 13px; }
.matrix tbody tr:hover td, .matrix tbody tr:hover th { background: rgba(139,92,246,0.05); }
.matrix td.off { color: var(--ink-faint); }

/* ---------- Vault ---------- */
.vault {
  border-radius: var(--r-lg); border: 1px solid var(--line-strong);
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(139,92,246,0.14), transparent 70%),
    linear-gradient(170deg, var(--panel), var(--bg-raise));
  padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden;
}
.vault__ring {
  position: absolute; top: -40%; right: -14%; width: 460px; height: 460px;
  border-radius: 50%; border: 1px solid rgba(139,92,246,0.16);
  box-shadow: 0 0 0 40px rgba(139,92,246,0.03), 0 0 0 90px rgba(139,92,246,0.02);
}

/* ---------- Split ---------- */
.split { display: grid; gap: 44px; align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.split--start { align-items: start; }

/* ---------- Final CTA ---------- */
.cta-final { text-align: center; position: relative; overflow: hidden; }
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(139,92,246,0.16), transparent 72%);
}
.cta-final .wrap { position: relative; }
.cta-final h2 { max-width: 19ch; margin-inline: auto; }
.cta-final .lead { margin-inline: auto; }
.cta-final .hero__cta { justify-content: center; }

.split > * { min-width: 0; }