/* Apex VCards: deep-space neon glass. Light field hero, glass panels with neon edges, cards drawn in code. */
:root{
  color-scheme:dark;
  --void:#03050d;
  --deep:#071026;
  --navy:#0b1838;
  --ink:#eef4ff;
  --ink-2:#a8b6d6;
  --ink-3:#6a7799;
  --cyan:#36d6ff;
  --blue:#2f7bff;
  --violet:#9b6cff;
  --magenta:#e05cff;
  --glass:rgba(110,160,255,.055);
  --glass-hi:rgba(140,190,255,.12);
  --edge:rgba(120,190,255,.22);
  --grad:linear-gradient(100deg,var(--cyan),var(--blue) 45%,var(--violet) 75%,var(--magenta));
  --f-display:"Michroma","Eurostile","Arial Black",sans-serif;
  --f-body:"Albert Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
body{margin:0;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 85% 8%,rgba(47,123,255,.16),transparent 60%),
    radial-gradient(900px 600px at 0% 40%,rgba(155,108,255,.10),transparent 60%),
    radial-gradient(1000px 700px at 100% 75%,rgba(54,214,255,.08),transparent 60%),
    var(--void)}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
h1,h2{font-family:var(--f-display);font-weight:400;letter-spacing:.01em;line-height:1.14}
h2{font-size:clamp(26px,3.6vw,44px)}
p{margin:0}
.muted{color:var(--ink-2)}
.wrap{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:10px}
.label .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* glass with a glowing gradient edge */
.glass{position:relative;background:linear-gradient(155deg,var(--glass-hi),var(--glass) 45%,rgba(20,30,70,.18));
  border-radius:var(--r);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 60px -20px rgba(0,0,0,.7)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(54,214,255,.55),rgba(47,123,255,.12) 35%,rgba(155,108,255,.08) 60%,rgba(224,92,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.panel{padding:clamp(20px,3.4vw,40px)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px var(--f-body);color:#fff;text-decoration:none;cursor:pointer;
  padding:12px 22px;border-radius:999px;border:0;white-space:nowrap;
  background:linear-gradient(100deg,#1d8fff,#6a5cff 60%,#b45cff);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 8px 30px -6px rgba(70,120,255,.7);
  transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 10px 40px -4px rgba(90,140,255,.9)}
.btn.ghost{background:rgba(120,170,255,.06);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.ghost:hover{background:rgba(120,170,255,.14);box-shadow:inset 0 0 0 1px rgba(54,214,255,.6),0 0 24px -6px rgba(54,214,255,.6)}
.btn.big{padding:16px 28px;font-size:16px}

/* nav: floating glass pill */
.topbar{position:fixed;top:12px;left:0;right:0;z-index:20;pointer-events:none}
.glass-pill{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 20px;
  border-radius:999px;background:rgba(6,12,30,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(120,190,255,.16),0 10px 40px -10px rgba(0,0,0,.8);max-width:1200px}
.brand img{height:28px;width:auto;display:block}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--ink-2);text-decoration:none;font-size:14px;transition:color .2s}
.nav ul a:hover{color:#fff;text-shadow:0 0 12px rgba(54,214,255,.8)}
.nav-cta{display:flex;gap:8px}
.nav-cta .btn{padding:9px 16px;font-size:14px}
@media (max-width:900px){.nav ul{display:none}}
@media (max-width:480px){.nav-cta .btn{padding:8px 12px;font-size:13px}.brand img{height:22px}.glass-pill{padding:8px 8px 8px 14px;gap:8px}}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:110px 0 80px}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,5,13,.55) 0%,rgba(3,5,13,.2) 45%,transparent 70%),linear-gradient(0deg,var(--void) 0%,transparent 22%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;width:100%}
.hero h1{font-size:clamp(34px,5.6vw,76px);margin:18px 0 22px;display:grid;gap:.08em}
.hero .lede{color:var(--ink-2);font-size:clamp(16px,1.5vw,19px);max-width:36rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.spec{display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0;padding:0;list-style:none;font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.spec b{color:var(--ink);font-weight:500}
.glitch{position:relative;display:inline-block;color:#fff;text-shadow:0 0 30px rgba(54,214,255,.35)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.glitch::before{color:var(--cyan);transform:translate(-2px,0);mix-blend-mode:screen;opacity:.7;clip-path:inset(0 0 55% 0);animation:gl1 6s infinite steps(1)}
.glitch::after{color:var(--magenta);transform:translate(2px,0);mix-blend-mode:screen;opacity:.6;clip-path:inset(55% 0 0 0);animation:gl2 6s infinite steps(1)}
@keyframes gl1{0%,92%,100%{transform:translate(-2px,0)}93%{transform:translate(-6px,-1px);clip-path:inset(10% 0 60% 0)}95%{transform:translate(4px,1px);clip-path:inset(40% 0 30% 0)}}
@keyframes gl2{0%,92%,100%{transform:translate(2px,0)}94%{transform:translate(6px,1px);clip-path:inset(60% 0 10% 0)}96%{transform:translate(-4px,0);clip-path:inset(30% 0 45% 0)}}

.hero-card{position:relative;display:grid;place-items:center;perspective:1400px;min-width:0}
.tilt{position:relative;width:min(100%,600px);transform-style:preserve-3d;transition:transform .25s ease-out;animation:hover 8s ease-in-out infinite}
@keyframes hover{50%{translate:0 -14px}}
.tilt .card{width:100%;display:block;filter:drop-shadow(0 40px 60px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(80,140,255,.35))}
.card-img{height:auto;object-fit:contain}
.halo{position:absolute;inset:-18% -12%;background:radial-gradient(closest-side,rgba(54,214,255,.35),rgba(110,92,255,.18) 50%,transparent 75%);filter:blur(20px);z-index:-1;animation:breath 5s ease-in-out infinite}
@keyframes breath{50%{opacity:.6;transform:scale(.95)}}
.reflect{position:absolute;inset:0;border-radius:24px;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 48%,transparent 60%);mix-blend-mode:overlay;opacity:var(--glare,0);transition:opacity .3s}
.tap-ring{position:absolute;left:20%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);pointer-events:none}
.tap-ring span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(54,214,255,.6);opacity:0;animation:ring 3.6s ease-out infinite}
.tap-ring span:nth-child(2){animation-delay:1.2s}.tap-ring span:nth-child(3){animation-delay:2.4s}
@keyframes ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.6);opacity:0}}
.scroll-cue{position:absolute;bottom:26px;left:50%;translate:-50% 0;z-index:3;width:26px;height:42px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(160,200,255,.4)}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:var(--cyan);translate:-50% 0;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{60%{transform:translateY(14px);opacity:0}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-card{order:-1;margin-top:10px}.tilt{width:min(92%,520px)}.hero-veil{background:linear-gradient(0deg,rgba(3,5,13,.9) 0%,rgba(3,5,13,.4) 60%,rgba(3,5,13,.2))}}

/* card art (SVG) */
.metal{fill:var(--m,#7a5cff)}
.etched{fill:none;stroke:var(--e,#eef3ff);color:var(--e,#eef3ff)}
.fill{fill:var(--e,#eef3ff);stroke:none}
svg text{fill:var(--e,#eef3ff);stroke:none}
.edge{stroke:rgba(255,255,255,.35);stroke-width:.25}
.t-mark{font-family:var(--f-display);font-size:5.6px;letter-spacing:1.6px}
.t-name{font-family:var(--f-body);font-weight:700;font-size:52px}
.t-sub{font-family:var(--f-body);font-weight:600;font-size:27px}
.scan{animation:scan 5.5s cubic-bezier(.6,0,.4,1) infinite;mix-blend-mode:screen}
@keyframes scan{0%{transform:translateX(0)}55%,100%{transform:translateX(130px)}}
.c-black{--m:#1c1d24;--e:#d9dde6}.c-purple{--m:#6a4cf0;--e:#f2efff}.c-blue{--m:#1f5fe6;--e:#eef5ff}.c-red{--m:#c21f33;--e:#fff1f1}
.c-green{--m:#17895c;--e:#effff7}.c-gold{--m:#c39a3f;--e:#fff8e6}.c-rose{--m:#d49686;--e:#fff4f0}.c-platinum{--m:#b9bdc7;--e:#3b4150}
.c-white{--m:#e9ebf0;--e:#4a5060}

/* sections */
section{position:relative;padding-block:clamp(70px,10vw,130px)}
.head{display:grid;gap:14px;max-width:48rem;margin-bottom:clamp(32px,5vw,56px)}
.head.center{margin-inline:auto;text-align:center;justify-items:center}

/* feature tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{padding:30px 24px;display:grid;gap:14px;align-content:start;transition:transform .35s,box-shadow .35s}
.tile:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 70px -20px rgba(47,123,255,.45)}
.tile h3{font-size:18px}
.tile p{color:var(--ink-2);font-size:15px}
.ico{width:64px;height:64px;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(54,214,255,.8)) drop-shadow(0 0 16px rgba(155,108,255,.6))}
.tile:nth-child(2) .ico{stroke:#7fa8ff}.tile:nth-child(3) .ico{stroke:#b99bff}.tile:nth-child(4) .ico{stroke:#e88cff}
.ico .beam{stroke:#fff;animation:blink 1.4s ease-in-out infinite}
@media (max-width:1040px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}

/* color picker */
.picker{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.picker-art{min-width:0;display:grid;place-items:center;padding:clamp(10px,3vw,30px)}
.picker-art .card{width:100%;max-width:560px;filter:none}
.picker-copy{display:grid;gap:16px;min-width:0}
.swatches{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.sw{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;padding:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.55),transparent 42%),var(--s);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 6px 16px -6px rgba(0,0,0,.8);transition:transform .2s,box-shadow .2s}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--void),0 0 0 5px var(--cyan),0 0 22px rgba(54,214,255,.8)}
.pick-name{font-family:var(--f-mono);font-size:13px;color:var(--ink-3)}
.pick-name span{color:var(--ink)}
@media (max-width:900px){.picker{grid-template-columns:1fr}}

/* trio */
.trio-grid{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto auto;gap:22px;align-items:stretch}
.trio-grid .panel:nth-child(3){grid-column:2;grid-row:1 / span 2;align-content:center}
.trio-grid .panel{display:grid;gap:14px;align-content:start;min-width:0}
.trio-grid .card{width:100%;filter:none}
.trio-grid h3{font-size:18px;margin-top:6px}
.phone{position:relative;width:52%;min-width:150px;aspect-ratio:9/16;max-height:100%;margin:0 auto;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,#0d1a3a,#060b1c);box-shadow:inset 0 0 0 2px rgba(160,200,255,.25),0 30px 60px -20px rgba(0,0,0,.8),0 0 40px -10px rgba(80,140,255,.5);
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 14px 16px}
.ph-cover{width:calc(100% + 28px);height:28%;background:linear-gradient(120deg,#2f7bff,#9b6cff 60%,#e05cff);opacity:.85}
.ph-avatar{width:56px;height:56px;margin-top:-30px;border-radius:50%;display:grid;place-items:center;font:400 22px var(--f-display);background:#0b1430;box-shadow:0 0 0 3px #060b1c,0 0 0 4px rgba(54,214,255,.6)}
.ph-name{font-weight:700;font-size:14px}.ph-role{font-size:10.5px;color:var(--ink-2)}
.ph-save{margin-top:6px;font-size:11px;font-weight:600;padding:7px 14px;border-radius:999px;background:linear-gradient(100deg,#1d8fff,#8a5cff)}
.ph-row{display:flex;gap:10px;margin-top:8px}.ph-row i{width:26px;height:26px;border-radius:8px;background:rgba(120,170,255,.14);box-shadow:inset 0 0 0 1px rgba(120,190,255,.3)}
.ph-line{width:100%;height:30px;border-radius:10px;background:rgba(120,170,255,.08);margin-top:6px}.ph-line.s{width:80%}
@media (max-width:980px){.trio-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.trio-grid .panel:nth-child(3){grid-column:auto;grid-row:auto}}

/* circuit timeline */
.circuit{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.circuit::before{content:"";position:absolute;left:3%;right:3%;top:22px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--magenta));opacity:.35}
.circuit::after{content:"";position:absolute;top:19px;left:3%;width:80px;height:8px;border-radius:4px;background:radial-gradient(closest-side,#fff,var(--cyan) 50%,transparent);filter:blur(1px);animation:pulse 5s linear infinite}
@keyframes pulse{0%{left:3%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(97% - 80px);opacity:0}}
.circuit li{position:relative;display:grid;gap:8px;justify-items:start;min-width:0}
.node{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:500 13px var(--f-mono);color:#fff;
  background:radial-gradient(circle,#10204a,#060b1c);box-shadow:0 0 0 1px rgba(54,214,255,.6),0 0 22px rgba(54,214,255,.45)}
.circuit h3{font-size:16px;margin-top:8px}
.circuit p{color:var(--ink-2);font-size:14px}
@media (max-width:1040px){.circuit{grid-template-columns:repeat(3,1fr);row-gap:36px}.circuit::before,.circuit::after{display:none}}
@media (max-width:560px){.circuit{grid-template-columns:1fr}}
.dfy{margin-top:clamp(40px,6vw,64px);display:flex;flex-wrap:wrap;gap:18px 36px;align-items:center;justify-content:space-between}
.dfy>div{display:grid;gap:10px;max-width:42rem;min-width:0}
.dfy h3{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2.4vw,28px)}
.dfy .value{font-family:var(--f-display);font-size:clamp(17px,2vw,22px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:20px;align-items:stretch}
@media (max-width:1180px){.tiers{grid-template-columns:repeat(min(var(--n,3),2),1fr)}}
@media (max-width:700px){.tiers{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.tier{padding:30px 26px;display:flex;flex-direction:column;gap:18px;min-width:0;transition:transform .35s}
.tier:hover{transform:translateY(-6px)}
.tier.pick{background:linear-gradient(160deg,rgba(47,123,255,.26),rgba(155,108,255,.12) 55%,rgba(20,30,70,.2));box-shadow:0 0 60px -14px rgba(80,140,255,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.tier .name{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tier h3{font-family:var(--f-display);font-weight:400;font-size:17px;letter-spacing:.04em}
.tier .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(54,214,255,.12);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(54,214,255,.4)}
.price{font-family:var(--f-display);font-size:clamp(34px,3.4vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.price small{font-family:var(--f-body);font-size:14px;color:var(--ink-2);letter-spacing:0}
.tier .for{color:var(--ink-2);font-size:14.5px}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px}
.tier li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:baseline}
.tier li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transform:translateY(-1px)}
.tier .btn{margin-top:auto}
.ent{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-block:20px}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.faq details{padding:20px 24px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-family:var(--f-mono);font-size:18px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);margin-top:12px;font-size:15px}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

.final-panel{text-align:center;display:grid;gap:28px;justify-items:center;padding-block:clamp(40px,6vw,72px);
  background:radial-gradient(600px 240px at 50% 0%,rgba(54,214,255,.18),transparent 70%),linear-gradient(155deg,var(--glass-hi),var(--glass))}

footer{position:relative;z-index:2;border-top:1px solid rgba(120,190,255,.12);padding-block:36px;color:var(--ink-3);font-size:13px}
.foot{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center}
.foot img{height:24px;width:auto;opacity:.85}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{color:var(--ink-2);text-decoration:none}.foot nav a:hover{color:#fff}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ambient glow behind sections */
.features::before,.how::before,.pricing::before{content:"";position:absolute;z-index:0;pointer-events:none;width:900px;height:600px;border-radius:50%;filter:blur(80px);opacity:.5}
.features::before{left:-300px;top:10%;background:radial-gradient(closest-side,rgba(47,123,255,.35),transparent)}
.how::before{right:-300px;top:20%;background:radial-gradient(closest-side,rgba(155,108,255,.3),transparent)}
.pricing::before{left:50%;top:0;translate:-50% 0;background:radial-gradient(closest-side,rgba(54,214,255,.22),transparent)}

/* page-wide drifting particles (behind everything below the hero) */
#particles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}

/* continuous sheen + auto flip */
section{overflow-x:clip}
.gloss{animation:gloss 4.5s ease-in-out infinite;mix-blend-mode:overlay}
@keyframes gloss{0%{transform:rotate(18deg) translateX(0)}60%,100%{transform:rotate(18deg) translateX(150px)}}
.flipper{position:relative;transform-style:preserve-3d;animation:flip 14s cubic-bezier(.65,0,.35,1) infinite}
@keyframes flip{0%,38%{transform:rotateY(0)}50%,88%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{position:absolute;inset:0;transform:rotateY(180deg)}
.face .card{width:100%;display:block;filter:drop-shadow(0 40px 60px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(80,140,255,.35))}
.gloss-img{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:overlay;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 45%,transparent 60%) no-repeat;background-size:250% 100%;animation:glossImg 4.5s ease-in-out infinite}
@keyframes glossImg{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.hero-card .tilt:hover .flipper{animation-play-state:paused}

/* why apex */
.vs{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;align-items:stretch}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vs li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:baseline;font-size:16px}
.vs-tag{font-family:var(--f-display);font-size:15px;letter-spacing:.06em;margin-bottom:20px}
.vs-paper{opacity:.78;background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.vs-paper::before{background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,.04))}
.vs-paper .vs-tag{color:var(--ink-3)}
.vs-paper li{color:var(--ink-3)}
.vs-paper li::before{content:"✕";color:#ff6b8a;font-size:13px}
.vs-apex{background:linear-gradient(155deg,rgba(47,123,255,.22),rgba(155,108,255,.1) 60%,rgba(20,30,70,.2));box-shadow:0 0 70px -18px rgba(80,140,255,.65),inset 0 1px 0 rgba(255,255,255,.12)}
.vs-apex .vs-tag{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-apex li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.webpage{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.wp-copy{display:grid;gap:12px;min-width:0}
.wp-copy h3{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.6vw,32px);line-height:1.2}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:10px 16px;border-radius:999px;font-size:14px;background:rgba(120,170,255,.08);box-shadow:inset 0 0 0 1px rgba(54,214,255,.3),0 0 18px -8px rgba(54,214,255,.6)}
@media (max-width:900px){.vs,.webpage{grid-template-columns:1fr}}

.ico-img{object-fit:contain;filter:drop-shadow(0 0 6px rgba(54,214,255,.7)) drop-shadow(0 0 16px rgba(155,108,255,.5))}
/* supplied card art: keep its proportions, crop nothing */
.face .card-img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(80,140,255,.3))}
.face.back{display:grid;place-items:center}
.face.back .card{height:auto}

/* 3D fixes: no filters inside the turning card (they blur it), nothing coplanar with it */
.hero-card .halo{inset:auto;width:min(110%,720px);aspect-ratio:1.6;left:50%;top:50%;translate:-50% -50%;z-index:0}
.card-shadow{position:absolute;left:50%;top:50%;width:min(80%,480px);height:40px;translate:-50% 190px;border-radius:50%;background:rgba(0,0,0,.65);filter:blur(24px);z-index:0}
.hero-card .tilt{z-index:1}
.flipper .face .card,.flipper .face .card-img{filter:none!important}
.flipper .face{transform:translateZ(.1px)}
.flipper .face.back{transform:rotateY(180deg) translateZ(.1px)}
.flipper{will-change:transform}
@media (max-width:900px){.card-shadow{translate:-50% 120px}}
.gloss.flat{mix-blend-mode:normal;opacity:.35}
.t-arc{font-family:var(--f-display);font-size:40px;letter-spacing:11px}
.t-arc2{font-family:var(--f-body);font-weight:600;font-size:25px;letter-spacing:9px}
/* crisp, laser-sharp etch: no glow on lettering */
.card text{text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;stroke:none!important;filter:none!important;text-shadow:none!important;paint-order:normal}
.etched{shape-rendering:geometricPrecision}
.gloss{opacity:.55}

/* ---------- phone mock-up of a member page (sizes in em, 1em = phone width / 30) ---------- */
.pm{--w:300px;width:var(--w);font-size:calc(var(--w) / 30);perspective:120em;margin-inline:auto;position:relative}
.pm.sm{--w:min(220px,62vw)}
.pm::after{content:"";position:absolute;left:12%;right:4%;bottom:-3.5em;height:4em;border-radius:50%;background:rgba(0,0,0,.7);filter:blur(1.6em);z-index:-1}
.pm-body{position:relative;aspect-ratio:9/19.3;border-radius:4.6em;padding:.9em;
  background:linear-gradient(135deg,#3a3f4b,#0c0d11 22%,#1b1d23 60%,#43474f 92%,#16171b);
  box-shadow:inset 0 0 0 .15em rgba(255,255,255,.18),inset 0 0 0 .5em #0a0a0d,0 3em 5em -1.5em rgba(0,0,0,.85),0 0 4em -1em rgba(80,140,255,.4);
  transform:rotateY(-16deg) rotateX(6deg) rotateZ(3deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pm:hover .pm-body{transform:rotateY(-6deg) rotateX(3deg) rotateZ(1deg)}
.pm-btn{position:absolute;left:-.32em;width:.36em;border-radius:.3em 0 0 .3em;background:linear-gradient(90deg,#55595f,#202227)}
.pm-btn.b1{top:13%;height:3em}.pm-btn.b2{top:21%;height:5.4em}.pm-btn.b3{top:31%;height:5.4em}
.pm-btn.b4{left:auto;right:-.32em;top:24%;height:8em;border-radius:0 .3em .3em 0;background:linear-gradient(270deg,#55595f,#202227)}
.pm-screen{position:relative;height:100%;border-radius:3.8em;overflow:hidden;background:radial-gradient(120% 50% at 50% 0%,#0f1c40,#05070f 60%);
  color:#eef4ff;font-family:var(--f-body);display:flex;flex-direction:column;padding:0 1.5em}
.pm-screen::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 30%,transparent 70%,rgba(255,255,255,.05))}
.pm-island{position:absolute;top:1.1em;left:50%;translate:-50% 0;width:9em;height:2.6em;border-radius:2em;background:#000;z-index:2}
.pm-status{display:flex;justify-content:space-between;align-items:center;padding:1.5em .8em 0;font-size:1.15em;font-weight:600}
.pm-sig{display:flex;gap:.15em;align-items:flex-end}.pm-sig i{width:.28em;background:#fff;border-radius:.1em}
.pm-sig i:nth-child(1){height:.4em}.pm-sig i:nth-child(2){height:.6em}.pm-sig i:nth-child(3){height:.8em}.pm-sig i:nth-child(4){height:1em}
.pm-logo{display:block;height:2em;width:auto;margin:1.6em auto 1.2em;opacity:.95}
.pm-head{position:relative;border-radius:2em;padding:0 1.4em 1.5em;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:inset 0 0 0 .08em rgba(140,190,255,.22)}
.pm-cover{height:5.6em;margin:0 -1.4em;border-radius:2em 2em 0 0;background:linear-gradient(115deg,#1d6fff,#6a4cf0 55%,#c056ff);opacity:.9}
.pm-ava{width:7.4em;height:7.4em;margin-top:-3.8em;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#7a5cff,#3b25b8 70%);box-shadow:0 0 0 .35em #070b18,0 0 0 .45em rgba(54,214,255,.6),0 .8em 1.6em rgba(0,0,0,.6)}
.pm-ava svg{width:6.4em;height:6.4em}
.pm-name{font-weight:700;font-size:2.1em;line-height:1.1;margin-top:.45em;letter-spacing:-.01em}
.pm-tag{font-size:1.3em;color:#9fe6ff;margin-top:.25em}
.pm-meta{display:grid;margin-top:.7em;padding-left:.8em;border-left:.12em solid rgba(160,200,255,.45);font-size:1.12em;color:#a8b6d6;line-height:1.45}
.pm-chips{display:flex;flex-wrap:wrap;gap:.45em;margin-top:1em}
.pm-chips span{font-size:1em;padding:.35em .8em;border-radius:2em;background:rgba(140,190,255,.12);box-shadow:inset 0 0 0 .08em rgba(140,190,255,.25)}
.pm-save{display:flex;gap:.7em;margin-top:1.1em}
.pm-sbtn{flex:1;text-align:center;font-weight:700;font-size:1.4em;padding:.75em;border-radius:.9em;background:linear-gradient(100deg,#1d8fff,#6a5cff 60%,#b45cff);box-shadow:0 .6em 1.6em -.4em rgba(80,120,255,.8)}
.pm-dl{width:4.2em;display:grid;place-items:center;border-radius:1.2em;background:rgba(140,190,255,.12);box-shadow:inset 0 0 0 .08em rgba(140,190,255,.3)}
.pm-dl svg,.pm-ic svg{width:2em;height:2em;fill:none;stroke:#eef4ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pm-rows{list-style:none;margin:1em 0 0;padding:0;display:grid;gap:.7em}
.pm-rows li{position:relative;display:grid;grid-template-columns:4em 1fr;column-gap:1em;align-items:center;padding:.75em 3em .75em .75em;border-radius:1.4em;
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:inset 0 0 0 .08em rgba(140,190,255,.14)}
.pm-rows li::after{content:"→";position:absolute;right:1.1em;top:50%;translate:0 -55%;font-size:1.5em;color:#cfe6ff}
.pm-ic{grid-row:span 2;width:4em;height:4em;border-radius:50%;display:grid;place-items:center;background:rgba(54,214,255,.12);box-shadow:inset 0 0 0 .08em rgba(54,214,255,.45)}
.pm-rows b{font-size:1.32em;line-height:1.15}
.pm-rows small{font-size:1.08em;color:#a8b6d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-home{position:absolute;bottom:.8em;left:50%;translate:-50% 0;width:11em;height:.45em;border-radius:1em;background:rgba(255,255,255,.75);z-index:4}
.webpage .pm{--w:min(300px,74vw)}
@media (prefers-reduced-motion:reduce){.pm-body{transform:none}}
.wp-right{display:grid;gap:36px;justify-items:center;padding-block:10px 20px}
.wp-right .chips{justify-content:center}
.trio-grid .pm{margin-block:6px 18px}
.pm-ava{position:relative;z-index:1}

/* etched logo/tap mark: white on dark metals, dark on light metals (sharp images, no masks) */
.ink-w{opacity:var(--ink-w,1)}.ink-d{opacity:var(--ink-d,0)}
.c-platinum,.c-white{--ink-w:0;--ink-d:1}

/* hero card back: crisp etched details over the card art */
.face.back .back-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.back-ink text{fill:#eef1f6;stroke:none;text-anchor:middle;text-rendering:geometricPrecision}
.back-ink .bi-name{font-family:var(--f-display);font-size:12px;letter-spacing:.8px}
.back-ink .bi-sub{font-family:var(--f-body);font-weight:500;font-size:11.5px;letter-spacing:.3px}
.back-ink .bi-phone{font-family:var(--f-body);font-weight:600;font-size:19px;letter-spacing:.4px}
.back-ink .bi-web{font-family:var(--f-body);font-weight:600;font-size:14.5px;letter-spacing:.3px}
.back-ink .bi-rule{stroke:#eef1f6;stroke-width:1;opacity:.6}

/* "just joined" popup: slides in from the right, leaves to the left */
.joined{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:6px;max-width:min(380px,calc(100vw - 32px));
  padding:10px 8px 10px 12px;border-radius:16px;background:linear-gradient(155deg,rgba(30,50,110,.72),rgba(10,16,40,.86));
  border:1px solid rgba(120,190,255,.28);box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateX(120%);pointer-events:none}
.joined.on{animation:joinedIn .7s cubic-bezier(.2,.8,.2,1) forwards;pointer-events:auto}
.joined.off{animation:joinedOut .8s cubic-bezier(.6,0,.4,1) forwards}
@keyframes joinedIn{from{opacity:0;transform:translateX(120%)}to{opacity:1;transform:none}}
@keyframes joinedOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-140%)}}
.joined-in{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.joined-av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--f-display);font-size:17px;color:#fff;
  background:linear-gradient(135deg,#1d8fff,#6a5cff 60%,#b45cff) center/cover no-repeat}
.joined-av.img{background-color:#000;background-size:cover}
.joined-txt{display:grid;gap:2px;min-width:0}
.joined-txt b{font-size:14.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.joined-txt span{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.joined-x{flex:none;align-self:flex-start;background:none;border:0;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
.joined-x:hover{color:#fff}
@media (prefers-reduced-motion: reduce){.joined.on{animation:none;opacity:1;transform:none}.joined.off{animation:none;opacity:0}}
@media (max-width:600px){.joined{left:16px;right:16px;bottom:12px;max-width:none}}