/* RIVET — interactive components: 3D tilt cards, avatar clusters, calendar, proof strip */

/* ---- 3D tilt (applied via components.js) ---- */
.tilt-on { will-change: transform; }

/* ---- avatar cluster (people circles) ---- */
.avatars { display:flex; align-items:center; }
.avatars__row { display:flex; align-items:center; }
.avatars .av { width:42px; height:42px; border-radius:50%; border:2.5px solid #fff; box-shadow:0 0 0 1px var(--line), 0 2px 6px - 2px rgba(15,0,37,0.2); overflow:hidden; margin-left:-11px; background:var(--paper-3); flex:none; }
.avatars .av:first-child { margin-left:0; }
.avatars .av img { width:100%; height:100%; object-fit:cover; display:block; }
.avatars .av--ph { background:
  radial-gradient(circle at 50% 38%, rgba(15,0,37,0.18) 0 26%, transparent 27%),
  radial-gradient(circle at 50% 92%, rgba(15,0,37,0.18) 0 38%, transparent 39%),
  var(--paper-3); }
.avatars .av--more { display:grid; place-items:center; background:var(--ink); color:#fff; font-family:var(--font-mono); font-size:0.64rem; font-weight:600; letter-spacing:0.02em; }
.avatars__label { margin-left:14px; font-size:0.86rem; color:var(--fg-soft); }
.avatars__label b { color:var(--ink); }
.avatars--sm .av { width:32px; height:32px; margin-left:-9px; border-width:2px; }

/* ---- program calendar ---- */
.cal { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:clamp(18px,2.2vw,28px); }
.cal__head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cal__head .label { color:var(--fg-mute); }
.cal__grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.cal__dow { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em; color:var(--fg-mute); text-align:center; text-transform:uppercase; padding:4px 0 8px; }
.cal__day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:10px; border:1px solid var(--line-soft); font-family:var(--font-mono); font-size:0.76rem; color:var(--fg-soft); position:relative; min-height:0; }
.cal__day i { width:5px; height:5px; border-radius:50%; }
.cal__day--mute { opacity:0.35; border-style:dashed; }
.cal__day--srt { background:color-mix(in oklab,var(--magenta) 8%,#fff); border-color:color-mix(in oklab,var(--magenta) 30%,transparent); color:var(--ink); font-weight:600; }
.cal__day--srt i { background:var(--magenta); }
.cal__day--lab { background:color-mix(in oklab,var(--violet) 8%,#fff); border-color:color-mix(in oklab,var(--violet) 28%,transparent); color:var(--ink); font-weight:600; }
.cal__day--lab i { background:var(--violet); }
.cal__legend { display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; }
.cal__legend span { display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:0.72rem; color:var(--fg-soft); }
.cal__legend i { width:8px; height:8px; border-radius:50%; }
@media (max-width:560px){ .cal__day { font-size:0.64rem; border-radius:7px; } }

/* ---- proof strip (interior-page social proof) ---- */
.proofstrip { display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,2.6vw,36px); align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:clamp(20px,2.5vw,30px); }
.proofstrip blockquote { margin:0; font-size:var(--step-0); color:var(--ink); font-weight:500; line-height:1.5; text-wrap:pretty; }
.proofstrip blockquote small { display:block; margin-top:6px; color:var(--fg-mute); font-family:var(--font-mono); font-size:0.72rem; font-weight:400; }
.proofstrip__stat { display:flex; flex-direction:column; gap:2px; text-align:right; padding-left:clamp(16px,2vw,28px); border-left:1px solid var(--line); }
.proofstrip__stat strong { font-family:var(--font-mono); font-size:var(--step-3); line-height:1; color:var(--ink); letter-spacing:-0.02em; }
.proofstrip__stat span { color:var(--fg-mute); font-size:0.8rem; }
@media (max-width:720px){
  .proofstrip { grid-template-columns:1fr; }
  .proofstrip__stat { text-align:left; padding-left:0; border-left:0; padding-top:12px; border-top:1px solid var(--line); }
}


/* ============ SCROLL FX (ClickUp-style) ============ */
/* progress bar */
.scrollbar { position:fixed; top:0; left:0; height:3px; width:0; z-index:300; background:linear-gradient(90deg,var(--magenta),var(--violet)); border-radius:0 99px 99px 0; transition:width .1s linear; }

/* layered sticky stack */
.stack-deck { display:grid; gap:clamp(16px,2vw,24px); }
.stack-card { position:sticky; top:calc(108px + var(--i,0)*18px); display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,44px); align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 24px 60px - 28px rgba(15,0,37,0.35); padding:clamp(26px,3.5vw,48px); min-height:230px; }
.stack-card__n { font-family:var(--font-mono); font-weight:600; font-size:clamp(2rem,4vw,3rem); line-height:1; color:var(--magenta); letter-spacing:-0.03em; }
.stack-card__body { display:flex; flex-direction:column; gap:8px; }
.stack-card__body h3 { font-size:var(--step-2); }
.stack-card__body p { margin:0; color:var(--fg-soft); max-width:52ch; }
.stack-card__stat { display:flex; flex-direction:column; gap:2px; text-align:right; }
.stack-card__stat strong { font-family:var(--font-mono); font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1; color:var(--ink); letter-spacing:-0.02em; }
.stack-card__stat span { color:var(--fg-mute); font-size:0.82rem; }
.stack-card--tint { background:linear-gradient(150deg, var(--lilac-soft), #fff 60%); }
.stack-card--ink { background:var(--ink); border-color:var(--ink); }
.stack-card--ink h3, .stack-card--ink .stack-card__stat strong { color:#fff; }
.stack-card--ink p { color:rgba(255,255,255,0.74); }
.stack-card--ink .stack-card__n { color:var(--cyan-bright); }
.stack-card--ink .stack-card__stat span { color:rgba(255,255,255,0.55); }
@media (max-width:720px){ .stack-card{ grid-template-columns:1fr; min-height:0; } .stack-card__stat{ text-align:left; } }

/* ============ CALENDAR UPLIFT ============ */
.cal { background:
  radial-gradient(120% 140% at 0% 0%, rgba(76,243,254,0.10), transparent 55%),
  radial-gradient(130% 140% at 100% 100%, rgba(255,0,212,0.07), transparent 55%), #fff;
  border-radius:var(--r-xl); }
.cal__day { transition:transform .18s ease, box-shadow .18s ease; background:rgba(255,255,255,0.6); }
.cal__day:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 8px 18px - 10px rgba(15,0,37,0.3); z-index:1; }
.cal__day--srt, .cal__day--lab { box-shadow:0 4px 12px - 6px rgba(255,0,212,0.35); }
.cal__day--srt::after { content:'SRT'; font-size:0.5rem; letter-spacing:0.1em; color:var(--magenta); font-weight:600; }
.cal__day--lab::after { content:'LAB'; font-size:0.5rem; letter-spacing:0.1em; color:var(--violet); font-weight:600; }
.cal__day--srt i, .cal__day--lab i { display:none; }
@media (max-width:560px){ .cal__day--srt::after, .cal__day--lab::after { display:none; } .cal__day--srt i, .cal__day--lab i { display:block; } }

/* ============ IMAGE PLACEHOLDER UPLIFT ============ */
.ph { background:
  linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
  radial-gradient(110% 130% at 0% 0%, rgba(59,6,212,0.08), transparent 55%),
  radial-gradient(120% 130% at 100% 100%, rgba(255,0,212,0.08), transparent 55%), var(--paper-2);
  background-size:28px 28px, 28px 28px, 100% 100%, 100% 100%, 100% 100%;
  border:1px solid var(--line); }
.ph span { background:rgba(255,255,255,0.85); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--fg-soft); backdrop-filter:blur(4px); }
.av--ph { box-shadow:0 0 0 1px var(--line), inset 0 0 0 2px rgba(255,255,255,0.8); background:
  radial-gradient(circle at 50% 38%, rgba(59,6,212,0.25) 0 26%, transparent 27%),
  radial-gradient(circle at 50% 95%, rgba(59,6,212,0.25) 0 40%, transparent 41%),
  linear-gradient(150deg, var(--lilac-soft), var(--cyan-soft)); }

/* counter polish */
[data-counted] { font-variant-numeric: tabular-nums; }


/* ============ SUCCESS STORY CARDS (reusable, distributed) ============ */
.storyx { position:relative; display:grid; grid-template-columns:0.9fr 1.4fr; gap:clamp(18px,2.6vw,36px); align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--card-shadow); padding:clamp(20px,2.6vw,34px);
  transform-style:preserve-3d; transition:transform .3s ease, box-shadow .3s ease; max-width:980px; }
.storyx:hover { transform:perspective(900px) rotateX(1.2deg) rotateY(-1.4deg) translateY(-4px); box-shadow:var(--card-shadow-hover), 0 30px 60px - 30px rgba(59,6,212,0.25); }
.storyx--right { grid-template-columns:1.4fr 0.9fr; margin-left:auto; }
.storyx--right .storyx__media { order:2; }
.storyx--center { grid-template-columns:1fr; max-width:680px; margin-inline:auto; text-align:center; }
.storyx--center .storyx__media { max-width:240px; margin-inline:auto; }
.storyx--center .storyx__who { justify-content:center; }
.storyx__media { position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/4.2;
  background:linear-gradient(160deg, var(--lilac-soft), var(--cyan-soft)); transform:translateZ(24px); }
.storyx__media img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.storyx__media .gtag { position:absolute; left:9px; bottom:9px; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.12em; font-weight:700; color:#fff; padding:5px 9px; border-radius:99px; background:linear-gradient(100deg, rgba(255,0,212,0.92), rgba(76,243,254,0.92)); }
.storyx__body { display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.storyx--center .storyx__body { align-items:center; }
.storyx__stat { display:flex; align-items:baseline; gap:10px; }
.storyx__stat strong { font-family:var(--font-mono); font-size:clamp(2rem,1.4rem + 2vw,3rem); line-height:1; letter-spacing:-0.03em; color:var(--magenta); }
.storyx__stat span { color:var(--fg-soft); font-size:0.9rem; max-width:22ch; line-height:1.3; }
.storyx__q { margin:0; font-size:var(--step-1); line-height:1.45; color:var(--ink); letter-spacing:-0.01em; text-wrap:pretty; }
.storyx__who { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.storyx__who b { font-size:0.92rem; color:var(--ink); }
.storyx__who small { font-family:var(--font-mono); font-size:0.7rem; color:var(--fg-mute); }
.storyx__who .lico { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#0a66c2; background:var(--paper-2); transition:all .2s ease; }
.storyx__who .lico:hover { background:#0a66c2; color:#fff; }
.storyx__logo { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-soft); border:1px solid var(--line); border-radius:99px; padding:5px 11px; background:var(--paper-2); }
@media (max-width:720px){ .storyx, .storyx--right { grid-template-columns:1fr; } .storyx--right .storyx__media { order:0; } .storyx__media { max-width:280px; } }

/* ============ MINI QUOTE (compact distributed proof) ============ */
/* ============ FLAGSHIP CASE STUDY ============ */
.casestudy { background:linear-gradient(155deg, #160233, #0F0025 65%, #1c0540); border-radius:var(--r-xl); padding:clamp(26px,3.5vw,48px); color:#fff; box-shadow:0 30px 70px -32px rgba(15,0,37,0.6); position:relative; overflow:hidden; }
.casestudy__head { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,34px); }
.casestudy__brand { display:flex; align-items:center; gap:14px; }
.casestudy__brand img { height:30px; width:auto; filter:brightness(0) invert(1); }
.casestudy__tag { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--cyan-bright,#4CF3FE); border:1px solid rgba(76,243,254,0.4); border-radius:99px; padding:6px 13px; }
.casestudy__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px); margin-bottom:clamp(22px,3vw,32px); }
.casestudy__col h4 { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin:0 0 8px; }
.casestudy__col p { margin:0; color:rgba(255,255,255,0.82); font-size:0.92rem; line-height:1.55; }
.casestudy__metrics { display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap; padding-top:clamp(20px,2.6vw,28px); border-top:1px solid rgba(255,255,255,0.14); align-items:flex-end; }
.casestudy__metric strong { display:block; font-family:var(--font-mono); font-size:clamp(2rem,1.5rem + 2vw,2.8rem); line-height:1; letter-spacing:-0.03em; color:var(--cyan-bright,#4CF3FE); }
.casestudy__metric span { color:rgba(255,255,255,0.6); font-size:0.82rem; }
.casestudy__quote { flex:1; min-width:240px; }
.casestudy__quote blockquote { margin:0; color:#fff; font-size:var(--step-0); line-height:1.5; font-weight:500; text-wrap:pretty; }
.casestudy__quote small { display:block; margin-top:8px; font-family:var(--font-mono); font-size:0.72rem; color:rgba(255,255,255,0.6); }
@media (max-width:720px){ .casestudy__grid { grid-template-columns:1fr; } }

.logos-strip { display:flex; flex-direction:column; align-items:center; gap:18px; }
.logos-strip__label { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-mute); }
.logos-strip__row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,4vw,52px); }
.logos-strip__row img { height:30px; width:auto; object-fit:contain; filter:grayscale(1) opacity(0.55); transition:filter .25s ease, transform .25s ease; }
.logos-strip__row img:hover { filter:grayscale(0) opacity(1); transform:translateY(-2px); }
.logos-strip__word { font-family:var(--font-sans); font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; color:var(--fg-mute); opacity:0.7; transition:color .25s ease, opacity .25s ease; }
.logos-strip__word:hover { color:var(--ink); opacity:1; }
.logos-strip__ph { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-mute); opacity:0.5; border:1px dashed var(--line-strong); border-radius:99px; padding:8px 14px; }
@media (max-width:560px){ .logos-strip__row { gap:22px; } .logos-strip__row img { height:24px; } .logos-strip__word { font-size:1rem; } }

/* ============ MINI QUOTE (compact distributed proof) ============ */
.miniquote { display:flex; gap:14px; align-items:flex-start; max-width:560px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--magenta); border-radius:var(--r-md); box-shadow:var(--card-shadow); }
.miniquote--right { margin-left:auto; border-left:0; border-right:3px solid var(--violet); }
.miniquote__q { margin:0; font-size:var(--step-0); line-height:1.5; color:var(--ink); text-wrap:pretty; }
.miniquote__who { display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap; }
.miniquote__who b { font-size:0.84rem; color:var(--ink); }
.miniquote__who small { font-family:var(--font-mono); font-size:0.66rem; color:var(--fg-mute); }
.miniquote__who .lico { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#0a66c2; background:var(--paper-2); transition:all .2s ease; }
.miniquote__who .lico:hover { background:#0a66c2; color:#fff; }
.miniquote__mark { flex:none; font-family:var(--font-script,serif); font-size:2.4rem; line-height:0.7; color:var(--magenta); opacity:0.5; }
.miniquote--right .miniquote__mark { color:var(--violet); }

/* ============ GIVE-AND-TAKE MAGNET ============ */
.magnet { position:relative; display:grid; grid-template-columns:auto 1.3fr 1fr; gap:clamp(16px,2.4vw,30px); align-items:center;
  padding:clamp(20px,2.6vw,30px); border-radius:var(--r-lg); background:
  linear-gradient(#fff,#fff) padding-box,
  linear-gradient(120deg, var(--magenta), var(--violet) 50%, var(--cyan)) border-box;
  border:1.5px solid transparent; box-shadow:0 16px 40px - 22px rgba(59,6,212,0.35); }
.magnet__ico { display:grid; place-items:center; width:58px; height:58px; border-radius:16px; color:var(--violet);
  background:linear-gradient(150deg, var(--lilac-soft), #fff); border:1px solid var(--line); }
.magnet__copy h3 { font-size:var(--step-1); margin:0 0 4px; }
.magnet__copy p { margin:0; color:var(--fg-soft); font-size:0.92rem; max-width:46ch; }
.magnet__copy .free { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em; color:var(--green); font-weight:700; text-transform:uppercase; }
.magnet__form { display:flex; gap:8px; }
.magnet__form input { flex:1; min-width:0; padding:12px 15px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:#fff; font-family:inherit; font-size:0.9rem; color:var(--ink); }
@media (max-width:820px){ .magnet { grid-template-columns:1fr; } .magnet__ico { display:none; } }

/* ============ COURSE SHARE ============ */
.share { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.6vw,32px); background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(22px,3vw,40px); position:relative; overflow:hidden; }
.share h3 { color:#fff; font-size:var(--step-2); margin:6px 0 8px; }
.share p { color:rgba(255,255,255,0.7); margin:0 0 14px; font-size:0.92rem; max-width:38ch; }
.share .eyebrow { color:var(--cyan-bright); }
.share__form { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.share__form input, .share__form textarea { padding:11px 14px; border-radius:var(--r-md); border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.07); font-family:inherit; font-size:0.88rem; color:#fff; }
.share__form input::placeholder, .share__form textarea::placeholder { color:rgba(255,255,255,0.45); }
.share__form textarea { grid-column:1/-1; min-height:54px; resize:vertical; }
.share__form .btn { grid-column:1/-1; }
.share__wa { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:12px; border-left:1px solid rgba(255,255,255,0.14); padding-left:clamp(18px,2.6vw,32px); }
.btn--wa { background:#25D366; color:#073d20; border-color:transparent; font-weight:700; }
.btn--wa:hover { background:#2ee878; }
.btn--li { background:#0A66C2; color:#fff; border-color:transparent; font-weight:600; }
.btn--li:hover { background:#0b76e0; }
.cta-direct { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.share__wa small { color:rgba(255,255,255,0.55); font-size:0.78rem; }
@media (max-width:760px){ .share { grid-template-columns:1fr; } .share__wa { border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,0.14); padding-top:18px; } .share__form { display:none; } }
@media (min-width:761px){ .share__wa-mobile-note { display:none; } }

/* ============ TWO-TIER PRICING ============ */
.tiers { display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(16px,2.4vw,26px); align-items:stretch; }
.tier { display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--card-shadow); padding:clamp(22px,2.8vw,34px); position:relative; }
.tier--main { border:1.5px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(130deg, var(--magenta), var(--violet)) border-box; box-shadow:0 24px 60px - 28px rgba(255,0,212,0.4); }
.tier__flag { position:absolute; top:-12px; left:24px; font-family:var(--font-mono); font-size:0.6rem; font-weight:700; letter-spacing:0.14em; color:#fff; background:linear-gradient(100deg,var(--magenta),var(--violet)); padding:5px 12px; border-radius:99px; }
.tier h3 { font-size:var(--step-2); }
.tier__who { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; color:var(--fg-mute); }
.tier__amt { display:flex; align-items:baseline; gap:6px; }
.tier__amt strong { font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem); line-height:1; letter-spacing:-0.04em; font-weight:600; color:var(--ink); }
.tier__amt > span { color:var(--fg-mute); font-family:var(--font-mono); font-size:0.85rem; }
.tier__amt strong span { font-size:inherit; color:inherit; font-family:inherit; }
.tier ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.tier ul li { display:flex; gap:10px; color:var(--fg-soft); font-size:0.93rem; }
.tier ul li::before { content:'✓'; color:var(--green); font-weight:700; flex:none; }
.tier ul li.no::before { content:'·'; color:var(--fg-mute); }
@media (max-width:760px){ .tiers { grid-template-columns:1fr; } }

/* WhatsApp number capture */
.share__numinput { width:100%; padding:12px 15px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); font-family:var(--font-mono); font-size:0.84rem; color:#fff; margin-bottom:2px; }
.share__numinput::placeholder { color:rgba(255,255,255,0.4); font-family:var(--font-sans); }

/* ============ BRAND SHAPES (decorative, masked + tinted) ============ */
.phero { position:relative; overflow:clip; }

.phero > .wrap { position:relative; z-index:1; }
.f2 { position:relative; overflow:hidden; }

.f2 > .wrap { position:relative; z-index:1; }
.section--alt { position:relative; }

/* ============ LIVING ECOSYSTEM (home centerpiece) ============ */
.eco { position:relative; max-width:1000px; margin-inline:auto; aspect-ratio:1000/580; perspective:1200px; }
.eco__scene { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .35s ease; }
.eco__wires { position:absolute; inset:0; width:100%; height:100%; }
.eco__wires path { fill:none; stroke:var(--violet); stroke-width:1.4; stroke-dasharray:3 8; stroke-linecap:round; opacity:.35; animation:ecoDash 30s linear infinite; }
.eco__wires path.hot { stroke:var(--magenta); opacity:.5; }
@keyframes ecoDash { to { stroke-dashoffset:-440; } }
.eco__core { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) translateZ(70px); z-index:3; text-align:center;
  padding:26px 34px; border-radius:24px; color:#fff;
  background:radial-gradient(120% 140% at 30% 20%, #2a1850, var(--ink) 70%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 34px 70px -28px rgba(15,0,37,.65), inset 0 1px 0 rgba(255,255,255,.25), 0 0 80px -20px rgba(255,0,212,.45); }
.eco__core b { display:block; font-size:1.15rem; letter-spacing:-0.01em; }
.eco__core small { color:rgba(255,255,255,.62); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.eco__node { position:absolute; z-index:2; display:flex; align-items:center; gap:11px; padding:12px 16px 12px 12px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 20px 44px -20px rgba(15,0,37,.28), inset 0 1px 0 #fff; transform:translate(-50%,-50%) translateZ(var(--z,28px)); animation:ecoFloat var(--dur,7s) ease-in-out infinite; animation-delay:var(--del,0s); }
.eco__node .nico { flex:none; width:30px; height:32px; background:linear-gradient(150deg,var(--c1,var(--violet)),var(--c2,var(--magenta))); -webkit-mask:var(--shp) center/contain no-repeat; mask:var(--shp) center/contain no-repeat; }
.eco__node b { display:block; font-size:.92rem; letter-spacing:-0.01em; color:var(--ink); line-height:1.15; }
.eco__node small { display:block; color:var(--fg-mute); font-size:.74rem; line-height:1.25; }
@keyframes ecoFloat { 50% { margin-top:-9px; } }
@media (prefers-reduced-motion: reduce){ .eco__node, .eco__wires path { animation:none; } }
@media (max-width:760px){
  .eco { aspect-ratio:auto; perspective:none; }
  .eco__scene { position:static; }
  .eco__wires { display:none; }
  .eco__core { position:static; transform:none; display:block; margin:0 0 14px; }
  .eco__node { position:static; transform:none; animation:none; margin-bottom:10px; }
}
.eco__caption { text-align:center; margin-top:18px; }