/* ===========================================================
   PYTHON PIA — vfx.css
   Extreme futuristic animation & effects layer (index page)
   Loaded AFTER style.css. Pure additive — no base overrides
   except intentional enhancements. Respects reduced-motion.
   =========================================================== */

/* ---------- 0. global motion tokens ---------- */
:root{
  --vfx-ease: cubic-bezier(.22,.61,.36,1);
  --vfx-spring: cubic-bezier(.34,1.56,.64,1);
  --glow-sage: 0 0 0 1px rgba(90,125,82,.25), 0 14px 40px -16px rgba(90,125,82,.55);
  --glow-red: 0 0 0 1px rgba(181,82,78,.28), 0 14px 40px -16px rgba(181,82,78,.5);
}

/* ===========================================================
   1. CURSOR SPOTLIGHT  (ambient light following pointer)
   =========================================================== */
.spotlight{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
             rgba(168,197,160,.16), transparent 60%);
  mix-blend-mode:multiply; opacity:0; transition:opacity .6s ease;
}
.spotlight.on{opacity:1}
@media (hover:none){ .spotlight{display:none} }

/* ===========================================================
   2. ENTRANCE ANIMATIONS — angle / flip / scale variants
   driven by [data-fx] + .vin (in-view) added by vfx.js
   =========================================================== */
[data-fx]{opacity:0; will-change:transform,opacity;
  transition:opacity .9s var(--vfx-ease), transform .9s var(--vfx-ease);}
[data-fx].vin{opacity:1; transform:none !important;}

[data-fx="up"]      { transform:translateY(60px); }
[data-fx="down"]    { transform:translateY(-60px); }
[data-fx="left"]    { transform:translateX(70px); }
[data-fx="right"]   { transform:translateX(-70px); }
[data-fx="zoom"]    { transform:scale(.82); }
[data-fx="zoom-out"]{ transform:scale(1.15); }
[data-fx="flip-x"]  { transform:perspective(1200px) rotateX(35deg); transform-origin:bottom; }
[data-fx="flip-y"]  { transform:perspective(1200px) rotateY(-35deg); transform-origin:left; }
[data-fx="flip-y-r"]{ transform:perspective(1200px) rotateY(35deg); transform-origin:right; }
[data-fx="tilt-in"] { transform:perspective(1200px) rotateX(18deg) rotateY(-14deg) translateY(40px); }
[data-fx="skew"]    { transform:skewY(7deg) translateY(50px); }
[data-fx="rotate"]  { transform:rotate(-8deg) scale(.9); }
[data-fx="blur"]    { transform:translateY(30px); filter:blur(14px); }
[data-fx="blur"].vin{ filter:blur(0); }
[data-fx="unfold"]  { transform:perspective(1000px) rotateX(-90deg); transform-origin:top; }
[data-fx="swing"]   { transform:perspective(1000px) rotateY(50deg) translateX(60px); transform-origin:right center; }

/* stagger delays via [data-d] */
[data-d="1"]{transition-delay:.08s}
[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}
[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.40s}
[data-d="6"]{transition-delay:.48s}

/* ===========================================================
   3. SCROLL-DRIVEN PARALLAX layers  ([data-par] w/ --spd)
   transform set inline by JS, this just smooths it
   =========================================================== */
[data-par]{will-change:transform}

/* ===========================================================
   4. GLITCH / DECODE headline effect (.glitch)
   =========================================================== */
.glitch{position:relative; display:inline-block;}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  clip-path:inset(0); opacity:.85; pointer-events:none;
}
.glitch.go::before{ color:var(--red-accent); animation:gl-a .42s steps(2) 1; left:2px;}
.glitch.go::after { color:var(--sage-deep); animation:gl-b .42s steps(2) 1; left:-2px;}
@keyframes gl-a{0%{clip-path:inset(0 0 82% 0)}30%{clip-path:inset(40% 0 30% 0)}60%{clip-path:inset(70% 0 8% 0)}100%{clip-path:inset(0)}}
@keyframes gl-b{0%{clip-path:inset(85% 0 0 0)}30%{clip-path:inset(20% 0 55% 0)}60%{clip-path:inset(8% 0 75% 0)}100%{clip-path:inset(0)}}

/* per-letter decode reveal */
.decode .ch{display:inline-block; opacity:0; transform:translateY(.4em) rotateX(-90deg);
  transform-origin:bottom; transition:opacity .5s ease, transform .5s var(--vfx-spring);}
.decode.go .ch{opacity:1; transform:none;}
.decode .ch.sp{width:.32em}

/* ===========================================================
   5. HERO upgrades — animated grid + scanlines + vignette
   =========================================================== */
.hero{ isolation:isolate; }
.hero__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(168,197,160,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,197,160,.10) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  animation:gridpan 22s linear infinite;
}
@keyframes gridpan{from{background-position:0 0,0 0}to{background-position:46px 46px,46px 46px}}
.hero__scan{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(43,46,42,.05) 3px 4px);
  animation:scanmove 8s linear infinite;
}
@keyframes scanmove{from{background-position:0 0}to{background-position:0 80px}}
.hero__beam{
  position:absolute; left:0; right:0; height:140px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(168,197,160,.18), transparent);
  filter:blur(8px); animation:beam 7s var(--vfx-ease) infinite;
}
@keyframes beam{0%{top:-10%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:105%;opacity:0}}

/* floating particle dots */
.hero__orbs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero__orbs i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(168,197,160,.9), rgba(90,125,82,.15));
  filter:blur(.3px); opacity:.0; animation:floaty linear infinite;}
@keyframes floaty{
  0%{transform:translateY(20px) scale(.6);opacity:0}
  12%{opacity:.7}
  88%{opacity:.7}
  100%{transform:translateY(-120px) scale(1.1);opacity:0}
}

/* hero text intro motion */
.hero .hero__tag,.hero h1,.hero__lead,.hero__cta,.hero__stats{opacity:0;transform:translateY(28px);}
.hero.lit .hero__tag{animation:heroUp .8s .15s var(--vfx-ease) forwards}
.hero.lit h1{animation:heroUp .9s .28s var(--vfx-ease) forwards}
.hero.lit .hero__lead{animation:heroUp .9s .46s var(--vfx-ease) forwards}
.hero.lit .hero__cta{animation:heroUp .9s .62s var(--vfx-ease) forwards}
.hero.lit .hero__stats{animation:heroUp .9s .78s var(--vfx-ease) forwards}
@keyframes heroUp{to{opacity:1;transform:none}}

/* hero stat dividers pulse */
.hero__stat{position:relative}
.hero__stat b{position:relative;display:inline-block}
.hero__stat b::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,transparent,var(--sage),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .8s .6s var(--vfx-ease)}
.hero.lit .hero__stat b::after{transform:scaleX(1)}

/* ===========================================================
   6. MAGNETIC / 3D TILT cards  (.tilt — JS sets --rx,--ry)
   =========================================================== */
.tilt{transform-style:preserve-3d;
  transition:transform .3s var(--vfx-ease), box-shadow .3s ease;}
.tilt.act{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);}
.tilt .card__icon,.tilt h3,.tilt > p{transition:transform .3s var(--vfx-ease)}
.tilt.act .card__icon{transform:translateZ(45px)}
.tilt.act h3{transform:translateZ(28px)}
.tilt.act > p{transform:translateZ(16px)}
/* glare sheen */
.tilt{position:relative; overflow:hidden}
.tilt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(180px circle at var(--gx,50%) var(--gy,0%),
            rgba(255,255,255,.5), transparent 60%);
  opacity:0;transition:opacity .3s ease;mix-blend-mode:overlay;}
.tilt.act::after{opacity:.7}

/* ===========================================================
   7. SERVICE CARD — extra hover VFX (border draw + scan)
   =========================================================== */
.card.fxcard{position:relative; overflow:hidden;}
.card.fxcard .card__icon{position:relative; z-index:2;}
.card.fxcard::before{ /* sweeping scan light */
  content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(168,197,160,.28),transparent);
  transform:skewX(-18deg);transition:left .7s var(--vfx-ease);opacity:0;}
.card.fxcard:hover::before{left:120%;opacity:1;}
.card.fxcard svg{transition:transform .5s var(--vfx-spring)}
.card.fxcard:hover svg{transform:rotate(-6deg) scale(1.12)}
.card.fxcard:hover{box-shadow:var(--glow-sage)}
/* animated corner brackets */
.card.fxcard i.brk{position:absolute;width:16px;height:16px;z-index:2;pointer-events:none;
  border-color:var(--sage-deep);opacity:0;transition:opacity .4s ease, inset .4s var(--vfx-ease)}
.card.fxcard i.tl{top:14px;left:14px;border-top:2px solid;border-left:2px solid}
.card.fxcard i.tr{top:14px;right:14px;border-top:2px solid;border-right:2px solid}
.card.fxcard i.bl{bottom:14px;left:14px;border-bottom:2px solid;border-left:2px solid}
.card.fxcard i.br{bottom:14px;right:14px;border-bottom:2px solid;border-right:2px solid}
.card.fxcard:hover i.brk{opacity:.9}

/* ===========================================================
   8. MARQUEE trust strip
   =========================================================== */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee__track{display:flex;gap:3.4rem;width:max-content;animation:scrollx 26s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:.7rem;}
.marquee__track span::before{content:"◆";color:var(--sage-deep);font-size:.6rem}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ===========================================================
   9. MEDIA FRAME — scan reveal + hologram tag
   =========================================================== */
.media-frame.fxmedia{position:relative;overflow:hidden}
.media-frame.fxmedia::before{ /* descending scan line on reveal */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sage),var(--red-soft),transparent);
  box-shadow:0 0 18px 3px rgba(168,197,160,.6);
  transform:translateY(0);opacity:0;}
.media-frame.fxmedia.vin::before{animation:scanReveal 1.6s .2s var(--vfx-ease) forwards}
@keyframes scanReveal{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.media-frame.fxmedia img,.media-frame.fxmedia .imgph{
  clip-path:inset(0 0 100% 0);transition:clip-path 1.2s .15s var(--vfx-ease), transform .6s ease;}
.media-frame.fxmedia.vin img,.media-frame.fxmedia.vin .imgph{clip-path:inset(0)}
.media-frame.fxmedia:hover img{transform:scale(1.05)}
/* HUD corner ticks */
.media-frame.fxmedia .hud{position:absolute;inset:10px;z-index:3;pointer-events:none;
  border:1px solid rgba(245,242,233,.25);border-radius:10px;opacity:0;transition:opacity .8s .6s ease}
.media-frame.fxmedia.vin .hud{opacity:1}

/* ===========================================================
   10. STEPS — animated connector line draws on reveal
   =========================================================== */
.steps.fxsteps{position:relative}
.steps.fxsteps .step{opacity:0;transform:translateX(40px);
  transition:opacity .7s var(--vfx-ease), transform .7s var(--vfx-ease);}
.steps.fxsteps.vin .step{opacity:1;transform:none}
.steps.fxsteps.vin .step:nth-child(1){transition-delay:.05s}
.steps.fxsteps.vin .step:nth-child(2){transition-delay:.20s}
.steps.fxsteps.vin .step:nth-child(3){transition-delay:.35s}
.steps.fxsteps.vin .step:nth-child(4){transition-delay:.50s}
.steps.fxsteps .step__n{position:relative;overflow:hidden}
.steps.fxsteps .step__n::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 0deg,var(--sage-deep),var(--red-soft),var(--sage),var(--sage-deep));
  opacity:0;animation:spin 4s linear infinite;mix-blend-mode:overlay}
.steps.fxsteps .step:hover .step__n::after{opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===========================================================
   11. STAT BAND — neon count glow + radar bg
   =========================================================== */
.bg-ink{position:relative;overflow:hidden}
.bg-ink .statband__c b{transition:text-shadow .4s ease}
.bg-ink .statband__c:hover b{text-shadow:0 0 22px rgba(168,197,160,.7)}
.statband-radar{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(168,197,160,.08) 28% 29%, transparent 30%),
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(168,197,160,.08) 44% 45%, transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(168,197,160,.07) 60% 61%, transparent 62%);}
.statband-sweep{position:absolute;top:50%;left:50%;width:160%;aspect-ratio:1;z-index:0;
  translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(168,197,160,.22), transparent 30%);
  animation:spin 6s linear infinite;mix-blend-mode:screen;opacity:.5}

/* ===========================================================
   12. QUOTE cards — 3D entrance + sheen
   =========================================================== */
.quote.fxquote{position:relative;overflow:hidden;transition:transform .5s var(--vfx-ease),box-shadow .5s ease}
.quote.fxquote:hover{transform:translateY(-8px) rotateZ(-.6deg);box-shadow:var(--shadow)}
.quote.fxquote::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(200px circle at var(--gx,50%) var(--gy,50%),rgba(168,197,160,.16),transparent 60%);
  opacity:0;transition:opacity .4s ease}
.quote.fxquote:hover::after{opacity:1}

/* ===========================================================
   13. CTA band — animated gradient aurora + shimmer text
   =========================================================== */
.cta-band{position:relative;overflow:hidden}
.cta-band .aurora{position:absolute;inset:-40%;z-index:0;pointer-events:none;opacity:.55;
  background:conic-gradient(from 90deg at 50% 50%,
    var(--sage-deep),var(--red-accent),var(--sage-ink),var(--red-soft),var(--sage-deep));
  filter:blur(60px);animation:spin 14s linear infinite;}
.cta-band > *{position:relative;z-index:1}

/* ===========================================================
   14. SECTION reveal — soft rising divider lines
   =========================================================== */
.fxline{position:relative}
.fxline::before{content:"";position:absolute;top:0;left:50%;width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--sage-deep),transparent);
  transform:translateX(-50%);transition:width 1.1s var(--vfx-ease)}
.fxline.vin::before{width:min(420px,70%)}

/* eyebrow label — typed underscore blink */
.eyebrow.fxeye::after{content:"_";color:var(--red-accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ===========================================================
   15. SCROLL PROGRESS RING (bottom-right)
   =========================================================== */
.progress-ring{position:fixed;right:22px;bottom:90px;width:46px;height:46px;z-index:60;
  opacity:0;transform:scale(.6);transition:opacity .4s ease,transform .4s var(--vfx-spring);pointer-events:none}
.progress-ring.show{opacity:1;transform:scale(1)}
.progress-ring svg{transform:rotate(-90deg)}
.progress-ring circle{fill:none;stroke-width:3}
.progress-ring .bg{stroke:rgba(43,46,42,.12)}
.progress-ring .fg{stroke:var(--sage-deep);stroke-linecap:round;
  stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset .1s linear}

/* ===========================================================
   16. MOBILE / reduced motion
   =========================================================== */
@media (max-width:760px){
  .tilt.act{transform:none}            /* disable heavy tilt on touch */
  .hero__orbs{opacity:.6}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  [data-fx],.hero .hero__tag,.hero h1,.hero__lead,.hero__cta,.hero__stats,
  .steps.fxsteps .step,.media-frame.fxmedia img{opacity:1 !important;transform:none !important;
    clip-path:none !important;filter:none !important}
  .hero__grid,.hero__scan,.hero__beam,.hero__orbs,.statband-sweep,.cta-band .aurora{display:none}
}

/* ===========================================================
   ===========  LUXURY UPGRADE LAYER  ========================
   Hero cinematic lighting + flip-cards + carousel
   =========================================================== */
:root{
  --gold:      #C9A86A;
  --gold-soft: #E3CE9E;
  --gold-deep: #A07E3E;
}

/* ---------- 17. HERO — luxury cinematic lighting ---------- */
/* deepen base for richer contrast */
.hero__bg::after{
  background:
    linear-gradient(180deg, rgba(20,24,20,.62), rgba(20,24,20,.86)),
    radial-gradient(120% 90% at 78% -5%, rgba(90,125,82,.45), transparent 55%),
    radial-gradient(80% 70% at 12% 110%, rgba(201,168,106,.18), transparent 60%) !important;
}
/* slow-drifting aurora mesh behind everything */
.hero__aurora{position:absolute;inset:-30%;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(38% 44% at 22% 30%, rgba(90,125,82,.55), transparent 60%),
    radial-gradient(34% 40% at 80% 24%, rgba(201,168,106,.30), transparent 60%),
    radial-gradient(40% 46% at 62% 82%, rgba(181,82,78,.28), transparent 60%),
    radial-gradient(36% 42% at 30% 76%, rgba(168,197,160,.36), transparent 60%);
  filter:blur(36px) saturate(1.1);
  animation:auroraDrift 20s ease-in-out infinite alternate;}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2%,-2%,0) scale(1.08) rotate(4deg)}
  100%{transform:translate3d(-2%,2%,0) scale(1.04) rotate(-3deg)}
}
/* twin diagonal light shafts sweeping across hero */
.hero__shafts{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.hero__shafts span{position:absolute;top:-40%;width:34vw;height:180%;
  background:linear-gradient(100deg,transparent,rgba(227,206,158,.10) 45%,rgba(227,206,158,.20) 50%,rgba(227,206,158,.10) 55%,transparent);
  transform:rotate(14deg);filter:blur(6px);animation:shaft 11s ease-in-out infinite}
.hero__shafts span:nth-child(1){left:-10%;animation-delay:0s}
.hero__shafts span:nth-child(2){left:40%;animation-delay:-5.5s;opacity:.7}
@keyframes shaft{0%,100%{transform:rotate(14deg) translateX(-10%);opacity:0}
  20%{opacity:1}50%{transform:rotate(14deg) translateX(30%);opacity:.8}80%{opacity:.2}}

/* gold hairline frame around hero viewport */
.hero__frame{position:absolute;inset:18px;z-index:2;pointer-events:none;border-radius:14px;
  border:1px solid rgba(227,206,158,.22);
  box-shadow:inset 0 0 60px -20px rgba(201,168,106,.4);
  opacity:0;animation:fadeFrame 1.4s 1.1s ease forwards}
.hero__frame::before,.hero__frame::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold-soft);opacity:.65}
.hero__frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.hero__frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 14px 0}
@keyframes fadeFrame{to{opacity:1}}

/* corner coordinate read-outs (luxury HUD telemetry) */
.hero__hud{position:absolute;z-index:3;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.22em;color:rgba(227,206,158,.6);pointer-events:none;
  opacity:0;animation:fadeFrame 1.2s 1.3s ease forwards}
.hero__hud.tl{top:34px;left:38px}
.hero__hud.br{bottom:34px;right:38px;text-align:right}

/* upgrade the eyebrow tag → glass pill with gold dot */
.hero__tag{background:linear-gradient(120deg,rgba(245,242,233,.10),rgba(245,242,233,.03));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(227,206,158,.28);padding:.5rem 1rem;border-radius:100px;
  box-shadow:0 4px 24px -12px rgba(201,168,106,.6)}
.hero__tag .dot{background:var(--gold-soft) !important;box-shadow:0 0 0 0 var(--gold) !important}

/* gold gradient accent on the italic word + soft glow */
.hero h1 .accent{
  background:linear-gradient(95deg,var(--gold-soft),var(--gold),var(--sage));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 40px rgba(201,168,106,.35);}

/* radar gets a gold ring */
.hero__radar::before{border-color:rgba(227,206,158,.30)}
.radar-sweep{background:conic-gradient(from 0deg, rgba(227,206,158,.5), transparent 28%) !important}

/* hero stat numbers → gold shimmer underline already; add hover glow */
.hero__stat b{background:linear-gradient(120deg,var(--cream),var(--gold-soft));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* glass credential bar beneath stats */
.hero__creds{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;opacity:0}
.hero.lit .hero__creds{animation:heroUp .9s .92s var(--vfx-ease) forwards}
.hero__creds span{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,233,.72);padding:.42rem .8rem;border-radius:8px;
  border:1px solid rgba(227,206,158,.2);background:rgba(245,242,233,.04);
  display:inline-flex;align-items:center;gap:.5rem}
.hero__creds span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-soft)}

/* ===========================================================
   18. FLIP-CARD SECTION  (3D front/back reveal)
   =========================================================== */
.flipgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.flip{perspective:1400px;height:300px}
.flip__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .9s var(--vfx-spring);}
.flip:hover .flip__in,.flip.flipped .flip__in{transform:rotateY(180deg)}
.flip__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--radius);padding:2rem 1.6rem;display:flex;flex-direction:column;
  border:1px solid var(--line);overflow:hidden}
.flip__front{background:linear-gradient(160deg,var(--cream-3),var(--cream-2));
  align-items:flex-start;justify-content:space-between}
.flip__front .fnum{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--gold-deep)}
.flip__front .ficon{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--sage),var(--sage-deep));color:var(--cream);margin:.4rem 0}
.flip__front .ficon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.6}
.flip__front h3{font-size:1.22rem;line-height:1.35}
.flip__front .fhint{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:.4rem;margin-top:.6rem}
.flip__front .fhint::after{content:"↻";font-size:.9rem;color:var(--gold-deep)}
.flip__back{transform:rotateY(180deg);
  background:linear-gradient(160deg,var(--sage-ink),var(--ink));color:var(--cream);
  justify-content:center;gap:.8rem;border-color:rgba(227,206,158,.25)}
.flip__back p{font-size:.96rem;color:rgba(245,242,233,.88)}
.flip__back .bk{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.flip__back::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 80% at 90% 0%,rgba(201,168,106,.22),transparent 55%)}
/* gold sheen sweep on the front while idle */
.flip__front::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(201,168,106,.18),transparent);
  transform:skewX(-18deg);animation:cardSheen 5s ease-in-out infinite}
@keyframes cardSheen{0%,70%{left:-60%}100%{left:130%}}

/* ===========================================================
   19. CAROUSEL  (auto-rotating spotlight slider)
   =========================================================== */
.carousel{position:relative;max-width:920px;margin:2.4rem auto 0}
.carousel__view{position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid rgba(227,206,158,.22);background:linear-gradient(160deg,var(--ink),var(--sage-ink));
  box-shadow:var(--shadow)}
.carousel__track{display:flex;transition:transform .8s var(--vfx-ease)}
.carousel__slide{min-width:100%;padding:clamp(2rem,4vw,3.4rem);color:var(--cream);position:relative}
.carousel__slide::before{content:"❝";position:absolute;top:1.2rem;left:1.6rem;font-family:var(--display);
  font-size:4rem;line-height:1;color:rgba(201,168,106,.35)}
.carousel__slide .ctxt{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.6rem);
  line-height:1.6;font-style:italic;position:relative;z-index:1;margin-bottom:1.6rem}
.carousel__slide .cmeta{display:flex;align-items:center;gap:.9rem}
.carousel__slide .cav{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:1.2rem;color:var(--ink);
  background:linear-gradient(145deg,var(--gold-soft),var(--gold))}
.carousel__slide .cwho b{display:block;font-family:var(--body);font-size:.98rem}
.carousel__slide .cwho small{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft)}
/* aurora glow inside carousel */
.carousel__view::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(80% 120% at 85% 0%,rgba(90,125,82,.4),transparent 55%)}
.carousel__nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.6rem}
.carousel__btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--cream-3);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  font-size:1.1rem;transition:all .3s var(--vfx-ease)}
.carousel__btn:hover{background:var(--sage-deep);color:var(--cream);border-color:var(--sage-deep);
  transform:scale(1.08);box-shadow:var(--glow-sage)}
.carousel__dots{display:flex;gap:.5rem}
.carousel__dots b{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;
  transition:all .3s ease;display:block}
.carousel__dots b.on{background:var(--gold);width:26px;border-radius:6px}

@media (max-width:760px){ .flip{height:280px} .flip:hover .flip__in{transform:none} }
@media (prefers-reduced-motion:reduce){
  .hero__aurora,.hero__shafts,.flip__front::after{animation:none}
  .flip:hover .flip__in{transform:none}
}

/* ===========================================================
   ===========  GORGEOUS UPGRADE LAYER v2  ===================
   Magic cross-fade testimonials + animated-gradient flip cards
   =========================================================== */

/* ---------- 20. MAGIC FADE TESTIMONIALS ---------- */
.cfade{position:relative;max-width:860px;margin:2.6rem auto 0;min-height:340px}
.cfade__stage{position:relative;min-height:320px}
.cfade__card{position:absolute;inset:0;
  border-radius:var(--radius);padding:clamp(2rem,4vw,3.4rem);
  background:linear-gradient(160deg,var(--ink),var(--sage-ink));
  border:1px solid rgba(227,206,158,.22);box-shadow:var(--shadow);color:var(--cream);
  opacity:0;transform:scale(.92) translateY(24px);filter:blur(14px);
  pointer-events:none;
  transition:opacity .9s var(--vfx-ease), transform 1s var(--vfx-spring), filter .9s var(--vfx-ease);}
.cfade__card.on{opacity:1;transform:none;filter:blur(0);pointer-events:auto;z-index:2}
.cfade__card.out{opacity:0;transform:scale(1.06) translateY(-18px);filter:blur(12px);z-index:1}
/* mysterious aura that breathes behind the active card */
.cfade__card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;
  background:radial-gradient(70% 110% at 85% -10%,rgba(90,125,82,.45),transparent 55%),
            radial-gradient(60% 90% at 5% 110%,rgba(201,168,106,.22),transparent 55%);}
.cfade__card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(168,197,160,.12),transparent 60%);
  opacity:0;animation:breathe 6s ease-in-out infinite}
.cfade__card.on::after{opacity:1}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:.85}}
.cfade__q{position:absolute;top:1rem;left:1.6rem;font-family:var(--display);font-size:4rem;
  line-height:1;color:rgba(201,168,106,.35);z-index:1}
.cfade__txt{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.55rem);
  line-height:1.65;position:relative;z-index:2;margin-bottom:1.7rem}
/* per-word shimmer reveal when a card becomes active */
.cfade__txt .w{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(4px);
  transition:opacity .6s ease, transform .6s var(--vfx-spring), filter .6s ease}
.cfade__card.on .cfade__txt .w{opacity:1;transform:none;filter:blur(0)}
.cfade__meta{display:flex;align-items:center;gap:.9rem;position:relative;z-index:2}
.cfade__av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-size:1.25rem;color:var(--ink);
  background:linear-gradient(145deg,var(--gold-soft),var(--gold));
  box-shadow:0 0 0 0 rgba(201,168,106,.6);animation:avPulse 2.6s ease-out infinite}
@keyframes avPulse{0%{box-shadow:0 0 0 0 rgba(201,168,106,.5)}70%{box-shadow:0 0 0 14px rgba(201,168,106,0)}100%{box-shadow:0 0 0 0 rgba(201,168,106,0)}}
.cfade__who b{display:block;font-family:var(--body);font-size:1rem}
.cfade__who small{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
/* progress dots */
.cfade__dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.8rem;position:relative;z-index:3}
.cfade__dots b{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;
  transition:all .4s var(--vfx-ease);display:block;position:relative;overflow:hidden}
.cfade__dots b.on{width:34px;border-radius:6px;background:rgba(201,168,106,.3)}
.cfade__dots b.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gold);
  transform-origin:left;animation:dotfill 5s linear forwards}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 21. GORGEOUS FLIP CARDS (animated gradient) ---------- */
/* animated flowing gradient border via padding-box trick */
.flip{position:relative}
.flip__in{border-radius:calc(var(--radius) + 2px)}
/* gradient halo behind each card, rotating */
.flip::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius) + 4px);z-index:0;
  background:conic-gradient(from var(--ang,0deg),
    var(--sage-deep),var(--gold),var(--red-soft),var(--sage),var(--sage-deep));
  opacity:0;transition:opacity .5s ease;filter:blur(8px);
  animation:angSpin 6s linear infinite}
.flip:hover::before,.flip.flipped::before{opacity:.85}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes angSpin{to{--ang:360deg}}
/* fallback if @property unsupported — still animates via background-position */
@supports not (background:conic-gradient(from var(--ang),red,blue)){
  .flip::before{background:linear-gradient(120deg,var(--sage-deep),var(--gold),var(--red-soft),var(--sage));
    background-size:300% 300%;animation:gradShift 6s ease infinite}
  @keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
}
.flip__face{border:none}
.flip__front{background:linear-gradient(160deg,var(--cream-3),var(--cream-2));
  box-shadow:inset 0 0 0 1px var(--line)}
/* animated mesh gradient on the FRONT, subtle & mysterious */
.flip__front::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.0;
  background:
    radial-gradient(40% 50% at 20% 20%,rgba(168,197,160,.5),transparent 60%),
    radial-gradient(40% 50% at 85% 30%,rgba(201,168,106,.35),transparent 60%),
    radial-gradient(50% 60% at 60% 95%,rgba(90,125,82,.4),transparent 60%);
  transition:opacity .6s ease;animation:meshFloat 9s ease-in-out infinite}
.flip:hover .flip__front::before{opacity:.7}
@keyframes meshFloat{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.2) rotate(8deg)}}
.flip__front > *{position:relative;z-index:1}
/* icon glow ring on hover */
.flip__front .ficon{position:relative;transition:transform .6s var(--vfx-spring),box-shadow .5s ease}
.flip:hover .flip__front .ficon{transform:translateY(-4px) rotate(-6deg) scale(1.06);
  box-shadow:0 12px 30px -10px rgba(90,125,82,.7)}
.flip__front .ficon::after{content:"";position:absolute;inset:-4px;border-radius:inherit;
  border:1px solid rgba(201,168,106,.5);opacity:0;transition:opacity .5s ease}
.flip:hover .flip__front .ficon::after{opacity:1;animation:ringPulse 1.6s ease-out infinite}
@keyframes ringPulse{0%{inset:-4px;opacity:.7}100%{inset:-14px;opacity:0}}
/* richer back face with animated shimmer line */
.flip__back{background:linear-gradient(160deg,var(--sage-ink),var(--ink))}
.flip__back .bk{position:relative;display:inline-block;padding-bottom:.4rem}
.flip__back .bk::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* staggered ENTRANCE flip (cards flip in from edge when scrolled into view) */
.flipgrid.vin .flip .flip__in{animation:flipIn 1s var(--vfx-spring) backwards}
.flipgrid.vin .flip:nth-child(1) .flip__in{animation-delay:.05s}
.flipgrid.vin .flip:nth-child(2) .flip__in{animation-delay:.18s}
.flipgrid.vin .flip:nth-child(3) .flip__in{animation-delay:.31s}
.flipgrid.vin .flip:nth-child(4) .flip__in{animation-delay:.44s}
@keyframes flipIn{from{transform:perspective(1400px) rotateY(-90deg);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .flip::before,.flip__front::before,.cfade__card::after,.cfade__av{animation:none}
  .flipgrid.vin .flip .flip__in{animation:none}
  .cfade__txt .w{opacity:1 !important;transform:none !important;filter:none !important}
}

/* ===========================================================
   ===========  ALL-PAGES VFX LAYER  =========================
   Interior-page hero (phero) cinematic + auto-enhanced cards
   =========================================================== */

/* ---------- 22. PHERO cinematic (interior page heroes) ---------- */
.phero--vfx{isolation:isolate}
.phero__aurora{position:absolute;inset:-30%;z-index:0;pointer-events:none;opacity:.6;
  background:
    radial-gradient(38% 44% at 22% 30%, rgba(90,125,82,.6), transparent 60%),
    radial-gradient(34% 40% at 82% 22%, rgba(201,168,106,.34), transparent 60%),
    radial-gradient(40% 46% at 62% 86%, rgba(181,82,78,.30), transparent 60%),
    radial-gradient(36% 42% at 28% 78%, rgba(168,197,160,.4), transparent 60%);
  filter:blur(40px) saturate(1.1);animation:auroraDrift 18s ease-in-out infinite alternate}
.phero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(168,197,160,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,197,160,.12) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 80% at 40% 50%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 40% 50%,#000 30%,transparent 80%);
  animation:gridpan 20s linear infinite}
.phero__shafts{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.phero__shafts span{position:absolute;top:-40%;width:30vw;height:180%;
  background:linear-gradient(100deg,transparent,rgba(227,206,158,.12) 48%,rgba(227,206,158,.22) 50%,rgba(227,206,158,.12) 52%,transparent);
  transform:rotate(14deg);filter:blur(6px);animation:shaft 10s ease-in-out infinite}
.phero__shafts span:nth-child(2){left:50%;animation-delay:-5s;opacity:.6}
.phero__orbs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.phero__orbs i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(227,206,158,.9),rgba(201,168,106,.1));
  opacity:0;animation:floaty linear infinite}
.phero__frame{position:absolute;inset:16px;z-index:2;pointer-events:none;border-radius:12px;
  border:1px solid rgba(227,206,158,.2);box-shadow:inset 0 0 50px -18px rgba(201,168,106,.4);
  opacity:0;animation:fadeFrame 1.2s 1s ease forwards}
.phero__frame::before,.phero__frame::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--gold-soft);opacity:.6}
.phero__frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.phero__frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 12px 0}
.phero__hud{position:absolute;top:26px;right:30px;z-index:3;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.2em;color:rgba(227,206,158,.65);pointer-events:none;
  opacity:0;animation:fadeFrame 1s 1.2s ease forwards}
.phero__hud::first-letter{color:var(--sage)}
/* phero content lift-in */
.phero--vfx .container{position:relative;z-index:3}
.phero--vfx .breadcrumb,.phero--vfx h1,.phero--vfx .lead{opacity:0;transform:translateY(24px)}
.phero--vfx.lit .breadcrumb{animation:heroUp .8s .2s var(--vfx-ease) forwards}
.phero--vfx.lit h1{animation:heroUp .9s .34s var(--vfx-ease) forwards}
.phero--vfx.lit .lead{animation:heroUp .9s .5s var(--vfx-ease) forwards}
.phero--vfx h1{background:linear-gradient(110deg,var(--cream),var(--gold-soft) 60%,var(--sage));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phero--vfx .decode .ch{-webkit-text-fill-color:initial}

/* ---------- 23. CARD 3D depth (auto-applied everywhere) ---------- */
.card3d{position:relative;transform-style:preserve-3d;
  transition:transform .35s var(--vfx-ease),box-shadow .35s ease}
.card3d.act{box-shadow:var(--glow-sage)}
.card3d h3,.card3d > p,.card3d .card__icon,.card3d .card__list,.card3d .card__num{
  transition:transform .35s var(--vfx-ease)}
.card3d.act .card__icon{transform:translateZ(40px)}
.card3d.act .card__num{transform:translateZ(30px)}
.card3d.act h3{transform:translateZ(26px)}
.card3d.act > p{transform:translateZ(16px)}
.card3d.act .card__list{transform:translateZ(10px)}
/* animated gradient hairline that appears on hover */
.card3d::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(130deg,var(--sage-deep),var(--gold),var(--red-soft),var(--sage));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;animation:gradShift2 5s ease infinite}
.card3d:hover::before{opacity:.8}
@keyframes gradShift2{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---------- 24. ACCORDION 3D (faq / how-it-works) ---------- */
.acc3d{transition:transform .4s var(--vfx-ease),box-shadow .4s ease,border-color .4s ease}
.acc3d:hover{transform:translateX(6px);box-shadow:var(--shadow-sm);border-color:rgba(201,168,106,.4)}
.acc3d.open{box-shadow:var(--glow-sage)}
.acc3d .acc__icon{transition:transform .4s var(--vfx-spring)}
.acc3d.open .acc__icon{transform:rotate(180deg) scale(1.1)}

/* ---------- 25. fxhead subtle 3D float ---------- */
.fxhead{perspective:1000px}

/* reduce on mobile */
@media (max-width:760px){
  .card3d.act{transform:none !important}
  .phero__orbs{opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  .phero__aurora,.phero__grid,.phero__shafts,.phero__orbs,.card3d::before{animation:none}
  .phero--vfx .breadcrumb,.phero--vfx h1,.phero--vfx .lead{opacity:1 !important;transform:none !important}
}

/* ===========================================================
   ===========  RICH SECTION COMPONENTS v3  ==================
   Reusable gorgeous sections deployed across all pages
   =========================================================== */

/* ---------- 26. FEATURE SHOWCASE (alternating 3D rows) ---------- */
.showrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.showrow:last-child{margin-bottom:0}
.showrow.rev .showrow__visual{order:2}
.showrow__visual{position:relative;perspective:1400px}
.showrow__card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(160deg,var(--sage-ink),var(--ink));
  transform:rotateY(8deg) rotateX(4deg);transform-style:preserve-3d;
  transition:transform .6s var(--vfx-ease),box-shadow .6s ease;box-shadow:var(--shadow);
  border:1px solid rgba(227,206,158,.2)}
.showrow.rev .showrow__card{transform:rotateY(-8deg) rotateX(4deg)}
.showrow__visual:hover .showrow__card{transform:rotateY(0) rotateX(0) scale(1.02);box-shadow:var(--glow-sage)}
.showrow__card .num{position:absolute;top:1.2rem;left:1.4rem;font-family:var(--display);
  font-size:3.4rem;line-height:1;color:rgba(227,206,158,.5);z-index:2}
.showrow__card .ic{position:absolute;inset:0;display:grid;place-items:center;color:rgba(168,197,160,.4);z-index:1}
.showrow__card .ic svg{width:64px;height:64px;stroke:currentColor;fill:none;stroke-width:1.2}
.showrow__card .tag{position:absolute;bottom:1.2rem;left:1.4rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.2em;color:var(--gold-soft);z-index:2;text-transform:uppercase}
/* animated mesh inside */
.showrow__card::before{content:"";position:absolute;inset:0;opacity:.5;z-index:0;
  background:radial-gradient(50% 60% at 20% 20%,rgba(90,125,82,.5),transparent 60%),
    radial-gradient(40% 50% at 85% 80%,rgba(201,168,106,.3),transparent 60%);
  animation:meshFloat 10s ease-in-out infinite}
.showrow__card::after{content:"";position:absolute;top:0;left:-50%;width:40%;height:100%;z-index:3;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-18deg);animation:cardSheen 6s ease-in-out infinite}
.showrow__body .mini-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
.showrow__body .mini-eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-deep)}
.showrow__body h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.8rem;line-height:1.3}
.showrow__body p{color:var(--ink-2);margin-bottom:1rem}
.showrow__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.showrow__chips span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  padding:.4rem .8rem;border-radius:8px;background:var(--cream-2);border:1px solid var(--line);
  color:var(--sage-ink);transition:all .3s ease}
.showrow__chips span:hover{background:var(--sage-deep);color:var(--cream);transform:translateY(-2px)}
@media (max-width:820px){.showrow{grid-template-columns:1fr}.showrow.rev .showrow__visual{order:0}}

/* ---------- 27. ICON FEATURE STRIP (hover-lift mini cards) ---------- */
.iconstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem}
.iconchip{position:relative;padding:1.6rem 1.3rem;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--cream-3),var(--cream-2));border:1px solid var(--line);
  overflow:hidden;transition:transform .4s var(--vfx-spring),box-shadow .4s ease;text-align:center}
.iconchip:hover{transform:translateY(-8px);box-shadow:var(--glow-sage)}
.iconchip__ic{width:54px;height:54px;margin:0 auto .9rem;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--sage),var(--sage-deep));color:var(--cream);
  transition:transform .5s var(--vfx-spring)}
.iconchip:hover .iconchip__ic{transform:rotate(-8deg) scale(1.1)}
.iconchip__ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
.iconchip h4{font-size:1.02rem;margin-bottom:.4rem}
.iconchip p{font-size:.84rem;color:var(--ink-2)}
.iconchip::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--sage-deep),var(--gold),var(--red-soft));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--vfx-ease)}
.iconchip:hover::after{transform:scaleX(1)}

/* ---------- 28. TIMELINE 3D (vertical animated) ---------- */
.timeline{position:relative;max-width:780px;margin:0 auto;padding-left:2.4rem}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--sage-deep),var(--gold),var(--red-soft));
  transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--vfx-ease)}
.timeline.vin::before{transform:scaleY(1)}
.tl-item{position:relative;padding:0 0 2.2rem 0;opacity:0;transform:translateX(30px);
  transition:opacity .6s var(--vfx-ease),transform .6s var(--vfx-ease)}
.timeline.vin .tl-item{opacity:1;transform:none}
.timeline.vin .tl-item:nth-child(1){transition-delay:.2s}
.timeline.vin .tl-item:nth-child(2){transition-delay:.4s}
.timeline.vin .tl-item:nth-child(3){transition-delay:.6s}
.timeline.vin .tl-item:nth-child(4){transition-delay:.8s}
.timeline.vin .tl-item:nth-child(5){transition-delay:1s}
.tl-item::before{content:"";position:absolute;left:calc(-2.4rem + 1px);top:4px;width:16px;height:16px;
  border-radius:50%;background:var(--cream);border:3px solid var(--sage-deep);
  box-shadow:0 0 0 4px var(--cream-3);z-index:1}
.tl-item:hover::before{border-color:var(--gold-deep);box-shadow:0 0 0 4px var(--cream-3),0 0 16px 2px rgba(201,168,106,.5)}
.tl-item .yr{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--gold-deep)}
.tl-item h4{font-size:1.15rem;margin:.3rem 0 .4rem}
.tl-item p{font-size:.92rem;color:var(--ink-2)}

/* ---------- 29. STAT TILES (animated gradient bg) ---------- */
.stattiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem}
.stattile{position:relative;padding:1.8rem 1.4rem;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(160deg,var(--sage-ink),var(--ink));color:var(--cream);
  border:1px solid rgba(227,206,158,.2);transition:transform .4s var(--vfx-ease)}
.stattile:hover{transform:translateY(-6px) scale(1.02)}
.stattile::before{content:"";position:absolute;inset:0;opacity:.4;
  background:conic-gradient(from var(--ang,0deg) at 70% 20%,rgba(90,125,82,.6),transparent 40%);
  animation:angSpin 8s linear infinite}
.stattile b{position:relative;display:block;font-family:var(--display);font-size:2.4rem;line-height:1;
  background:linear-gradient(120deg,var(--cream),var(--gold-soft));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;z-index:1}
.stattile span{position:relative;font-size:.86rem;color:rgba(245,242,233,.7);z-index:1;display:block;margin-top:.4rem}

/* ---------- 30. PROCESS CHEVRON (horizontal flow) ---------- */
.flowsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.flowstep{position:relative;padding:1.6rem 1.3rem;border-radius:var(--radius);
  background:var(--cream-3);border:1px solid var(--line);overflow:hidden;
  transition:transform .4s var(--vfx-ease),box-shadow .4s ease}
.flowstep:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.flowstep .fs-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--gold-deep)}
.flowstep h4{font-size:1.05rem;margin:.6rem 0 .4rem}
.flowstep p{font-size:.84rem;color:var(--ink-2)}
.flowstep::after{content:"";position:absolute;right:-12px;top:50%;width:24px;height:24px;
  border-top:2px solid var(--sage);border-right:2px solid var(--sage);transform:translateY(-50%) rotate(45deg);opacity:.4;z-index:2}
.flowstep:last-child::after{display:none}
@media (max-width:760px){.flowstep::after{display:none}}

/* ---------- 31. PULL QUOTE (big gradient) ---------- */
.pullquote{position:relative;text-align:center;max-width:820px;margin:0 auto;padding:2rem}
.pullquote p{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);
  line-height:1.5;background:linear-gradient(110deg,var(--sage-ink),var(--gold-deep) 70%,var(--sage-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pullquote::before{content:"❝";font-family:var(--display);font-size:5rem;color:rgba(201,168,106,.25);
  display:block;line-height:.6;margin-bottom:.5rem}

/* ---------- 32. CONTACT METHOD CARDS ---------- */
.methodgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem}
.method{position:relative;padding:1.8rem 1.5rem;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(160deg,var(--cream-3),var(--cream-2));border:1px solid var(--line);
  transition:transform .4s var(--vfx-spring),box-shadow .4s ease;text-align:center}
.method:hover{transform:translateY(-8px) rotateZ(-1deg);box-shadow:var(--glow-sage)}
.method__ic{width:60px;height:60px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--sage),var(--sage-deep));color:var(--cream);
  transition:transform .5s var(--vfx-spring)}
.method:hover .method__ic{transform:scale(1.12) rotate(8deg)}
.method__ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.6}
.method h4{font-size:1.05rem;margin-bottom:.3rem}
.method p{font-size:.92rem;color:var(--ink-2)}
.method a{color:var(--sage-deep);font-weight:600;text-decoration:none}

@media (prefers-reduced-motion:reduce){
  .showrow__card,.showrow__card::before,.showrow__card::after,.stattile::before,.iconchip{animation:none}
  .timeline::before,.tl-item{transition:none;opacity:1 !important;transform:none !important}
}

/* ===========================================================
   ===========  LUXURY PALETTE v4 + PAYMENT  =================
   Richer red-green gradients & emerald/burgundy luxury accents
   =========================================================== */
:root{
  --emerald:    #2F6B4F;   /* deep luxurious green */
  --emerald-lt: #4E9E74;
  --burgundy:   #8E3B38;   /* deep luxurious red */
  --rose-lux:   #C56B66;
  --gold:       #C9A86A;
  --gold-soft:  #E3CE9E;
  --gold-deep:  #A07E3E;
  /* signature red-green luxury gradient (used widely) */
  --grad-rg: linear-gradient(120deg, var(--emerald) 0%, var(--sage-deep) 30%, var(--gold-deep) 50%, var(--rose-lux) 72%, var(--burgundy) 100%);
  --grad-rg-soft: linear-gradient(120deg, rgba(47,107,79,.9), rgba(90,125,82,.7) 35%, rgba(201,168,106,.5) 55%, rgba(197,107,102,.8) 80%, rgba(142,59,56,.9));
}

/* Upgrade key gradients toward red-green luxury */
.flip::before{background:conic-gradient(from var(--ang,0deg),
  var(--emerald),var(--sage),var(--gold),var(--rose-lux),var(--burgundy),var(--emerald)) !important}
.card3d::before{background:var(--grad-rg) !important;background-size:300% 300% !important}
.iconchip::after{background:var(--grad-rg) !important}
.timeline::before{background:linear-gradient(180deg,var(--emerald),var(--gold),var(--burgundy)) !important}
.cta-band .aurora{background:conic-gradient(from 90deg at 50% 50%,
  var(--emerald),var(--burgundy),var(--emerald-lt),var(--rose-lux),var(--emerald)) !important}
.pullquote p{background:linear-gradient(110deg,var(--emerald),var(--gold-deep) 50%,var(--burgundy)) !important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.showrow__card::before{background:
  radial-gradient(50% 60% at 20% 20%,rgba(47,107,79,.6),transparent 60%),
  radial-gradient(40% 50% at 85% 80%,rgba(142,59,56,.45),transparent 60%) !important}
.iconchip__ic,.method__ic{background:var(--grad-rg) !important;background-size:200% 200% !important;animation:gradShift2 6s ease infinite}
.hero h1 .accent{background:linear-gradient(95deg,var(--emerald-lt),var(--gold),var(--rose-lux)) !important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- 33. PAYMENT SECTION ---------- */
.pay-wrap{margin-top:2.6rem}
.pay-intro{max-width:760px;margin:0 auto 2.4rem;text-align:center}
.pay-intro p{color:var(--ink-2)}
/* method logos grid */
.paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.1rem;margin-bottom:2.4rem}
.paycard{position:relative;padding:1.5rem 1.1rem;border-radius:16px;overflow:hidden;text-align:center;
  background:linear-gradient(160deg,var(--cream-3),var(--cream-2));border:1px solid var(--line);
  transition:transform .4s var(--vfx-spring),box-shadow .4s ease}
.paycard:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow)}
.paycard::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-rg);background-size:200% 100%;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--vfx-ease);animation:gradShift2 4s ease infinite}
.paycard:hover::after{transform:scaleX(1)}
.paylogo{width:56px;height:56px;margin:0 auto .7rem;border-radius:14px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.5rem;color:#fff;position:relative;overflow:hidden}
.paylogo span{position:relative;z-index:1}
.paycard h4{font-size:.98rem;margin-bottom:.2rem}
.paycard small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase}
/* brand colors for each wallet */
.pl-bkash{background:linear-gradient(145deg,#E2136E,#b30f58)}
.pl-nagad{background:linear-gradient(145deg,#EE7C25,#E72E4B)}
.pl-rocket{background:linear-gradient(145deg,#8C3A93,#6a2b70)}
.pl-upay{background:linear-gradient(145deg,#E62E5C,#b3244a)}
.pl-mcash{background:linear-gradient(145deg,#00874D,#006139)}
.pl-tap{background:linear-gradient(145deg,#F26B21,#d4551a)}
.pl-wu{background:linear-gradient(145deg,#FFDD00,#FFB800);color:#1a1a1a !important}
.pl-cell{background:linear-gradient(145deg,#1B98E0,#1577b3)}

/* policy cards (red-green luxury) */
.paypolicy{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1rem}
.polcard{position:relative;padding:1.8rem 1.5rem;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(160deg,var(--sage-ink),var(--ink));color:var(--cream);
  border:1px solid rgba(227,206,158,.2);transition:transform .4s var(--vfx-ease),box-shadow .4s ease}
.polcard:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(201,168,106,.3),var(--shadow)}
.polcard::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:radial-gradient(60% 80% at 85% 0%,rgba(47,107,79,.7),transparent 55%),
            radial-gradient(50% 70% at 5% 100%,rgba(142,59,56,.6),transparent 55%)}
.polcard__ic{position:relative;width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:var(--grad-rg);background-size:200% 200%;animation:gradShift2 5s ease infinite;
  color:#fff;margin-bottom:1rem;z-index:1}
.polcard__ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7}
.polcard h4{position:relative;font-size:1.12rem;margin-bottom:.5rem;z-index:1}
.polcard p{position:relative;font-size:.92rem;color:rgba(245,242,233,.82);z-index:1}
.polcard .badge{position:relative;display:inline-block;margin-top:.8rem;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;border-radius:6px;
  background:rgba(201,168,106,.18);color:var(--gold-soft);border:1px solid rgba(201,168,106,.3);z-index:1}

/* installment highlight band */
.installment{position:relative;margin-top:1.4rem;padding:2rem;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,rgba(47,107,79,.12),rgba(142,59,56,.12));
  border:1px solid var(--line)}
.installment::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-rg)}
.installment h4{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;margin-bottom:.6rem;color:var(--sage-ink)}
.installment p{color:var(--ink-2);font-size:.95rem}
.installment .ops{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.installment .ops span{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;padding:.4rem .8rem;
  border-radius:8px;background:var(--cream-3);border:1px solid var(--line);color:var(--burgundy)}

/* ===========================================================
   ===========  GRADIENT-TEXT CLIP FIX v5  ===================
   Fix gradient-clipped text breaking into solid color blocks
   when split into .ch (decode) or .w (fade) spans.
   =========================================================== */
/* When a gradient-clipped element is split into spans, each span
   must re-apply the clip so the gradient shows through the glyphs.
   CRITICAL: the PARENT must lose its background block, else it paints
   a solid rectangle behind the transparent spans. */
.hero h1 .accent.decode,
.hero h1 .accent.glitch{
  background:none !important;
  -webkit-text-fill-color:transparent;
}
.hero h1 .accent .ch{
  background:linear-gradient(95deg,var(--emerald-lt),var(--gold),var(--rose-lux));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* glitch pseudo-layers must stay solid (not transparent) */
.hero h1 .accent.glitch::before,
.hero h1 .accent.glitch::after{-webkit-text-fill-color:initial;color:var(--rose-lux)}
.hero h1 .accent.glitch::after{color:var(--emerald-lt)}

/* pullquote: ensure clip works on inline-block, not full-width block */
.pullquote p{display:inline-block !important;width:auto !important}

/* Safety net: if background-clip:text is unsupported, show solid luxury color
   instead of a transparent/blocky fill */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .accent,.hero h1 .accent .ch,.pullquote p,
  .phero--vfx h1,.stattile b,.cfade__txt{
    -webkit-text-fill-color:currentColor !important;color:var(--sage-deep) !important;
    background:none !important}
}

/* ===========================================================
   ===========  HERO LUXURY REDESIGN v6  =====================
   Cinematic, premium, magazine-grade hero
   =========================================================== */

/* deeper, richer base with layered depth */
.hero{position:relative;min-height:100vh;display:flex;align-items:center}
.hero__bg::after{
  background:
    linear-gradient(180deg, rgba(18,22,18,.55), rgba(15,18,15,.82) 60%, rgba(20,24,20,.92)),
    radial-gradient(130% 100% at 80% -10%, rgba(47,107,79,.55), transparent 55%),
    radial-gradient(90% 80% at 8% 115%, rgba(142,59,56,.32), transparent 60%),
    radial-gradient(70% 60% at 50% 50%, rgba(201,168,106,.10), transparent 70%) !important;
}

/* layered animated gradient mesh — luxurious living backdrop */
.hero__mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__mesh i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:screen}
.hero__mesh i:nth-child(1){width:50vw;height:50vw;left:-10%;top:-15%;
  background:radial-gradient(circle,rgba(47,107,79,.7),transparent 65%);animation:meshA 16s ease-in-out infinite}
.hero__mesh i:nth-child(2){width:42vw;height:42vw;right:-8%;top:5%;
  background:radial-gradient(circle,rgba(201,168,106,.5),transparent 65%);animation:meshB 19s ease-in-out infinite}
.hero__mesh i:nth-child(3){width:46vw;height:46vw;left:25%;bottom:-20%;
  background:radial-gradient(circle,rgba(142,59,56,.55),transparent 65%);animation:meshC 22s ease-in-out infinite}
@keyframes meshA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,6%) scale(1.15)}}
@keyframes meshB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,8%) scale(1.2)}}
@keyframes meshC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-7%) scale(1.1)}}

/* concentric luxury rings (replaces plain radar look) */
.hero__rings{position:absolute;right:-8%;top:50%;translate:0 -50%;width:62vw;height:62vw;
  max-width:900px;max-height:900px;z-index:0;pointer-events:none;opacity:.6}
.hero__rings::before,.hero__rings::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(201,168,106,.18)}
.hero__rings::after{inset:14%;border-color:rgba(168,197,160,.16)}
.hero__rings span{position:absolute;inset:28%;border-radius:50%;border:1px solid rgba(197,107,102,.16)}
.hero__rings span::before{content:"";position:absolute;inset:18%;border-radius:50%;border:1px dashed rgba(201,168,106,.2)}
/* rotating gold sweep within rings */
.hero__rings em{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(201,168,106,.28),transparent 22%);
  animation:spin 9s linear infinite;mix-blend-mode:screen}

/* premium tag — gold gradient border + shimmer */
.hero__tag{position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(245,242,233,.12),rgba(245,242,233,.04));
  border:1px solid transparent;
  background-clip:padding-box;}
.hero__tag::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,var(--emerald-lt),var(--gold),var(--rose-lux));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.hero__tag .dot{background:var(--gold-soft) !important;
  box-shadow:0 0 0 0 var(--gold);animation:pulseDot 2s ease-out infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(201,168,106,.6)}70%{box-shadow:0 0 0 8px rgba(201,168,106,0)}100%{box-shadow:0 0 0 0 rgba(201,168,106,0)}}

/* refined headline — bigger, more dramatic */
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.08;letter-spacing:-.01em;
  text-shadow:0 4px 40px rgba(0,0,0,.4);margin:1.4rem 0 1.6rem}
.hero h1 .ch{text-shadow:0 2px 30px rgba(201,168,106,.4)}

/* lead with subtle backdrop for legibility */
.hero__lead{font-size:clamp(1rem,1.5vw,1.18rem);max-width:600px;line-height:1.85;
  color:rgba(245,242,233,.9)}

/* premium buttons — gradient + glow */
.hero .btn--red{position:relative;overflow:hidden;border:none;
  background:linear-gradient(120deg,var(--burgundy),var(--rose-lux)) !important;
  box-shadow:0 12px 36px -12px rgba(142,59,56,.7), inset 0 1px 0 rgba(255,255,255,.2)}
.hero .btn--red::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:cardSheen 4.5s ease-in-out infinite}
.hero .btn--ghost{border:1px solid rgba(227,206,158,.35);color:var(--cream);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(245,242,233,.04)}
.hero .btn--ghost:hover{border-color:var(--gold-soft);background:rgba(201,168,106,.12)}

/* stat numbers — luxury gold gradient + thin divider lines between */
.hero__stats{position:relative;padding-top:1.6rem}
.hero__stat{position:relative}
.hero__stat:not(:last-child)::before{content:"";position:absolute;right:-.5rem;top:15%;bottom:15%;
  width:1px;background:linear-gradient(180deg,transparent,rgba(227,206,158,.3),transparent)}
.hero__stat b{font-size:clamp(1.8rem,3vw,2.6rem);
  background:linear-gradient(120deg,var(--cream),var(--gold-soft) 70%,var(--gold)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important}

/* scroll cue refined */
.scroll-cue{z-index:3}
.scroll-cue span:first-child{color:rgba(227,206,158,.7);font-family:var(--mono);font-size:.6rem;letter-spacing:.2em}
.scroll-cue .line{background:linear-gradient(180deg,var(--gold-soft),transparent)}

@media (prefers-reduced-motion:reduce){
  .hero__mesh i,.hero__rings em,.hero .btn--red::before,.hero__tag .dot{animation:none}
}

/* ===========================================================
   ===========  GRADIENT-CLIP HARD FIX v7  ===================
   background:...!important shorthand resets background-clip to
   border-box, breaking gradient text into solid blocks.
   Force clip:text !important on every gradient-text element.
   =========================================================== */
.hero h1 .accent,
.hero h1 .accent .ch,
.hero__stat b,
.pullquote p,
.phero--vfx h1,
.stattile b,
.cfade__who b{
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
/* pullquote keep transparent fill reliably */
.pullquote p{-webkit-text-fill-color:transparent !important}
/* but if the element was split into spans, parent shows no bg block */
.decode[ data-dec], .glitch.decode{background:none !important}