/* ============================================================
   Vitrynx — FX layer
   fonts · gradient-stroke icons · animated/professional gradients
   ============================================================ */

:root{
  /* font roles (overridable live via Tweaks) */
  --f-display:"Rubik", system-ui, sans-serif;
  --f-head:"Rubik", system-ui, sans-serif;
  --f-body:"Assistant", system-ui, sans-serif;

  /* accent gradient stops (drive icon + text gradients; tweakable) */
  --ac1:#D6C7FB;
  --ac2:#9C73FF;
  --ac3:#6F33DE;
}

/* big display headlines get the display font + tighter optical spacing */
h1, .section-head h2, .hero h1, .final h2, .custom h2, .wa-demo-copy h2{
  font-family:var(--f-display);
  letter-spacing:-0.03em;
}
.faq-q, .step h3, .trust-item h4, .type h4, .work-meta h4, .price-card .amount, .step .num{
  font-family:var(--f-head);
}

/* ---- accent-driven gradient text (re-routes the brand grad through vars) ---- */
.grad-violet{
  background-image:linear-gradient(110deg, var(--ac1) 0%, var(--ac2) 52%, var(--ac3) 100%);
  background-size:100% 100%;
}

/* ============================================================
   Gradient-stroke icons
   ============================================================ */
.ic, .ck, .chev, .ic-svg, .soc-ic{ line-height:0; }
.ic svg, .ck svg, .chev svg, .ic-svg svg, .soc-ic svg{
  width:100%; height:100%; display:block;
  stroke:currentColor; fill:none;
  vector-effect:non-scaling-stroke;
}
/* chips that opt into the gradient stroke */
.grad-ic svg{ stroke:url(#ig); }
.grad-ic svg [fill="currentColor"]{ fill:var(--ac2); }

/* refined chip container (trust + types share .ic; size set per-section) */
.trust-item .ic, .type .ic{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(156,115,255,0.26), rgba(156,115,255,0.05) 60%),
    linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(177,150,242,0.22);
  box-shadow:0 10px 26px -12px rgba(111,51,222,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
}
.trust-item .ic::after, .type .ic::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.18), transparent 70%);
}
.trust-item .ic svg, .type .ic svg{ width:60%; height:60%; margin:auto; position:relative; z-index:1; }
.trust-item .ic, .type .ic{ display:grid; place-items:center; }
.type:hover .ic, .trust-item:hover .ic{ box-shadow:0 14px 34px -10px rgba(111,51,222,0.9), inset 0 1px 0 rgba(255,255,255,0.18); }

/* feat-list checks + offer-strip */
.feat-list .ck svg{ width:13px; height:13px; stroke:#7DF3AC; }
.offer-strip [data-ic] svg{ width:26px; height:26px; stroke:var(--gold); }

/* faq chevron */
.faq-q .chev svg{ stroke:var(--lavender); }

/* hero floaty icons keep their semantic colors */
.floaty .ic svg{ width:60%; height:60%; }

/* footer social */
.footer-col .soc{ display:flex; gap:10px; margin-top:6px; }
.soc-ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--lavender-soft);
  transition:transform .2s, border-color .2s, color .2s, background .2s; }
.soc-ic svg{ width:50%; height:50%; }
.soc-ic:hover{ transform:translateY(-3px); border-color:var(--lavender); color:#fff; background:rgba(156,115,255,0.16); }

/* form success check */
.form-success .big [data-ic] svg{ width:30px; height:30px; stroke:#7DF3AC; }

/* ============================================================
   Professional + dynamic gradients (body.fx-dynamic enables motion)
   ============================================================ */
/* moving sheen across gradient headline words */
.fx-dynamic .grad-violet, .fx-dynamic .grad-gold{
  background-size:220% 100%;
  animation:vx-flow 9s ease-in-out infinite;
}
@keyframes vx-flow{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* breathing ambient orbs */
.fx-dynamic .orb.v1{ animation:vx-orb1 14s ease-in-out infinite; }
.fx-dynamic .orb.v2{ animation:vx-orb2 18s ease-in-out infinite; }
.fx-dynamic .orb.g1{ animation:vx-orb3 16s ease-in-out infinite; }
@keyframes vx-orb1{ 0%,100%{ opacity:.5; } 50%{ opacity:.74; } }
@keyframes vx-orb2{ 0%,100%{ opacity:.34; } 50%{ opacity:.52; } }
@keyframes vx-orb3{ 0%,100%{ opacity:.14; } 50%{ opacity:.24; } }

/* animated gradient border on the featured price card */
.price-card.feature{
  background:
    linear-gradient(#120c20,#120c20) padding-box,
    linear-gradient(140deg, var(--ac2), var(--ac3) 38%, var(--gold) 75%, var(--ac2)) border-box;
  background-size:100% 100%, 300% 300%;
}
.fx-dynamic .price-card.feature{ animation:vx-border 10s linear infinite; }
@keyframes vx-border{
  0%{ background-position:0 0, 0% 50%; }
  100%{ background-position:0 0, 300% 50%; }
}

/* glowing sweep on primary buttons */
.btn-violet::after, .btn-wa::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  background-size:220% 100%; background-position:120% 0; opacity:0;
}
.fx-dynamic .btn-violet::after, .fx-dynamic .btn-wa::after{
  animation:vx-sheen 6s ease-in-out infinite; opacity:1;
}
@keyframes vx-sheen{
  0%{ background-position:120% 0; } 18%,100%{ background-position:-120% 0; }
}

@media (prefers-reduced-motion: reduce){
  .fx-dynamic .grad-violet, .fx-dynamic .grad-gold,
  .fx-dynamic .orb, .fx-dynamic .price-card.feature,
  .fx-dynamic .btn-violet::after, .fx-dynamic .btn-wa::after{ animation:none; }
}

/* ---- Tweaks panel (vanilla) ---- */
#vx-tweaks{
  position:fixed; bottom:18px; left:18px; z-index:120; width:300px; max-width:calc(100vw - 36px);
  background:rgba(16,11,28,0.86); backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--border-2); border-radius:20px; color:var(--tx);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04);
  font-family:var(--f-head); padding:6px; display:none; transform:translateY(12px); opacity:0;
  transition:opacity .25s, transform .25s;
}
#vx-tweaks.show{ display:block; }
#vx-tweaks.in{ opacity:1; transform:none; }
.vx-th{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px 10px; }
.vx-th b{ font-size:14px; font-weight:800; letter-spacing:.02em; }
.vx-th .vx-x{ width:26px; height:26px; border-radius:8px; border:none; cursor:pointer; background:rgba(255,255,255,0.06); color:var(--tx-mid); font-size:15px; }
.vx-th .vx-x:hover{ background:rgba(255,255,255,0.12); color:#fff; }
.vx-sec{ padding:10px 14px 6px; }
.vx-lab{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--tx-soft); margin-bottom:9px; text-transform:uppercase; }
.vx-opts{ display:flex; flex-direction:column; gap:7px; }
.vx-opt{ text-align:right; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--tx-mid);
  background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:11px; padding:10px 12px; cursor:pointer;
  transition:all .18s; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.vx-opt .pv{ font-size:15px; color:var(--tx-soft); }
.vx-opt:hover{ border-color:var(--border-2); color:#fff; }
.vx-opt.on{ background:linear-gradient(160deg, rgba(156,115,255,0.22), rgba(156,115,255,0.06)); border-color:var(--lavender); color:#fff; }
.vx-row{ display:flex; gap:7px; }
.vx-sw{ flex:1; height:38px; border-radius:10px; cursor:pointer; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }
.vx-sw.on{ border-color:#fff; }
.vx-toggle{ display:flex; align-items:center; justify-content:space-between; padding:11px 13px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:11px; cursor:pointer; }
.vx-toggle span{ font-size:13.5px; font-weight:600; }
.vx-knob{ width:42px; height:24px; border-radius:99px; background:rgba(255,255,255,0.12); position:relative; transition:background .2s; flex:none; }
.vx-knob::after{ content:""; position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.vx-toggle.on .vx-knob{ background:linear-gradient(90deg,var(--ac2),var(--ac3)); }
.vx-toggle.on .vx-knob::after{ transform:translateX(-18px); }
.vx-note{ padding:6px 14px 12px; font-size:11px; color:var(--tx-faint); line-height:1.5; }
@media (max-width:560px){ #vx-tweaks{ bottom:92px; } }