
:root{--bg:#FAFAF7;--bg-alt:#F2F2EF;--bg-card:#fff;--text:#1A1A2E;--ts:#44445A;--border:#E2E2DC;--bm:#C8C8C0;--indigo:#5533CC;--magenta:#E8329E;--blue:#2A9FD6;--green:#3DB85A;--coral:#F55A28;--gold:#F5A623;--id:rgba(85,51,204,.09);--md:rgba(232,50,158,.09);--bd:rgba(42,159,214,.09);--gd:rgba(61,184,90,.09);--cd:rgba(245,90,40,.09);--god:rgba(245,166,35,.11);--ig:rgba(85,51,204,.18);--mg:rgba(232,50,158,.18);--bg2:rgba(42,159,214,.18);--gg:rgba(61,184,90,.18);--cg:rgba(245,90,40,.18);--wa:#25D366;--wag:rgba(37,211,102,.28);--ease:cubic-bezier(0.16,1,0.3,1);--eback:cubic-bezier(0.34,1.56,0.64,1);--f:'Plus Jakarta Sans',sans-serif;--mw:1100px}
[data-theme=dark]{--bg:#0D0B14;--bg-alt:#111020;--bg-card:#1A1830;--text:#F2EFE9;--ts:#C0BCDA;--border:#2A2840;--bm:#6A66A8;--indigo:#8866FF;--magenta:#FF55BB;--blue:#50CEFF;--green:#50E080;--coral:#FF7040;--gold:#FFBF40;--id:rgba(136,102,255,.18);--md:rgba(255,85,187,.18);--bd:rgba(80,206,255,.18);--gd:rgba(80,224,128,.18);--cd:rgba(255,112,64,.18);--god:rgba(255,191,64,.16);--ig:rgba(136,102,255,.32);--mg:rgba(255,85,187,.32);--bg2:rgba(80,206,255,.32);--gg:rgba(80,224,128,.32);--cg:rgba(255,112,64,.32)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s,color .35s}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(85,51,204,.04) 1.5px,transparent 1.5px);background-size:18px 18px}
[data-theme=dark] body::before{background-image:radial-gradient(circle,rgba(119,85,255,.08) 1.5px,transparent 1.5px)}
img{display:block;max-width:100%}a{text-decoration:none;color:inherit}ul{list-style:none}[id]{scroll-margin-top:68px}::selection{background:var(--indigo);color:#fff}
@keyframes fA{0%{transform:translate(0,0)rotate(0deg)}25%{transform:translate(9px,-13px)rotate(45deg)}50%{transform:translate(-5px,-22px)rotate(90deg)}75%{transform:translate(-11px,-9px)rotate(135deg)}100%{transform:translate(0,0)rotate(180deg)}}
@keyframes fB{0%{transform:translate(0,0)rotate(0deg)}33%{transform:translate(-13px,9px)rotate(-60deg)}66%{transform:translate(11px,16px)rotate(60deg)}100%{transform:translate(0,0)rotate(0deg)}}
@keyframes fC{0%{transform:translate(0,0)rotate(0deg)}50%{transform:translate(7px,-9px)rotate(90deg)}100%{transform:translate(0,0)rotate(180deg)}}
@keyframes fD{0%{transform:translate(0,0)rotate(0deg)}40%{transform:translate(-8px,12px)rotate(-90deg)}80%{transform:translate(10px,6px)rotate(45deg)}100%{transform:translate(0,0)rotate(0deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes floatSticker{0%,100%{transform:rotate(-8deg)scale(1)translateY(0px)}50%{transform:rotate(-5deg)scale(1.04)translateY(-8px)}}
/* Hero corner/edge badges — one distinct animation per badge */
@keyframes hvbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hvbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes hvbSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes hvbDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes hvbTilt{0%,100%{transform:rotate(-3deg)translateX(0)}50%{transform:rotate(3deg)translateX(6px)}}
@keyframes hvbBounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-11px)}60%{transform:translateY(-4px)}}
@keyframes glowPulse{0%,100%{opacity:.3}50%{opacity:.55}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes waP{0%{box-shadow:0 0 0 0 var(--wag)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes navIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes mqee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dp{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
@keyframes formOk{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
.nav{position:fixed;inset:0 0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(250,250,247,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:.5px solid var(--border);z-index:100;animation:navIn .45s var(--ease) .05s both;transition:background .35s,border-color .3s}
[data-theme=dark] .nav{background:rgba(13,11,20,.96)}.nav.scrolled{border-bottom-color:rgba(85,51,204,.2)}
.nav-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:var(--text)}
.nav-mark{position:relative;width:28px;height:28px;flex-shrink:0;transition:transform .4s var(--eback)}
.nav-mark svg{display:block;width:100%;height:100%}
.nav-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.nav-logo:hover .nav-mark{transform:translateY(-1px) scale(1.07) rotate(-2deg)}
.nav-logo:hover .nav-mark::after{animation:navGloss .7s var(--ease) forwards}
.nav-logo:hover svg.drop-arr{color:var(--coral);opacity:1}
@keyframes navGloss{to{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){.nav-mark{transition:none}.nav-logo:hover .nav-mark{transform:none}.nav-logo:hover .nav-mark::after{animation:none}}
.nav-links{display:none;gap:20px}
@media(min-width:900px){.nav-links{display:flex}}
.nav-links a{font-size:13px;font-weight:600;color:var(--ts);transition:color .2s}.nav-links a:hover{color:var(--text)}
/* ===== nav pixel FX ===== */
#pxTrail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.nav-logo{position:relative;z-index:2}
.nav-links{position:relative;z-index:1}
.nav-r{position:relative;z-index:1}
.nav:hover .nav-mark{animation:pixShimmer 3.4s ease-in-out infinite}
@keyframes pixShimmer{0%,100%{filter:saturate(1) brightness(1)}50%{filter:saturate(1.18) brightness(1.06)}}
.nav-liquid{position:absolute;bottom:-6px;left:var(--ix,0);width:var(--iw,0);height:3px;border-radius:3px;background:linear-gradient(90deg,var(--coral),var(--magenta));transition:left .5s var(--eback),width .5s var(--eback),transform .28s var(--ease),opacity .3s;transform-origin:center;opacity:0;pointer-events:none;will-change:left,width,transform}
.nav-links.ready .nav-liquid{opacity:1}
.nav-links.moving .nav-liquid{transform:scaleY(.45) scaleX(1.04)}
@media(prefers-reduced-motion:reduce){#pxTrail{display:none}}
/* ===== v97 nav refinements ===== */
.nav-wm{font-weight:700}
.nav-px{background:linear-gradient(90deg,var(--coral),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-phone{align-items:center;gap:6px}
@media(min-width:640px){.nav-phone{display:inline-flex}}
.nav-phone .ph-ic{width:14px;height:14px;flex-shrink:0;transition:transform .4s var(--eback),color .2s}
.nav-phone:hover{color:var(--text)}
.nav-phone:hover .ph-ic{color:var(--coral);transform:rotate(-18deg) scale(1.12)}
.dd-wa-cta .dd-ar{display:inline-block;transition:transform .25s var(--eback)}
.dd-wa-cta:hover .dd-ar{transform:translateX(4px)}
@keyframes ddRiseV97{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav-dropdown.open>*{animation:ddRiseV97 .3s var(--ease) backwards}
.nav-dropdown.open>*:nth-child(1){animation-delay:.02s}
.nav-dropdown.open>*:nth-child(2){animation-delay:.05s}
.nav-dropdown.open>*:nth-child(3){animation-delay:.08s}
.nav-dropdown.open>*:nth-child(4){animation-delay:.11s}
.nav-dropdown.open>*:nth-child(5){animation-delay:.14s}
.nav-dropdown.open>*:nth-child(6){animation-delay:.17s}
.nav-dropdown.open>*:nth-child(7){animation-delay:.20s}
.nav-dropdown.open>*:nth-child(8){animation-delay:.23s}
.nav-dropdown.open>*:nth-child(9){animation-delay:.26s}
.nav-dropdown.open>*:nth-child(10){animation-delay:.29s}
.nav-r{display:flex;align-items:center;gap:10px}
.nav-phone{font-size:13px;font-weight:600;color:var(--ts);display:none}
@media(min-width:640px){.nav-phone{display:block}}
.btn-th{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:border-color .2s,background .2s}
.nav-acct{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.nav-acct:hover{border-color:var(--indigo);background:var(--id)}
.nav-acct svg{width:17px;height:17px;stroke:var(--text)}
.btn-th:hover{background:var(--bg-alt)}
.btn-wa-n{display:flex;align-items:center;gap:7px;background:var(--wa);color:#fff;font-family:var(--f);font-size:13px;font-weight:700;padding:9px 16px;border-radius:6px;border:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s var(--ease)}
.btn-wa-n::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .5s var(--ease)}
.btn-wa-n:hover{transform:scale(1.03)}.btn-wa-n:hover::after{left:160%}
/* ── HERO BASE ── */
.hero{
  min-height:100svh;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:100px 20px 72px;
  position:relative;overflow:hidden;
  background:var(--bg)
}
.hero-layout{
  display:grid;grid-template-columns:1fr;
  gap:40px;position:relative;z-index:2;
  max-width:var(--mw);margin:0 auto;width:100%;
  align-items:center
}
.hero-layout>*{min-width:0}
@media(min-width:900px){
  .hero-layout{grid-template-columns:1.08fr .92fr;gap:68px}
}

/* ── BACKGROUND BLOBS & ACCENTS (kept from v87) ── */
.hbgl{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;animation:breathe var(--bd,5s) ease-in-out infinite var(--bdelay,0s)}
.b1{width:550px;height:550px;top:-150px;right:-130px;background:radial-gradient(circle,rgba(85,51,204,.07) 0%,transparent 65%);--bd:6s}
.b2{width:420px;height:420px;bottom:-100px;left:-90px;background:radial-gradient(circle,rgba(245,90,40,.06) 0%,transparent 65%);--bd:7s;--bdelay:1.8s}
.b3{width:320px;height:320px;top:42%;left:44%;background:radial-gradient(circle,rgba(245,166,35,.05) 0%,transparent 65%);--bd:5s;--bdelay:.9s}
[data-theme=dark] .b1{background:radial-gradient(circle,rgba(119,85,255,.1) 0%,transparent 65%)}
[data-theme=dark] .b2{background:radial-gradient(circle,rgba(255,107,53,.09) 0%,transparent 65%)}
[data-theme=dark] .b3{background:radial-gradient(circle,rgba(245,182,58,.06) 0%,transparent 65%)}
.tri{position:absolute;width:0;height:0;pointer-events:none;will-change:transform}
.t1{border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid rgba(85,51,204,.14);top:15%;left:10%;animation:fA 52s ease-in-out infinite}
.t2{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid rgba(232,50,158,.13);top:65%;left:80%;animation:fB 46s ease-in-out infinite 3s}
.t3{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid rgba(245,90,40,.12);top:78%;left:15%;animation:fC 58s ease-in-out infinite 1s}
.t4{border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:6px solid rgba(245,166,35,.16);top:30%;right:25%;animation:fD 44s ease-in-out infinite 4s}
.t5{border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid rgba(61,184,90,.13);top:50%;left:35%;animation:fA 62s ease-in-out infinite 6s}
[data-theme=dark] .t1{border-bottom-color:rgba(119,85,255,.25)}[data-theme=dark] .t2{border-bottom-color:rgba(255,68,176,.22)}[data-theme=dark] .t3{border-bottom-color:rgba(255,107,53,.2)}[data-theme=dark] .t4{border-bottom-color:rgba(245,182,58,.28)}[data-theme=dark] .t5{border-bottom-color:rgba(68,212,112,.22)}
.px{position:absolute;border-radius:2px;pointer-events:none;will-change:transform}
.p1{width:5px;height:5px;background:var(--indigo);opacity:.2;top:20%;left:8%;animation:fA 50s ease-in-out infinite}
.p2{width:4px;height:4px;background:var(--magenta);opacity:.18;top:58%;left:84%;animation:fB 42s ease-in-out infinite 2.5s}
.p3{width:6px;height:6px;background:var(--coral);opacity:.17;top:74%;left:14%;animation:fC 36s ease-in-out infinite .8s}
.p4{width:3px;height:3px;background:var(--gold);opacity:.28;top:32%;right:16%;animation:fD 48s ease-in-out infinite 5s}
.p5{width:5px;height:5px;background:var(--green);opacity:.18;top:82%;right:30%;animation:fB 54s ease-in-out infinite 1.5s}
.p6{width:4px;height:4px;background:var(--blue);opacity:.2;top:14%;left:58%;animation:fA 40s ease-in-out infinite 3.5s}
[data-theme=dark] .px{box-shadow:0 0 4px currentColor;opacity:.5}
.reg{position:absolute;font-size:22px;font-weight:200;pointer-events:none;color:rgba(85,51,204,.07)}
.r1{top:14%;left:2%}.r2{bottom:12%;right:2%;color:rgba(245,90,40,.07)}
.hero-accent{position:absolute;pointer-events:none}
.ha1{top:18%;left:6%;opacity:.07;animation:fA 70s ease-in-out infinite}
.ha2{bottom:25%;right:8%;opacity:.06;animation:fB 80s ease-in-out infinite 4s}
[data-theme=dark] .ha1{opacity:.14}[data-theme=dark] .ha2{opacity:.12}

/* ── EYEBROW ── */
.hey{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ts);
  margin-bottom:20px;
  opacity:0;animation:fadeUp .5s var(--ease) .1s forwards
}
.eydot{width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),var(--coral))}

/* ── HEADLINE ── */
.hh{
  font-size:clamp(52px,7.5vw,92px);
  font-weight:800;line-height:.95;
  letter-spacing:-.04em;margin-bottom:26px
}
.hl{display:block;opacity:0;animation:fadeUp .6s var(--ease) forwards}
.hl:nth-child(1){animation-delay:.2s}
.hl:nth-child(2){animation-delay:.34s}
.hl:nth-child(3){animation-delay:.48s}
.hw{color:var(--bm);transition:color .45s var(--ease)}
.hw.ci{color:var(--indigo)}.hw.cm{color:var(--magenta)}.hw.cc{color:var(--coral)}

/* ── SUBHEADLINE ── */
.hsub{
  font-size:clamp(15px,1.7vw,18px);
  font-weight:500;color:var(--ts);
  line-height:1.65;max-width:430px;
  margin-bottom:20px;
  opacity:0;animation:fadeUp .5s var(--ease) .62s forwards
}

/* ── PRICE ANCHOR (now a colored-dot accent list — v2) ── */
.h-price-row{
  display:flex;flex-direction:column;gap:7px;
  background:var(--bg-alt);border-radius:18px;padding:10px;
  margin-bottom:24px;
  opacity:0;animation:fadeUp .5s var(--ease) .72s forwards
}
.h-prow{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  background:var(--bg-card);border-radius:12px;
  padding:11px 16px;
  cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s,box-shadow .25s
}
.h-prow:hover{transform:translateX(5px)scale(1.015);box-shadow:0 6px 20px rgba(0,0,0,.07);background:var(--rcbg,var(--bg-alt))}
/* Pulsing colored dot — reuses the same "dp" pulse already used on the
   trust-strip dots, staggered per row so they pulse out of sync (drive/energy) */
.h-prow-dot{width:9px;height:9px;border-radius:50%;background:var(--rc,var(--indigo));flex-shrink:0;animation:dp 2.6s ease-in-out infinite}
.h-prow:nth-child(1) .h-prow-dot{animation-delay:0s}
.h-prow:nth-child(2) .h-prow-dot{animation-delay:.35s}
.h-prow:nth-child(3) .h-prow-dot{animation-delay:.7s}
.h-prow:nth-child(4) .h-prow-dot{animation-delay:1.05s}
.h-prow-lbl{font-size:13.5px;font-weight:800;color:var(--text);flex-shrink:0;letter-spacing:-.01em}
.h-prow-sub{font-size:12px;color:var(--ts);font-weight:500}
@media(max-width:420px){
  .h-prow{padding:9px 13px}
  .h-prow-lbl{font-size:12.5px}
  .h-prow-sub{font-size:11px}
}

/* ── RATING BADGE ── */
.hrat{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(245,166,35,.08);
  border:.5px solid rgba(245,166,35,.22);
  border-radius:8px;padding:7px 12px;
  margin-bottom:26px;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s;
  opacity:0;animation:fadeUp .5s var(--ease) .8s forwards;
  white-space:nowrap
}
.hrat:hover{transform:scale(1.02);box-shadow:0 4px 16px rgba(245,166,35,.15)}
.hrat-divider{width:1px;height:14px;background:rgba(245,166,35,.25);flex-shrink:0}
.stars{display:flex;gap:1.5px;align-items:center}
.star{width:14px;height:14px;position:relative;flex-shrink:0}
.sbg{color:#D8D4CC;font-size:14px;line-height:1}
.sfg{position:absolute;top:0;left:0;color:var(--gold);font-size:14px;line-height:1;clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease)}
.star.lit .sfg{clip-path:inset(0 0% 0 0)}
/* Hero rating stars use an SVG glyph instead of the ★ text character —
   the Unicode star falls back to different fonts per-OS/browser and can
   render visibly larger/misaligned than its neighbors. SVG is pixel-consistent. */
#hStars .sbg,#hStars .sfg{font-size:0;display:flex;align-items:center}
#hStars .sbg svg,#hStars .sfg svg{width:14px;height:14px;display:block;fill:currentColor}
.rtxt{font-size:12px;font-weight:700;color:#7A5800;letter-spacing:.01em}
[data-theme=dark] .rtxt{color:var(--gold)}

/* ── CTA GROUP ── */
.hact{
  display:flex;flex-wrap:wrap;gap:12px;
  opacity:0;animation:fadeUp .5s var(--ease) .94s forwards
}

/* PRIMARY CTA */
.btn-primary-hero{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--coral);color:#fff;
  font-family:var(--f);font-size:15px;font-weight:700;
  padding:16px 30px;border-radius:8px;border:none;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s;
  text-decoration:none;letter-spacing:-.01em
}
.btn-primary-hero::after{
  content:'';position:absolute;top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .55s var(--ease)
}
.btn-primary-hero:hover{transform:scale(1.03)translateY(-2px);box-shadow:0 12px 40px var(--ig)}
.btn-primary-hero:hover::after{left:150%}
.btn-primary-hero .arrow-icon{transition:transform .2s var(--ease)}
.btn-primary-hero:hover .arrow-icon{transform:translateX(3px)}

/* SECONDARY CTA — WhatsApp */
.btn-wah{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--wa);color:#fff;
  font-family:var(--f);font-size:15px;font-weight:700;
  padding:15px 22px;border-radius:7px;border:none;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s;
  animation:waP 2.2s ease 2.2s 1
}
.btn-wah::after{
  content:'';position:absolute;top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .55s var(--ease)
}
.btn-wah:hover{transform:scale(1.03)translateY(-2px);box-shadow:0 8px 28px var(--wag)}
.btn-wah:hover::after{left:150%}

/* ── TRUST STRIP (condensed to 3 items) ── */
.tstr{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;
  opacity:0;animation:fadeUp .5s var(--ease) 1.08s forwards
}
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.trust-div{width:1px;height:12px;background:var(--border);flex-shrink:0}
[data-theme=dark] .trust-div{background:var(--border)}
.tsi{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ts)}
[data-theme=dark] .tsi{color:var(--ts)}
.tdot{width:7px;height:7px;border-radius:50%;animation:dp 3s ease-in-out infinite}
.tdi{background:var(--indigo)}.tdg{background:var(--green);animation-delay:.7s}.tdc{background:var(--coral);animation-delay:1.4s}.tdgo{background:var(--gold);animation-delay:2.1s}

/* ── MOBILE IMAGE STRIP ── */
.hero-img-mobile{
  display:flex;gap:10px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:2px;
  margin-top:32px
}
.hero-img-mobile::-webkit-scrollbar{display:none}
@media(min-width:900px){.hero-img-mobile{display:none}}
.him-item{
  flex-shrink:0;width:130px;height:90px;
  border-radius:11px;overflow:hidden;
  border:1px solid var(--border);
  transition:transform .25s var(--ease),box-shadow .25s
}
.him-item:hover{transform:scale(1.04);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.him-item img{width:100%;height:100%;object-fit:cover;display:block}

/* ── HERO VISUAL V2 (Photography) — desktop only ── */
.hero-visual{
  display:none;
  position:relative;
  height:520px;
  overflow:visible
}
@media(min-width:900px){.hero-visual{display:block}}

/* Glow behind photo */
.hv-glow{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(85,51,204,.1) 0%,transparent 65%);
  animation:glowPulse 4s ease-in-out infinite;
  pointer-events:none;z-index:0
}
[data-theme=dark] .hv-glow{background:radial-gradient(circle,rgba(119,85,255,.2) 0%,transparent 65%)}
.hv-ring{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:300px;height:300px;border-radius:50%;
  border:1px dashed rgba(85,51,204,.12);
  animation:breathe 8s ease-in-out infinite;
  pointer-events:none;z-index:0
}
[data-theme=dark] .hv-ring{border-color:rgba(136,102,255,.22)}

/* Photo frame */
.hvp-frame{
  position:absolute;
  top:14px;left:14px;right:0;bottom:14px;
  border-radius:20px;overflow:hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,.13),
    0 8px 24px rgba(0,0,0,.07),
    0 0 0 1px rgba(0,0,0,.04);
  z-index:1
}
[data-theme=dark] .hvp-frame{
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.07)
}
.hvp-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block
}
/* Subtle gradient overlay — preserves photo while adding depth */
.hvp-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,rgba(85,51,204,.06) 0%,transparent 45%),
    linear-gradient(to top,rgba(0,0,0,.3) 0%,transparent 38%);
  pointer-events:none
}

/* ── HERO PHOTO BADGES — "flagship + cascade" hierarchy.
   NFC dominates up top; the rest shrink in size/weight along a
   top-right → bottom-left diagonal, like items sliding off a stack.
   Desktop (≥900px) only — mobile stays untouched (hero-visual is
   still display:none below 900px, unchanged). ── */
.hvb-anchor{position:absolute;z-index:4;cursor:pointer;transition:transform .25s var(--ease)}
.hvb-anchor:hover{--hs:1.06}
/* Magnets/Business Cards/Flyers get a stronger hover scale than the rest */
.hvb-a4:hover,.hvb-a5:hover,.hvb-a6:hover{--hs:1.1}

/* Cascade positions, top-right → bottom-left diagonal.
   scale(var(--hs,1)) is appended so the click/hover feedback below can
   scale the badge without disturbing its finalized position — it's a
   no-op (scale(1)) at rest. */
.hvb-a1{top:-10px;right:0;transform:translate(26%,-46%) scale(var(--hs,1))}         /* NFC — flagship, top of the arc */
.hvb-a2{top:95px;right:0;transform:translate(36%,0) scale(var(--hs,1))}            /* Stickers — hangs out the FURTHEST, the belly of the semicircle */
.hvb-a3{top:215px;right:0;transform:translate(9%,4%) scale(var(--hs,1))}           /* DTF — pulls back in, closing the arc */
.hvb-a4{bottom:95px;left:15px;transform:translate(-36%,10%) scale(var(--hs,1))}     /* Magnets — clustered near the bottom-left corner, more breathing room */
.hvb-a5{bottom:52px;left:80px;transform:translate(-24%,14%) scale(var(--hs,1))}     /* Business Cards — same cluster, spaced further from Magnets & Flyers */
.hvb-a6{bottom:14px;left:14px;transform:translate(-40%,40%) scale(var(--hs,1))}     /* Flyers — anchors the cluster at the bottom-left corner */

.hvb{
  display:flex;align-items:center;gap:9px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:9px 13px;
  box-shadow:0 8px 28px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.05);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s
}
.hvb:hover{box-shadow:0 12px 36px rgba(0,0,0,.18)}
[data-theme=dark] .hvb{
  background:rgba(26,24,48,.95);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 8px 28px rgba(0,0,0,.5)
}
.hvb-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--ib);color:var(--ic)}
.hvb-ic svg{width:16px;height:16px}
.hvb-lbl{font-size:12px;font-weight:700;color:var(--text);line-height:1.25;margin-bottom:1px}
.hvb-sub{font-size:10px;color:var(--ts);font-weight:500;line-height:1.25}

/* Tier 1 — NFC: the flagship. Largest, bordered (only badge with a border), strongest shadow */
.hvb-flagship{
  padding:14px 18px;gap:12px;border-radius:16px;
  border:1.5px solid rgba(85,51,204,.35);
  box-shadow:0 14px 36px rgba(0,0,0,.24),0 4px 12px rgba(0,0,0,.08)
}
[data-theme=dark] .hvb-flagship{border-color:rgba(136,102,255,.4)}
.hvb-flagship .hvb-ic{width:36px;height:36px;border-radius:11px}
.hvb-flagship .hvb-ic svg{width:18px;height:18px}
.hvb-flagship .hvb-lbl{font-size:14px}
.hvb-flagship .hvb-sub{font-size:11px}

/* Tier 2 — Stickers: clearly secondary, still a "real" badge (label + subtitle) */
.hvb-secondary{padding:9px 12px;gap:8px}
.hvb-secondary .hvb-ic{width:24px;height:24px;border-radius:8px}
.hvb-secondary .hvb-ic svg{width:12px;height:12px}
.hvb-secondary .hvb-lbl{font-size:11.5px}
.hvb-secondary .hvb-sub{font-size:9.5px}

/* Tier 3 — DTF: compact, icon + label + a short "what it's for" subtitle */
.hvb-mini{padding:7px 10px;gap:7px}
.hvb-mini .hvb-ic{width:20px;height:20px;border-radius:7px}
.hvb-mini .hvb-ic svg{width:11px;height:11px}
.hvb-mini .hvb-lbl{font-size:10.5px;margin-bottom:1px}
.hvb-mini .hvb-sub{font-size:8.5px;color:var(--ts);font-weight:500;line-height:1.2}

/* Tier 4 — Magnets, Business Cards, Flyers: icon + short label only, no subtitle.
   Sized up a third time per feedback, with more room between anchors (above)
   so the bigger boxes no longer crowd each other on hover.
   Slight per-badge size variation so the trio doesn't look mechanically identical. */
.hvb-micro{padding:8.5px 12px;gap:8px;border-radius:13px}
.hvb-micro .hvb-ic{width:22px;height:22px;border-radius:7.5px}
.hvb-micro .hvb-ic svg{width:12px;height:12px}
.hvb-micro .hvb-lbl{font-size:11.5px;margin-bottom:0}

/* Magnets & Business Cards — plain minimal chips: bare icon, no background box at all */
.hvb-micro.hvb-magnets .hvb-ic,
.hvb-micro.hvb-bizcards .hvb-ic{
  background:none;width:20px;height:20px;border-radius:0
}
.hvb-micro.hvb-magnets .hvb-ic svg,
.hvb-micro.hvb-bizcards .hvb-ic svg{width:19px;height:19px}
.hvb-micro.hvb-bizcards{padding:8px 11px}

.hvb-micro.hvb-flyers{padding:8px 11px}
.hvb-micro.hvb-flyers .hvb-ic{width:22px;height:22px}

/* Hover glow — every badge gets its own accent-color glow now (NFC/Stickers/DTF
   included), layered on top of the base .hvb:hover shadow. Scale-on-hover for
   Magnets/Business Cards/Flyers is handled separately by .hvb-a4/a5/a6:hover above. */
.hvb-nfc:hover{box-shadow:0 10px 30px rgba(85,51,204,.35),0 3px 10px rgba(0,0,0,.1)}
.hvb-stickers:hover{box-shadow:0 10px 30px rgba(232,50,158,.35),0 3px 10px rgba(0,0,0,.1)}
.hvb-dtf:hover{box-shadow:0 10px 30px rgba(245,90,40,.35),0 3px 10px rgba(0,0,0,.1)}
[data-theme=dark] .hvb-nfc:hover{box-shadow:0 10px 30px rgba(136,102,255,.4),0 3px 10px rgba(0,0,0,.3)}
[data-theme=dark] .hvb-stickers:hover{box-shadow:0 10px 30px rgba(255,85,187,.4),0 3px 10px rgba(0,0,0,.3)}
[data-theme=dark] .hvb-dtf:hover{box-shadow:0 10px 30px rgba(255,112,64,.4),0 3px 10px rgba(0,0,0,.3)}
.hvb-magnets:hover{box-shadow:0 10px 30px rgba(245,166,35,.4),0 3px 10px rgba(0,0,0,.1)}
.hvb-bizcards:hover{box-shadow:0 10px 30px rgba(61,184,90,.4),0 3px 10px rgba(0,0,0,.1)}
.hvb-flyers:hover{box-shadow:0 10px 30px rgba(42,159,214,.4),0 3px 10px rgba(0,0,0,.1)}
[data-theme=dark] .hvb-magnets:hover{box-shadow:0 10px 30px rgba(255,191,64,.45),0 3px 10px rgba(0,0,0,.3)}
[data-theme=dark] .hvb-bizcards:hover{box-shadow:0 10px 30px rgba(80,224,128,.45),0 3px 10px rgba(0,0,0,.3)}
[data-theme=dark] .hvb-flyers:hover{box-shadow:0 10px 30px rgba(80,206,255,.45),0 3px 10px rgba(0,0,0,.3)}

/* One distinct, slow, low-amplitude animation per badge — unchanged */
.hvb-nfc{animation:hvbFloat 3.6s ease-in-out infinite}
.hvb-stickers{animation:hvbPulse 3.2s ease-in-out infinite .3s}
.hvb-dtf{animation:hvbSway 4s ease-in-out infinite .6s}
.hvb-magnets{animation:hvbDrift 3.8s ease-in-out infinite .9s}
.hvb-bizcards{animation:hvbTilt 4.2s ease-in-out infinite 1.2s}
.hvb-flyers{animation:hvbBounce 2.6s ease-in-out infinite 1.5s}

/* Tighten sizing in the narrower 900–1100px desktop range so nothing crowds */
@media(max-width:1100px){
  .hvb-flagship{padding:11px 14px;gap:10px}
  .hvb-flagship .hvb-ic{width:30px;height:30px}
  .hvb-flagship .hvb-ic svg{width:15px;height:15px}
  .hvb-flagship .hvb-lbl{font-size:12.5px}
  .hvb-flagship .hvb-sub{font-size:10px}
  .hvb-secondary{padding:7px 10px}
  .hvb-secondary .hvb-ic{width:21px;height:21px}
  .hvb-secondary .hvb-ic svg{width:11px;height:11px}
  .hvb-secondary .hvb-lbl{font-size:10.5px}
  .hvb-secondary .hvb-sub{font-size:8.5px}
  .hvb-mini{padding:6px 8px}
  .hvb-mini .hvb-ic{width:18px;height:18px}
  .hvb-mini .hvb-lbl{font-size:9.5px}
  .hvb-micro{padding:5px 7px}
  .hvb-micro .hvb-ic{width:16px;height:16px}
  .hvb-micro .hvb-lbl{font-size:9px}
}

/* ── SCROLL INDICATOR ── */
.scind{
  position:absolute;bottom:26px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:5px;opacity:.4;transition:opacity .4s;z-index:2
}
.sarr{font-size:20px;color:var(--ts);animation:bounce 1.8s ease-in-out infinite}
.slbl{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ts)}
.tbar{background:var(--bg-alt);border-top:.5px solid var(--border);border-bottom:.5px solid var(--border);padding:14px 20px}
.tbari{max-width:var(--mw);margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center}
.tbitem{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ts)}
.ticker{background:var(--text);overflow:hidden;white-space:nowrap;padding:10px 0}
[data-theme=dark] .ticker{background:#0A0820}
.ttrack{display:inline-flex;animation:mqee 32s linear infinite}.ttrack:hover{animation-play-state:paused}
.titem{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 30px}
.tdiv{color:var(--ts);font-size:8px;opacity:.5}

/* Row 1 — social-only strip, icons stretched wide + playful hover */
.tbar-social{display:inline-flex;align-items:center;gap:18px}
.tbar-social-txt{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.tbar-soc{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:var(--bg-card);border:1.5px solid var(--border);color:var(--ts);transition:transform .3s var(--eback),border-color .25s,color .25s,background-color .25s,box-shadow .25s}
.tbar-soc:hover{transform:translateY(-4px) scale(1.14) rotate(-6deg);box-shadow:0 10px 26px rgba(0,0,0,.16)}
[data-theme=dark] .tbar-soc:hover{box-shadow:0 10px 26px rgba(0,0,0,.45)}
.tbar-soc svg{width:20px;height:20px;display:block}
.tbar-soc.insta:hover{background:var(--md);border-color:var(--magenta);color:var(--magenta)}
.tbar-soc.fb:hover{background:rgba(24,119,242,.14);border-color:#1877F2;color:#1877F2}
.tbar-soc.tiktok:hover{background:var(--bg-alt);border-color:var(--text);color:var(--text)}
.tbar-soc.yt:hover{background:rgba(255,0,0,.12);border-color:#FF0000;color:#FF0000}
.tbar-soc.pin:hover{background:rgba(230,0,35,.12);border-color:#E60023;color:#E60023}
@media(max-width:640px){.tbar-soc{width:36px;height:36px}.tbar-soc svg{width:17px;height:17px}.tbar-social-txt{font-size:13px}}
.sec{padding:76px 0;overflow:hidden}.seca{background:var(--bg-alt)}
.wrap{max-width:var(--mw);margin:0 auto;padding:0 20px}
.sey{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ts);margin-bottom:8px}
.sh{font-size:clamp(28px,4.5vw,46px);font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1.05;margin-bottom:14px}
.ssub{font-size:clamp(14px,1.6vw,16px);font-weight:500;color:var(--ts);line-height:1.7;max-width:520px}
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}.rv.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.idiv{width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--indigo),var(--magenta),var(--coral),var(--green),transparent);opacity:.16;display:block}
.catnav{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-bottom:28px}.catnav::-webkit-scrollbar{display:none}
.cpill{display:inline-flex;align-items:center;gap:5px;font-family:var(--f);font-size:13px;font-weight:600;padding:8px 16px;border-radius:24px;border:1.5px solid var(--bm);background:var(--bg-card);color:var(--ts);cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;transition:border-color .2s,color .2s,background .2s,transform .15s var(--ease);user-select:none}
.cpill::after{content:'';position:absolute;inset:0;background:var(--pc,var(--indigo));opacity:0;transition:opacity .2s;border-radius:22px}
.cpill span{position:relative;z-index:1}.cpill:hover{transform:scale(1.03);border-color:var(--pc,var(--indigo))}.cpill:hover::after{opacity:.08}
.cpill.active{border-color:var(--pc,var(--indigo));background:var(--pc,var(--indigo));color:#fff}.cpill.active::after{opacity:0}
.cpd{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;position:relative;z-index:1}
.fc{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;margin-bottom:16px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
@media(min-width:680px){.fc{flex-direction:row;min-height:200px}}
.fc:hover{transform:translateY(-4px);border-color:var(--indigo);box-shadow:0 16px 52px var(--ig)}
.fci{background:var(--id);display:flex;align-items:center;justify-content:center;padding:28px;min-height:140px;position:relative;flex-shrink:0;gap:16px}
@media(min-width:680px){.fci{width:240px;min-height:auto}}
.fci::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 40% 50%,rgba(85,51,204,.07) 0%,transparent 70%)}
.fci::after{content:'';position:absolute;inset:8px;border:1.5px dashed rgba(85,51,204,.2);border-radius:8px;pointer-events:none}
.nfc3d{width:105px;height:65px;background:linear-gradient(135deg,#1E1E3F,#2D2D60);border-radius:8px;border:1px solid rgba(85,51,204,.4);display:flex;align-items:flex-end;padding:9px;position:relative;transform:perspective(400px)rotateY(-8deg)rotateX(4deg);transition:transform .4s var(--ease),box-shadow .4s;box-shadow:4px 4px 16px rgba(85,51,204,.25)}
.fc:hover .nfc3d{transform:perspective(400px)rotateY(-14deg)rotateX(6deg);box-shadow:8px 8px 28px rgba(85,51,204,.35)}
.nc{position:absolute;top:9px;right:9px;width:20px;height:14px;background:linear-gradient(135deg,#3A3A6A,#5555A0);border-radius:3px}
.nw{position:absolute;top:9px;left:9px;font-size:11px;color:rgba(85,51,204,.6);font-weight:700}
.nn{font-size:7px;font-weight:700;color:rgba(255,255,255,.65);letter-spacing:.06em}
.nph{width:42px;height:70px;background:#111;border-radius:8px;border:1.5px solid #333;display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease) .05s}
.fc:hover .nph{transform:translateX(5px)rotate(4deg)}
.ntp{font-size:7px;color:var(--indigo);font-weight:700;text-align:center;line-height:1.3;padding:4px}
.fcb{padding:24px 28px;display:flex;flex-direction:column;justify-content:center;flex:1}
.fbg{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);background:var(--id);padding:4px 10px;border-radius:4px;margin-bottom:12px;width:fit-content}
.fn{font-size:clamp(20px,2.5vw,26px);font-weight:800;color:var(--text);letter-spacing:-.025em;margin-bottom:8px}
.fd{font-size:14px;color:var(--ts);line-height:1.68;margin-bottom:14px;max-width:360px}
.fp{font-size:18px;font-weight:800;color:var(--gold);margin-bottom:16px}
.fft{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ffs{display:flex;flex-wrap:wrap;gap:8px}
.ff{font-size:11px;font-weight:600;color:var(--ts);display:flex;align-items:center;gap:4px}
.ff::before{content:"\2713";color:var(--green);font-weight:700}
.bc{display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;font-family:var(--f);font-size:14px;font-weight:700;padding:13px 22px;border-radius:7px;border:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.bc::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s var(--ease)}
.bc:hover{transform:scale(1.04)translateY(-1px);box-shadow:0 8px 24px var(--cg)}.bc:hover::after{left:150%}.bc svg{fill:#fff}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:620px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pcard{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;opacity:0;clip-path:inset(100% 0 0 0)}
.pcard.in{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .55s var(--ease),opacity .4s,transform .3s var(--ease),box-shadow .3s,border-color .3s}
.pcard:hover{transform:translateY(-5px)}
.pcard.ci:hover{border-color:var(--indigo);box-shadow:0 12px 36px var(--ig)}.pcard.cm:hover{border-color:var(--magenta);box-shadow:0 12px 36px var(--mg)}.pcard.cb:hover{border-color:var(--blue);box-shadow:0 12px 36px var(--bg2)}.pcard.cg:hover{border-color:var(--green);box-shadow:0 12px 36px var(--gg)}.pcard.cc:hover{border-color:var(--coral);box-shadow:0 12px 36px var(--cg)}.pcard.cgo:hover{border-color:var(--gold);box-shadow:0 12px 36px rgba(245,166,35,.2)}
/* Jump-highlight — brief glow pulse when a hero badge (Magnets/Flyers) scrolls this card into view */
@keyframes pcardJumpPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(85,51,204,0);border-color:var(--border)}
  30%,70%{box-shadow:0 0 0 5px rgba(85,51,204,.3),0 14px 40px rgba(85,51,204,.28);border-color:var(--indigo)}
}
.pcard-jump-highlight{animation:pcardJumpPulse 1.5s ease-in-out}
.pt{height:4px}.pcard.ci .pt{background:var(--indigo)}.pcard.cm .pt{background:var(--magenta)}.pcard.cb .pt{background:var(--blue)}.pcard.cg .pt{background:var(--green)}.pcard.cc .pt{background:var(--coral)}.pcard.cgo .pt{background:var(--gold)}
.pi{height:90px;display:flex;align-items:center;justify-content:center;position:relative}
.pcard.ci .pi{background:var(--id)}.pcard.cm .pi{background:var(--md)}.pcard.cb .pi{background:var(--bd)}.pcard.cg .pi{background:var(--gd)}.pcard.cc .pi{background:var(--cd)}.pcard.cgo .pi{background:var(--god)}
.pm{transition:transform .35s var(--eback)}.pcard:hover .pm{transform:scale(1.12)rotate(-5deg)}
.pbadge{position:absolute;top:7px;left:7px;font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:3px;text-transform:uppercase}
.pcard.cg .pbadge{background:var(--gd);color:var(--green)}.pcard.ci .pbadge{background:var(--id);color:var(--indigo)}
.pbdy{padding:14px}
.pn{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-.01em}
.pd2{font-size:11px;color:var(--ts);line-height:1.5;margin-bottom:6px}
.ppn{font-size:10px;color:var(--ts);opacity:.65;line-height:1.4;margin-bottom:8px;font-style:italic}
.pf{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.pp{font-size:12px;font-weight:800;color:var(--gold);white-space:nowrap}
.bpc{font-family:var(--f);font-size:11px;font-weight:700;padding:6px 12px;border-radius:5px;border:none;cursor:pointer;background:var(--coral);color:#fff;position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.bpc::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .45s var(--ease)}
.bpc:hover{transform:scale(1.07);box-shadow:0 4px 12px var(--cg)}.bpc:hover::after{left:150%}
.pm2{margin-top:14px;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;font-size:13px;font-weight:500;color:var(--ts);line-height:1.6}
.pm2 strong{color:var(--indigo);font-weight:700}.pm2 em{font-style:italic;font-size:12px;color:var(--bm);display:block;margin-top:5px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
@media(min-width:640px){.wgrid{grid-template-columns:repeat(3,1fr)}}
.wc{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px 18px;display:flex;flex-direction:column;gap:8px;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.wc::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,var(--wcd,rgba(85,51,204,.04)) 0%,transparent 65%);pointer-events:none}
.wc:hover{transform:translateY(-3px);border-color:var(--wcol,var(--indigo));box-shadow:0 8px 24px var(--wcg,var(--ig))}
.wi{font-size:26px;transition:transform .3s var(--eback)}.wc:hover .wi{transform:scale(1.12)rotate(-5deg)}
.wt{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em}.wd{font-size:12px;color:var(--ts);line-height:1.6}
.gsec{text-align:center;padding:60px 0;position:relative;overflow:hidden}
.hbg2{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(85,51,204,.04) 1.5px,transparent 1.5px);background-size:18px 18px;pointer-events:none}
[data-theme=dark] .hbg2{background-image:radial-gradient(circle,rgba(119,85,255,.08) 1.5px,transparent 1.5px)}
.gi2{position:relative;z-index:1}
.gl{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ts);margin-bottom:12px}
.gs{font-size:clamp(56px,10vw,88px);font-weight:800;color:var(--text);letter-spacing:-.04em;line-height:1}
.gstars{display:flex;gap:4px;justify-content:center;margin:8px 0 6px}.gstars .sfg{clip-path:inset(0 0 0 0)!important}
.gc{font-size:15px;font-weight:600;color:var(--ts);margin-bottom:20px}
.gcta{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);border:1px solid rgba(42,159,214,.35);border-radius:7px;padding:11px 22px;transition:background .2s}.gcta:hover{background:rgba(42,159,214,.07)}.gcta svg{width:16px;height:16px;fill:currentColor}
.nfci{display:flex;flex-direction:column;gap:44px}
@media(min-width:860px){.nfci{flex-direction:row;align-items:center;gap:64px}.nfcc{flex:1.1}.nfcv{flex:1}}
.ns{font-size:15px;color:var(--ts);line-height:1.8;margin-bottom:18px}
.nfl{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.nfe{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--ts)}
.nfe::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:7px}
.nsc2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
@media(max-width:480px){.nsc2{grid-template-columns:1fr}}
.nsc{background:var(--bd);border:1px solid rgba(42,159,214,.15);border-radius:7px;padding:12px}
.nsct{font-size:11px;font-weight:700;color:var(--ts);margin-bottom:4px;letter-spacing:.06em;text-transform:uppercase}
.nscb{font-size:12px;color:var(--ts);line-height:1.5}.nscb em{font-style:normal;color:var(--blue)}
.nfcp{font-size:17px;font-weight:800;color:var(--gold);margin-bottom:22px}
.nvw{background:var(--id);border-radius:16px;padding:36px;display:flex;align-items:center;justify-content:center;gap:24px;position:relative;overflow:hidden;min-height:200px}
.nvw::before{content:'';position:absolute;inset:8px;border:1.5px dashed rgba(85,51,204,.2);border-radius:12px;pointer-events:none}
.nvw::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 40% 50%,rgba(85,51,204,.06) 0%,transparent 65%)}
.nb2{width:130px;height:80px;background:linear-gradient(135deg,#1E1E3F,#2D2D60);border-radius:10px;border:1px solid rgba(85,51,204,.5);position:relative;padding:12px;display:flex;align-items:flex-end;box-shadow:0 12px 40px rgba(85,51,204,.3);z-index:1;transition:transform .4s var(--ease)}
.nvw:hover .nb2{transform:rotate(-5deg)translateY(-4px)}
.nbc{position:absolute;top:10px;right:10px;width:24px;height:17px;background:linear-gradient(135deg,#3A3A6A,#5555A0);border-radius:4px}
.nbw{position:absolute;top:10px;left:10px;font-size:13px;color:rgba(85,51,204,.7);font-weight:700}
.nbn{font-size:8px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.06em}
.npb{width:50px;height:88px;background:#111;border-radius:10px;border:2px solid #333;display:flex;align-items:center;justify-content:center;z-index:1;transition:transform .4s var(--ease) .06s}
.nvw:hover .npb{transform:rotate(5deg)translateX(5px)}.ntt{font-size:8px;color:var(--indigo);font-weight:700;text-align:center;line-height:1.4;padding:4px}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:32px}
@media(min-width:580px){.ggrid{gap:14px}}
.gi3{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg-alt);position:relative;border:1px solid var(--border);cursor:pointer}
.gi3::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gc,var(--indigo));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}.gi3:hover::after{transform:scaleX(1)}
.gi3 img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}.gi3:hover img{transform:scale(1.06)}
.gov{position:absolute;inset:0;background:rgba(26,26,46,.75);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:14px;opacity:0;transition:opacity .3s}.gi3:hover .gov{opacity:1}
.glb{font-size:11px;font-weight:700;color:#fff;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.gct{font-size:10px;font-weight:700;color:var(--gc,var(--indigo));letter-spacing:.06em;text-transform:uppercase}
.gph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-alt) 100%)}
.gpi{font-size:28px;opacity:.25}.gpl{font-size:9px;color:var(--ts);letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.gig{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--magenta);border-bottom:1px solid rgba(232,50,158,.3);padding-bottom:3px;transition:border-color .2s}.gig:hover{border-color:var(--magenta)}
.tgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:36px}
@media(min-width:620px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tc{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:22px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.tc::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.012) 3px,rgba(0,0,0,.012) 4px);pointer-events:none}
[data-theme=dark] .tc::before{background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.015) 3px,rgba(255,255,255,.015) 4px)}
.tcst{display:flex;gap:2px;margin-bottom:12px}.tcst .sfg{clip-path:inset(0 0 0 0)!important}
.tct{font-size:14px;color:var(--ts);line-height:1.75;flex:1;margin-bottom:16px;font-style:italic;position:relative;z-index:1}
.tca{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.tav{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}
.tn{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}.tm{font-size:11px;color:var(--ts)}
.pss{margin-top:40px}
.ps{display:flex;gap:20px;align-items:flex-start;padding:28px 0;border-bottom:.5px solid var(--border)}.ps:last-child{border-bottom:none}
.psn{font-size:clamp(60px,8vw,90px);font-weight:800;line-height:1;background:var(--pnc,var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.12;flex-shrink:0;min-width:90px;user-select:none}
.psh{font-size:22px;font-weight:800;color:var(--text);margin-bottom:7px;letter-spacing:-.02em}.pss2{font-size:14px;color:var(--ts);line-height:1.75}
.pcc{font-size:clamp(16px,2.5vw,22px);font-weight:700;color:var(--green);margin-top:28px}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
@media(min-width:900px){.bgrid{grid-template-columns:repeat(4,1fr)}}
.bcard{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.07);border-color:var(--bm)}
[data-theme=dark] .bcard:hover{box-shadow:0 10px 30px rgba(0,0,0,.3)}
.bcard-img{height:110px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;overflow:hidden}
.bcard-img::after{content:'Image coming soon';position:absolute;bottom:6px;right:8px;font-size:9px;font-weight:600;color:var(--ts);opacity:.45;letter-spacing:.05em;text-transform:uppercase}
.bcard-img.has-photo::after{display:none}
.bcard-img.has-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.bcard:hover .bcard-img.has-photo img{transform:scale(1.06)}
.bcard-body{padding:16px}.bcard-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.01em}
.bcard-desc{font-size:12px;color:var(--ts);line-height:1.6;margin-bottom:12px}
.bcard-cta{font-size:12px;font-weight:700;color:var(--indigo);display:inline-flex;align-items:center;gap:4px;transition:color .2s}.bcard-cta:hover{color:var(--coral)}.bcard-cta::after{content:'\2192'}
.form-inner{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:860px){.form-inner{grid-template-columns:1fr 1fr;align-items:start}}
.qform{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:28px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.frow2{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fl{font-size:13px;font-weight:600;color:var(--text)}.fl span{font-weight:400;color:var(--ts);font-size:12px}
.fi{font-family:var(--f);font-size:14px;padding:11px 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.fi:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--id)}.fi::placeholder{color:var(--ts);opacity:.6}
.fi-sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2344445A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.fi-ta{resize:vertical;min-height:80px}
.fi-file{padding:10px 14px;cursor:pointer}
.fi-file::file-selector-button{font-family:var(--f);font-size:12px;font-weight:600;background:var(--id);color:var(--indigo);border:none;border-radius:5px;padding:5px 10px;cursor:pointer;margin-right:10px;transition:background .2s}.fi-file::file-selector-button:hover{background:var(--ig)}
.file-note{font-size:11px;color:var(--ts);margin-top:4px;font-style:italic}
.btn-sub{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--coral);color:#fff;font-family:var(--f);font-size:15px;font-weight:700;padding:15px 28px;border-radius:8px;border:none;cursor:pointer;width:100%;position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s;margin-top:6px}
.btn-sub::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s var(--ease)}
.btn-sub:hover{transform:scale(1.02);box-shadow:0 8px 24px var(--cg)}.btn-sub:hover::after{left:150%}
.priv{font-size:11px;color:var(--ts);text-align:center;margin-top:10px;opacity:.7}
.form-ok{display:none;text-align:center;padding:32px 20px;animation:formOk .4s var(--ease)}.form-ok.show{display:block}
.ok-icon{font-size:48px;margin-bottom:12px}.ok-title{font-size:22px;font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:-.02em}.ok-sub{font-size:15px;color:var(--ts);line-height:1.7}
.form-main.hidden{display:none}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}
@media(min-width:640px){.sgrid{grid-template-columns:repeat(5,1fr)}}
.sc{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:18px 14px;text-align:center;transition:border-color .2s,transform .2s,box-shadow .2s;display:block}.sc:hover{transform:translateY(-3px)}
.sci{font-size:28px;margin-bottom:8px;transition:transform .3s var(--eback)}.sc:hover .sci{transform:scale(1.15)}
.scn{font-size:12px;font-weight:700;color:var(--text);letter-spacing:.05em;margin-bottom:3px;text-transform:uppercase}.sch{font-size:11px;color:var(--ts)}
.sig:hover{border-color:var(--magenta);box-shadow:0 6px 20px var(--mg)}.sig .sci{color:var(--magenta)}
.sfb:hover{border-color:#1877F2;box-shadow:0 6px 20px rgba(24,119,242,.2)}.sfb .sci{color:#1877F2}
.stt:hover{border-color:var(--text)}.stt .sci{color:var(--text)}
.syt:hover{border-color:#F00;box-shadow:0 6px 20px rgba(255,0,0,.2)}.syt .sci{color:#F00}
.spi:hover{border-color:#E60023;box-shadow:0 6px 20px rgba(230,0,35,.2)}.spi .sci{color:#E60023}
.flist{margin-top:36px}.fi2{border-bottom:.5px solid var(--border)}.fi2:first-child{border-top:.5px solid var(--border)}
.fq{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:16px;font-weight:600;color:var(--ts);cursor:pointer;user-select:none;transition:color .2s}.fq:hover{color:var(--text)}
.fic{font-size:24px;color:var(--coral);flex-shrink:0;font-weight:300;transition:transform .3s var(--ease);line-height:1}
.fi2.open .fq{color:var(--text)}.fi2.open .fic{transform:rotate(45deg)}
.fbw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}.fi2.open .fbw{grid-template-rows:1fr}
.fbi{overflow:hidden}.fan{font-size:14px;color:var(--ts);line-height:1.8;padding:0 0 20px;max-width:600px}
.csec{background:var(--text);padding:88px 20px;text-align:center;position:relative;overflow:hidden}
[data-theme=dark] .csec{background:#0A0820}
.csec .sh{color:#FAFAF7}.csec .ssub{color:rgba(250,250,247,.55);margin:0 auto 36px}.csec .sey{color:rgba(250,250,247,.4)}
.cst{display:flex;flex-direction:column;gap:10px;max-width:440px;margin:0 auto}
.csec .cb{display:flex;align-items:center;justify-content:center;gap:12px;padding:17px 22px;border-radius:8px;font-family:var(--f);font-size:15px;font-weight:700;letter-spacing:.04em;border:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s var(--ease)}
.csec .cb::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .5s var(--ease)}
.csec .cb:hover{transform:scale(1.02)}.csec .cb:hover::after{left:150%}
.cbwa{background:var(--wa);color:#fff}.cbwa svg{fill:#fff}
.cbfb{background:rgba(255,255,255,.09);color:rgba(250,250,247,.85);border:.5px solid rgba(255,255,255,.14)}.cbfb svg{fill:#1877F2}
.cbig{background:rgba(255,255,255,.07);color:rgba(250,250,247,.75);border:.5px solid rgba(255,255,255,.1)}.cbig svg{fill:var(--magenta)}
.cbma{background:rgba(255,255,255,.04);color:rgba(250,250,247,.45);border:.5px solid rgba(255,255,255,.07);font-size:14px}.cbma svg{fill:rgba(250,250,247,.4)}
.csub2{font-size:11px;opacity:.5;margin-left:4px;font-weight:500;letter-spacing:0;text-transform:none}
.cor-div{border-top:.5px solid rgba(255,255,255,.1);margin:14px 0}
.fln{font-size:13px;color:rgba(250,250,247,.45);margin-top:16px}.fln a{color:rgba(250,250,247,.7);font-weight:600;text-decoration:underline;text-decoration-color:rgba(250,250,247,.3);transition:color .2s}.fln a:hover{color:#fff}
footer{background:var(--bg-alt);border-top:.5px solid var(--border);padding:48px 20px 32px}
.fti{max-width:var(--mw);margin:0 auto}
.ftt{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:32px}
@media(min-width:620px){.ftt{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.ftt{grid-template-columns:2fr 1fr 1fr}}
.ftl{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:var(--text);margin-bottom:10px}
.fttag{font-size:13px;font-weight:500;color:var(--ts);line-height:1.65;max-width:260px;margin-bottom:6px}.ftfr{font-size:12px;color:var(--bm);font-style:italic}
.ftch{font-size:18px;font-weight:800;color:var(--text);margin-bottom:12px}
.ftin{display:flex;flex-direction:column;gap:8px}
.finfo{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:500;color:var(--ts);line-height:1.45}.finfo a{transition:color .2s}.finfo a:hover{color:var(--text)}
.ftlnk{display:flex;flex-direction:column;gap:8px}.ftlnk a{font-size:12px;font-weight:600;color:var(--ts);letter-spacing:.03em;text-transform:uppercase;transition:color .2s}.ftlnk a:hover{color:var(--text)}
.ftb{border-top:.5px solid var(--border);padding-top:18px;display:flex;flex-direction:column;gap:10px;align-items:center}
@media(min-width:620px){.ftb{flex-direction:row;justify-content:space-between}}
.ftcp{font-size:11px;color:var(--bm);letter-spacing:.04em}
.ftsc{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.ftsc a{font-size:11px;font-weight:700;color:var(--bm);transition:color .2s;letter-spacing:.04em;text-transform:uppercase}.ftsc a:hover{color:var(--text)}
/* waf removed */

/* ── POLISH: FLOATING BADGES ── */
@keyframes floatBadge{0%,100%{transform:translateY(0)rotate(var(--br,0deg))}50%{transform:translateY(-6px)rotate(var(--br,0deg))}}
.hv-badge{position:absolute;display:flex;align-items:center;gap:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:7px 12px;font-size:11px;font-weight:700;color:var(--text);box-shadow:0 3px 14px rgba(0,0,0,.07);white-space:nowrap;animation:floatBadge var(--bd,4.5s) ease-in-out infinite var(--bdelay,0s)}
[data-theme=dark] .hv-badge{background:var(--bg-card);box-shadow:0 3px 14px rgba(0,0,0,.3)}
.hv-badge .badge-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.hv-badge-ship{top:10%;left:-5px;--bd:4.5s;--bdelay:0.3s}
.hv-badge-pickup{bottom:180px;left:5px;--bd:5s;--bdelay:1.2s}
.hv-badge-rating{top:12%;right:170px;--bd:5.5s;--bdelay:2s}
.hv-badge-dtf{top:48%;right:172px;--bd:4s;--bdelay:.8s}

/* dropdown moved to premium section below */

/* ── POLISH: CAT NAV ALIGNMENT ── */
.catnav{align-items:center}
.cpill{height:38px;line-height:1;display:inline-flex;align-items:center}

/* ── POLISH: CONTACT CARDS GRID ── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:480px;margin:0 auto}
@media(min-width:520px){.contact-grid{grid-template-columns:repeat(4,1fr)}}
.ccard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.1);border-radius:10px;text-decoration:none;color:rgba(250,250,247,.8);font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.02em;transition:background .2s,transform .2s var(--ease);cursor:pointer}
.ccard:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.ccard svg{fill:currentColor}
.ccard.wa-card{color:#fff;background:var(--wa);border-color:transparent}
.ccard.wa-card:hover{background:#1fa853;transform:translateY(-2px)}
.ccard-lbl{font-size:11px;opacity:.8}
.contact-sub{font-size:13px;color:rgba(250,250,247,.4);margin-top:18px;text-align:center}
.contact-sub a{color:rgba(250,250,247,.6);font-weight:600;text-decoration:underline;text-decoration-color:rgba(250,250,247,.25);transition:color .2s}
.contact-sub a:hover{color:#fff}

/* ── POLISH: MERGED GOOGLE + REVIEWS ── */
.trust-merged{background:var(--bg-alt);border-top:.5px solid var(--border);border-bottom:.5px solid var(--border)}

/* ── TRUST STRIP ── */
.tstr{margin-top:22px;opacity:0;animation:fadeUp .5s var(--ease) 1.06s forwards}
.trust-strip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0;background:var(--bg-alt);border:.5px solid var(--border);border-radius:32px;padding:9px 18px;row-gap:8px}
.trust-strip .tsi{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ts);padding:0 10px}
.trust-strip .tsi:first-child{padding-left:0}
.trust-div{width:1px;height:14px;background:var(--border);flex-shrink:0}
@media(max-width:640px){.trust-strip{border-radius:20px;padding:8px 14px;gap:0}.trust-strip .tsi{padding:2px 8px;font-size:11px}}

/* ── CATEGORY PILLS — CLEAN & FIXED ── */
.catnav{display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-bottom:28px;align-items:center}
.catnav::-webkit-scrollbar{display:none}
.cpill{display:inline-flex;align-items:center;justify-content:center;gap:0;font-family:var(--f);font-size:13px;font-weight:600;padding:0 18px;height:36px;line-height:1;border-radius:24px;border:1.5px solid var(--bm);background:var(--bg-card);color:var(--ts);cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;transition:border-color .2s,color .2s,background .2s,transform .15s var(--ease);user-select:none}
.cpill::after{content:'';position:absolute;inset:0;background:var(--pc,var(--indigo));opacity:0;transition:opacity .2s;border-radius:22px}
.cpill span{position:relative;z-index:1;display:block}
.cpill:hover{transform:scale(1.03);border-color:var(--pc,var(--indigo))}
.cpill:hover::after{opacity:.08}
.cpill.active{border-color:var(--pc,var(--indigo));background:var(--pc,var(--indigo));color:#fff}
.cpill.active::after{opacity:0}
.cpd{display:none}/* hide dots entirely */

/* ── PREMIUM DROPDOWN ── */
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}
@keyframes ddGlow{0%,100%{box-shadow:0 0 0 0 var(--indigo)}50%{box-shadow:0 0 8px 0 rgba(85,51,204,.2)}}
.nav-dropdown{position:absolute;top:calc(100% + 10px);left:0;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:8px;min-width:210px;box-shadow:0 12px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);opacity:0;transform:translateY(-8px)scale(.97);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:200;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
[data-theme=dark] .nav-dropdown{box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.05)}
.nav-dropdown.open{opacity:1;transform:translateY(0)scale(1);pointer-events:all;animation:dropIn .28s var(--ease)}
.nav-dropdown::before{content:'';position:absolute;top:-5px;left:18px;width:10px;height:10px;background:var(--bg-card);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg);border-radius:1px}
.dd-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text);transition:background .18s,color .18s,transform .18s;cursor:pointer;position:relative;overflow:hidden}
.dd-item:hover{background:var(--id);color:var(--indigo);transform:translateX(2px)}
.dd-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:transform .2s var(--eback)}
.dd-item:hover .dd-dot{transform:scale(1.5)}
.dd-item:nth-child(1) .dd-dot{background:var(--coral)}
.dd-item:nth-child(2) .dd-dot{background:var(--gold)}
.dd-item:nth-child(3) .dd-dot{background:var(--magenta)}
.dd-item:nth-child(4) .dd-dot{background:var(--blue)}
.dd-item:nth-child(5) .dd-dot{background:var(--green)}
.dd-item:nth-child(6) .dd-dot{background:var(--indigo)}
.nav-logo svg.drop-arr{width:10px;height:10px;margin-left:3px;transition:transform .25s var(--ease);flex-shrink:0}
.nav-logo.open svg.drop-arr{transform:rotate(180deg)}

/* ── MICRO-ANIMATIONS ── */
@keyframes iconFloat{0%,100%{transform:translateY(0)rotate(0deg)}30%{transform:translateY(-4px)rotate(-3deg)}70%{transform:translateY(-2px)rotate(2deg)}}
@keyframes cardShine{0%{left:-60%}100%{left:160%}}
@keyframes softGlow{0%,100%{box-shadow:0 4px 18px rgba(85,51,204,.12)}50%{box-shadow:0 8px 32px rgba(85,51,204,.24)}}
@keyframes badgePop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes reviewSlide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmerBtn{0%{background-position:-200% center}100%{background-position:200% center}}

/* Product card — lift + subtle tilt on hover (enhanced) */
.fc{transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.fc:hover{transform:translateY(-6px)rotate(-.3deg);box-shadow:0 20px 60px var(--ig)}

/* Product grid cards — lift */
.pcard:hover{transform:translateY(-6px)rotate(.3deg)scale(1.01)}

/* Product icon — gentle tilt on hover */
.pm{transition:transform .35s var(--eback)}
.pcard:hover .pm{transform:scale(1.15)rotate(-6deg)}

/* Why cards — icon float on hover */
.wc .wi{display:inline-block;transition:transform .35s var(--eback)}
.wc:hover .wi{transform:translateY(-6px)scale(1.18)rotate(-6deg)}

/* Behind the print cards — icon bounce */
.bcard-img{transition:background .3s}
.bcard{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.bcard:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(0,0,0,.1);border-color:var(--indigo)}
[data-theme=dark] .bcard:hover{box-shadow:0 14px 40px rgba(0,0,0,.4)}
.bcard:hover .bcard-img{background:var(--id)!important}

/* Review cards — glow pulse on hover */
.tc{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.tc:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 12px 36px rgba(245,166,35,.12)}

/* Contact section cards — glow */
.ccard{transition:background .2s,transform .25s var(--ease),box-shadow .25s}
.ccard:hover{transform:translateY(-3px)scale(1.03);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.ccard.wa-card:hover{box-shadow:0 10px 28px var(--wag)}

/* Social grid cards */
.sc{transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.sc:hover .sci{transform:scale(1.18)rotate(-4deg)}
.sci{transition:transform .3s var(--eback)}

/* Gallery grid items — subtle scale */
.gi3{transition:transform .35s var(--ease),box-shadow .35s}
.gi3:hover{transform:scale(1.02);box-shadow:0 14px 40px rgba(0,0,0,.1)}

/* Form inputs — animated focus ring */
.fi:focus{border-color:var(--indigo);box-shadow:0 0 0 4px var(--id);transition:border-color .2s,box-shadow .2s}

/* NFC section card — interactive tilt */
.nb2{transition:transform .4s var(--ease),box-shadow .4s}
.nvw:hover .nb2{transform:perspective(500px)rotateY(-8deg)rotateX(4deg)translateY(-5px);box-shadow:0 20px 50px rgba(85,51,204,.35)}

/* "Most Popular" badge — moving gradient shimmer */
@keyframes gradShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.fbg{background-size:200% 200%;animation:gradShimmer 3s ease infinite}

/* Staggered scroll reveals for review + bcard items */
.tgrid .tc:nth-child(1){transition-delay:.04s}
.tgrid .tc:nth-child(2){transition-delay:.12s}
.tgrid .tc:nth-child(3){transition-delay:.2s}
.bgrid .bcard:nth-child(1){transition-delay:.04s}
.bgrid .bcard:nth-child(2){transition-delay:.12s}
.bgrid .bcard:nth-child(3){transition-delay:.2s}
.bgrid .bcard:nth-child(4){transition-delay:.28s}

/* Button shine — let's talk / CTA */
.bc::before,.btn-wah::before,.btn-sub::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:none}
.bc:hover,.btn-wah:hover,.btn-sub:hover{animation:none}

/* Process step numbers — subtle glow on scroll-in */
.psn{transition:opacity .5s var(--ease)}
.rv.in .psn{opacity:.18}

/* Mobile pill fix */
@media(max-width:540px){
  .cpill{font-size:12px;padding:0 14px;height:34px}
  .catnav{gap:5px}
}

/* ── POLISH: BLOG TEASER ── */
.blog-teaser{background:var(--bg-alt);padding:40px 20px;text-align:center}
.blog-teaser-inner{max-width:480px;margin:0 auto}
.blog-teaser-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);background:var(--id);padding:3px 10px;border-radius:4px;margin-bottom:12px}
.blog-teaser-title{font-size:clamp(18px,2.5vw,24px);font-weight:800;color:var(--text);letter-spacing:-.02em;margin-bottom:8px}
.blog-teaser-sub{font-size:14px;color:var(--ts);line-height:1.7;margin-bottom:20px}
.blog-teaser-btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--bm);background:transparent;color:var(--ts);font-family:var(--f);font-size:13px;font-weight:700;padding:10px 22px;border-radius:24px;cursor:default;letter-spacing:.04em}

/* ── DARK MODE CONTRAST AUDIT ── */
[data-theme=dark] .sey{color:var(--ts)}
[data-theme=dark] .ssub{color:var(--ts)}
[data-theme=dark] .hsub{color:var(--ts)}
[data-theme=dark] .hey{color:var(--ts)}
[data-theme=dark] .fd{color:var(--ts)}
[data-theme=dark] .ff{color:var(--ts)}
[data-theme=dark] .wd{color:var(--ts)}
[data-theme=dark] .pn{color:var(--text)}
[data-theme=dark] .pd2{color:var(--ts)}
[data-theme=dark] .ppn{color:var(--ts);opacity:.8}
[data-theme=dark] .fl{color:var(--text)}
[data-theme=dark] .fl span{color:var(--ts)}
[data-theme=dark] .fi{color:var(--text);background:rgba(255,255,255,.04);border-color:var(--border)}
[data-theme=dark] .fi::placeholder{color:var(--ts);opacity:.5}
[data-theme=dark] .file-note{color:var(--ts)}
[data-theme=dark] .priv{color:var(--ts);opacity:.75}
[data-theme=dark] .bcard-title{color:var(--text)}
[data-theme=dark] .bcard-desc{color:var(--ts)}
[data-theme=dark] .fan{color:var(--ts)}
[data-theme=dark] .fq{color:var(--ts)}
[data-theme=dark] .fi2.open .fq{color:var(--text)}
[data-theme=dark] .tct{color:var(--ts)}
[data-theme=dark] .tn{color:var(--text)}
[data-theme=dark] .tm{color:var(--ts)}
[data-theme=dark] .pss2{color:var(--ts)}
[data-theme=dark] .psh{color:var(--text)}
[data-theme=dark] .wt{color:var(--text)}
[data-theme=dark] .wt+.wd,.wd{color:var(--ts)}
[data-theme=dark] .gc{color:var(--ts)}
[data-theme=dark] .ns{color:var(--ts)}
[data-theme=dark] .nfe{color:var(--ts)}
[data-theme=dark] .nsct{color:var(--ts)}
[data-theme=dark] .nscb{color:var(--ts)}
[data-theme=dark] .pm2{color:var(--ts)}
[data-theme=dark] .pm2 strong{color:var(--indigo)}
[data-theme=dark] .tbitem{color:var(--ts)}
[data-theme=dark] .fttag{color:var(--ts)}
[data-theme=dark] .ftfr{color:var(--bm)}
[data-theme=dark] .finfo{color:var(--ts)}
[data-theme=dark] .tsi{color:var(--ts)}
[data-theme=dark] .trust-strip{border-color:var(--border)}
[data-theme=dark] .trust-div{background:var(--border)}
[data-theme=dark] .cpill{color:var(--ts)}
[data-theme=dark] .cpill:hover{color:var(--text)}
[data-theme=dark] .ok-sub{color:var(--ts)}
[data-theme=dark] .ok-title{color:var(--text)}

/* ── PREMIUM DROPDOWN V87 ── */
@keyframes dropInV87{from{opacity:0;transform:translateY(-8px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}
.nav-logo{position:relative;cursor:pointer;user-select:none}
.nav-logo svg.drop-arr{width:10px;height:10px;margin-left:3px;transition:transform .25s var(--ease);flex-shrink:0;opacity:.6}
.nav-logo.open svg.drop-arr{transform:rotate(180deg);opacity:1}
.nav-dropdown{position:absolute;top:calc(100% + 12px);left:0;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:6px;min-width:228px;box-shadow:0 16px 48px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.06);opacity:0;transform:translateY(-8px)scale(.96);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:200;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-theme=dark] .nav-dropdown{background:rgba(26,24,48,.97);box-shadow:0 16px 48px rgba(0,0,0,.55),0 0 0 .5px rgba(255,255,255,.06)}
.nav-dropdown.open{opacity:1;transform:translateY(0)scale(1);pointer-events:all;animation:dropInV87 .24s var(--ease)}
.nav-dropdown::before{content:'';position:absolute;top:-5px;left:20px;width:10px;height:10px;background:var(--bg-card);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
[data-theme=dark] .nav-dropdown::before{background:rgba(26,24,48,.97)}
.dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;position:relative;transition:background .16s,transform .16s;text-decoration:none}
.dd-item:hover{background:var(--id);transform:translateX(2px)}
.dd-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s var(--eback)}
.dd-item:hover .dd-icon{transform:scale(1.1)}
.dd-text{display:flex;flex-direction:column;gap:1px}
.dd-label{font-size:13px;font-weight:700;color:var(--text);line-height:1.3}
.dd-desc{font-size:11px;color:var(--ts);line-height:1.3}
.dd-item:hover .dd-label{color:var(--indigo)}
.nav-dropdown hr{margin:5px 6px;border:none;border-top:.5px solid var(--border)}
.dd-dot{display:none}

/* ── FLOATING CONTACT HUB ── */
@keyframes hubPop{from{opacity:0;transform:translateY(10px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}
.chub-btn{position:fixed;bottom:22px;right:20px;z-index:150;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),var(--magenta));color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 22px rgba(85,51,204,.4);transition:transform .25s var(--ease),box-shadow .25s}
.chub-btn:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(85,51,204,.55)}
.chub-btn svg{width:22px;height:22px;fill:#fff;transition:transform .25s var(--ease)}
.chub-btn.open svg{transform:rotate(45deg)}
.chub-panel{position:fixed;bottom:80px;right:20px;z-index:149;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:10px;width:204px;box-shadow:0 16px 48px rgba(0,0,0,.15);opacity:0;transform:translateY(10px)scale(.94);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-theme=dark] .chub-panel{background:rgba(26,24,48,.97);box-shadow:0 16px 48px rgba(0,0,0,.5)}
.chub-panel.open{opacity:1;transform:translateY(0)scale(1);pointer-events:all;animation:hubPop .24s var(--ease)}
.chub-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ts);padding:4px 8px 10px;border-bottom:.5px solid var(--border);margin-bottom:6px}
.chub-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-family:var(--f);font-size:13px;font-weight:600;color:var(--text);cursor:pointer;text-decoration:none;border:none;background:transparent;width:100%;transition:background .15s,transform .15s}
.chub-item:hover{background:var(--id);transform:translateX(2px)}
.chub-item:hover .chi-lbl{color:var(--indigo)}
.chi-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chi-lbl{font-size:13px;font-weight:600;color:var(--text)}
.chi-sub{font-size:10px;color:var(--ts);line-height:1.2}
.chi-text{display:flex;flex-direction:column;gap:1px}
.chub-item:nth-child(2) .chi-icon{background:var(--gd)}
.chub-item:nth-child(3) .chi-icon{background:rgba(24,119,242,.1)}
.chub-item:nth-child(4) .chi-icon{background:var(--md)}
.chub-item:nth-child(5) .chi-icon{background:var(--bd)}

/* ── SAMPLE BLOCK (replaces blog teaser) ── */
.sample-block{background:var(--bg-alt);border-top:.5px solid var(--border);padding:48px 20px;text-align:center}
.sample-inner{max-width:520px;margin:0 auto}
.sample-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:var(--gd);padding:3px 10px;border-radius:4px;margin-bottom:14px}
.sample-title{font-size:clamp(20px,3vw,28px);font-weight:800;color:var(--text);letter-spacing:-.02em;margin-bottom:10px}
.sample-sub{font-size:14px;color:var(--ts);line-height:1.75;margin-bottom:24px}
.sample-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sample-btn-p{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-family:var(--f);font-size:14px;font-weight:700;padding:13px 22px;border-radius:7px;border:none;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s;text-decoration:none}
.sample-btn-p:hover{transform:scale(1.03)translateY(-1px);box-shadow:0 8px 22px var(--gg)}
.sample-btn-s{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ts);font-family:var(--f);font-size:14px;font-weight:600;padding:12px 20px;border-radius:7px;border:1.5px solid var(--border);cursor:pointer;transition:border-color .2s,color .2s;text-decoration:none}
.sample-btn-s:hover{border-color:var(--blue);color:var(--blue)}

/* ── HERO SVG ACCENT ── */
.hero-accent{position:absolute;pointer-events:none}
.ha1{top:18%;left:6%;opacity:.07;animation:fA 70s ease-in-out infinite}
.ha2{bottom:25%;right:8%;opacity:.06;animation:fB 80s ease-in-out infinite 4s}
[data-theme=dark] .ha1{opacity:.14}[data-theme=dark] .ha2{opacity:.12}
/* hero glow ring */
.hv-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:280px;border-radius:50%;border:1px dashed rgba(85,51,204,.12);animation:breathe 8s ease-in-out infinite;pointer-events:none}
[data-theme=dark] .hv-ring{border-color:rgba(136,102,255,.2)}

/* ── ENHANCED MICRO-ANIMATIONS ── */
/* product featured card */
.fc{transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.fc:hover{transform:translateY(-6px)rotate(-.25deg);border-color:var(--indigo);box-shadow:0 20px 60px var(--ig)}
/* product grid cards */
.pcard:hover{transform:translateY(-6px)rotate(.25deg)scale(1.01)}
/* product icons */
.pm{transition:transform .35s var(--eback)}.pcard:hover .pm{transform:scale(1.15)rotate(-6deg)}
/* why cards */
.wc .wi{display:inline-block;transition:transform .35s var(--eback)}.wc:hover .wi{transform:translateY(-6px)scale(1.18)rotate(-6deg)}
/* behind the print */
.bcard{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.bcard:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(0,0,0,.08);border-color:var(--indigo)}
[data-theme=dark] .bcard:hover{box-shadow:0 14px 40px rgba(0,0,0,.4)}
.bgrid .bcard:nth-child(1){transition-delay:.04s}.bgrid .bcard:nth-child(2){transition-delay:.12s}.bgrid .bcard:nth-child(3){transition-delay:.2s}.bgrid .bcard:nth-child(4){transition-delay:.28s}
/* review cards */
.tc{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.tc:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 12px 36px rgba(245,166,35,.12)}
.tgrid .tc:nth-child(1){transition-delay:.04s}.tgrid .tc:nth-child(2){transition-delay:.12s}.tgrid .tc:nth-child(3){transition-delay:.2s}
/* contact cards */
.ccard{transition:background .2s,transform .22s var(--ease),box-shadow .22s}
.ccard:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.ccard.wa-card:hover{background:#1fa853;box-shadow:0 8px 24px var(--wag)}
/* social cards */
.sc{transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.sci{transition:transform .3s var(--eback)}.sc:hover .sci{transform:scale(1.18)rotate(-4deg)}
/* gallery */
.gi3{transition:transform .35s var(--ease),box-shadow .35s}
.gi3:hover{transform:scale(1.02);box-shadow:0 14px 40px rgba(0,0,0,.1)}
/* form focus */
.fi:focus{border-color:var(--indigo);box-shadow:0 0 0 4px var(--id);transition:border-color .2s,box-shadow .2s}
/* NFC card tilt */
.nvw:hover .nb2{transform:perspective(500px)rotateY(-8deg)rotateX(4deg)translateY(-5px);box-shadow:0 20px 50px rgba(85,51,204,.38)}
/* badge shimmer */
@keyframes gradShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.fbg{background-size:200% 200%;animation:gradShimmer 3.5s ease infinite}
/* process numbers */
.psn{transition:opacity .5s var(--ease)}.rv.in .psn{opacity:.18}
/* mobile pills */
@media(max-width:540px){.cpill{font-size:12px;padding:0 14px;height:34px}.catnav{gap:5px}}

/* ── BLOCK 3: FEATURED CARD PHOTO ── */
.fci.has-photo{padding:0;overflow:hidden;background:var(--bg-alt)}
.fci.has-photo::before,.fci.has-photo::after{display:none}
.fc-photo{width:100%;height:100%;min-height:200px;object-fit:cover;object-position:center;display:block;transition:transform .55s var(--ease)}
.fc:hover .fc-photo{transform:scale(1.04)}
@media(min-width:680px){.fci.has-photo{width:260px;min-height:auto}}

/* ── BLOCK 3: PRODUCT GRID PHOTO CARDS ── */
.pi.has-photo{height:130px;padding:0;overflow:hidden;background:var(--bg-alt);display:block}
.pi.has-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .4s var(--ease)}
.pi.pi-ph{height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.pi-ph-ic{font-size:34px;line-height:1}
.pi-ph-lb{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,23,42,.35)}
.pi-il{height:130px;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-alt)}
.pi-il svg{width:auto;height:108px;display:block}
.pi-il .il-stroke{stroke:var(--text);opacity:.82;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pi-il .il-soft{stroke:var(--text);opacity:.30;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pcard:hover .pi-il svg{transform:translateY(-2px) scale(1.03);transition:transform .45s var(--ease)}
.pi-il svg{transition:transform .45s var(--ease)}
.pcard:hover .pi.has-photo img{transform:scale(1.07)}
/* Split-tile treatment — permanent design for products without on-hand photography yet (Custom Packaging, Car & Window Decals) */
.pi-split{height:130px;padding:0;overflow:hidden;display:flex}
.pi-split-icon{width:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#151328;color:rgba(255,255,255,.4)}
.pi-split-color{width:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:6px 8px;text-align:center;transition:filter .35s var(--ease)}
.pi-split-indigo .pi-split-color{background:linear-gradient(135deg,#5533CC,#8866FF)}
.pi-split-blue .pi-split-color{background:linear-gradient(135deg,#2A9FD6,#164F79)}
.pi-split-name{font-size:11.5px;font-weight:800;color:#fff;line-height:1.3;letter-spacing:-.01em}
.pcard:hover .pi-split-color{filter:brightness(1.08)}

/* ── BLOCK 3: MORE INFO BUTTON ── */
.fc-more-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f);font-size:13px;font-weight:700;
  color:var(--indigo);background:var(--id);
  border:1.5px solid rgba(85,51,204,.22);
  padding:10px 18px;border-radius:7px;
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease)
}
.fc-more-btn:hover{background:rgba(85,51,204,.14);border-color:rgba(85,51,204,.38);transform:translateY(-1px)}
.fc-more-btn .fc-arr{transition:transform .35s var(--ease);flex-shrink:0;display:inline-block}
.fc-more-btn.open .fc-arr{transform:rotate(180deg)}

/* ── BLOCK 3: EXPAND PANEL ── */
.fc-expand{
  max-height:0;overflow:hidden;
  transition:max-height .6s cubic-bezier(0.16,1,0.3,1)
}
.fc-expand.open{max-height:800px}
.fc-expand-inner{
  padding:22px 28px 28px;
  border-top:1px solid var(--border);
  background:var(--bg-alt);
  display:flex;flex-direction:column;gap:18px
}
.fc-gallery{display:flex;gap:10px;flex-wrap:wrap}
.fc-gallery-img{
  width:96px;height:68px;border-radius:8px;
  object-fit:cover;border:1.5px solid var(--border);
  transition:transform .25s var(--ease),border-color .2s,box-shadow .2s;
  cursor:pointer
}
.fc-gallery-img:hover{transform:scale(1.07);border-color:var(--indigo);box-shadow:0 6px 18px var(--ig)}
.fc-gallery-ph{
  width:96px;height:68px;border-radius:8px;
  background:var(--bg-card);
  border:1.5px dashed var(--bm);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--bm);
  letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:1.4
}
.fc-expand-desc{font-size:14px;color:var(--ts);line-height:1.78;max-width:520px}
.fc-opts-title{
  font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ts);margin-bottom:9px
}
.fc-opts{display:flex;flex-wrap:wrap;gap:6px}
.fc-opt{
  font-size:12px;font-weight:600;color:var(--ts);
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:5px 13px;border-radius:20px;
  transition:border-color .15s,color .15s
}
.fc-opt:hover{border-color:var(--indigo);color:var(--indigo)}
.fc-expand-wa{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--wa);color:#fff;
  font-family:var(--f);font-size:14px;font-weight:700;
  padding:13px 22px;border-radius:7px;border:none;
  cursor:pointer;text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s;
  width:fit-content
}
.fc-expand-wa:hover{transform:scale(1.03)translateY(-1px);box-shadow:0 8px 24px var(--wag)}


/* ── GRID CARDS: SEE OPTIONS ACCORDION ── */
.bpc-see{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f);font-size:12px;font-weight:700;
  color:var(--ts);background:transparent;
  border:1.5px solid var(--border);
  padding:7px 13px;border-radius:6px;
  cursor:pointer;white-space:nowrap;
  transition:border-color .2s,color .2s,transform .15s var(--ease)
}
.bpc-see:hover{border-color:var(--text);color:var(--text);transform:translateY(-1px)}
.bpc-see .bpc-arr{transition:transform .3s var(--ease);flex-shrink:0;display:inline-block}
.bpc-see.open .bpc-arr{transform:rotate(180deg)}
.pcard-expand{
  max-height:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(0.16,1,0.3,1)
}
.pcard-expand.open{max-height:320px}
.pcard-expand-inner{
  padding:12px 14px 14px;
  border-top:1px solid var(--border);
  background:var(--bg-alt);
  display:flex;flex-direction:column;gap:10px
}
.pcard-opts{display:flex;flex-wrap:wrap;gap:5px}
.pcard-opt{
  font-size:11px;font-weight:600;color:var(--ts);
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:3px 10px;border-radius:14px
}
.pcard-expand-wa{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--wa);color:#fff;
  font-family:var(--f);font-size:12px;font-weight:700;
  padding:8px 14px;border-radius:6px;
  border:none;cursor:pointer;text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s;
  width:fit-content
}
.pcard-expand-wa:hover{transform:scale(1.03);box-shadow:0 5px 14px var(--wag)}
/* ── BLOCK 3: FILTER ANIMATION ── */
#pgrid .pcard{
  transition:opacity .3s ease,transform .3s var(--ease),box-shadow .3s,border-color .3s
}


/* ══════════════════════════════
   PREMIUM NAV DROPDOWN V89
   ══════════════════════════════ */
/* ── PREMIUM DROPDOWN V89 ── */
@keyframes dropInV87{from{opacity:0;transform:translateY(-10px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}
.nav-logo{position:relative;cursor:pointer;user-select:none}
.nav-logo svg.drop-arr{width:10px;height:10px;margin-left:4px;transition:transform .3s var(--ease);flex-shrink:0;opacity:.5}
.nav-logo.open svg.drop-arr{transform:rotate(180deg);opacity:1}
.nav-dropdown{
  position:absolute;top:calc(100% + 14px);left:0;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:6px 6px 0 6px;
  min-width:272px;
  box-shadow:0 20px 60px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06),0 0 0 .5px var(--border);
  opacity:0;transform:translateY(-10px)scale(.95);transform-origin:24px top;
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
  z-index:200;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  overflow:hidden
}
[data-theme=dark] .nav-dropdown{
  background:rgba(20,18,38,.97);
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.07)
}
.nav-dropdown.open{opacity:1;transform:translateY(0)scale(1);pointer-events:all;animation:dropInV87 .26s var(--ease)}
.nav-dropdown::before{
  content:'';position:absolute;top:-5px;left:22px;
  width:10px;height:10px;
  background:var(--bg-card);
  border-left:1px solid var(--border);border-top:1px solid var(--border);
  transform:rotate(45deg);border-radius:1px
}
[data-theme=dark] .nav-dropdown::before{background:rgba(20,18,38,.97)}

/* Items */
.dd-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:10px;
  cursor:pointer;position:relative;
  transition:background .15s,transform .18s var(--ease);
  text-decoration:none
}
.dd-item:hover{background:var(--id);transform:translateX(3px)}
.dd-icon{
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .22s var(--eback),box-shadow .22s
}
.dd-item:hover .dd-icon{transform:scale(1.12) rotate(-4deg)}
.dd-text{display:flex;flex-direction:column;gap:1px}
.dd-label{font-size:13px;font-weight:700;color:var(--text);line-height:1.3;transition:color .15s}
.dd-desc{font-size:11px;color:var(--ts);line-height:1.4}
.dd-item:hover .dd-label{color:var(--indigo)}
.dd-arrow{margin-left:auto;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s var(--ease);flex-shrink:0}
.dd-item:hover .dd-arrow{opacity:.5;transform:translateX(0)}

/* Divider */
.nav-dropdown hr{margin:4px 6px;border:none;border-top:.5px solid var(--border)}

/* Section label */
.dd-group{
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ts);opacity:.6;
  padding:8px 12px 3px;
  pointer-events:none
}

/* WhatsApp CTA footer */
.dd-footer{
  padding:8px;
  margin-top:4px;
  border-top:.5px solid var(--border);
  background:linear-gradient(180deg,transparent 0%,rgba(37,211,102,.04) 100%)
}
[data-theme=dark] .dd-footer{background:linear-gradient(180deg,transparent 0%,rgba(37,211,102,.06) 100%)}
.dd-wa-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;font-family:var(--f);font-size:13px;font-weight:700;
  border:none;cursor:pointer;text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s,filter .2s;
  letter-spacing:.01em;
  box-shadow:0 3px 12px rgba(37,211,102,.3)
}
.dd-wa-cta:hover{transform:translateY(-1px) scale(1.01);box-shadow:0 8px 24px rgba(37,211,102,.42);filter:brightness(1.04)}
.dd-wa-cta svg{flex-shrink:0;opacity:.95}
.dd-dot{display:none}

/* ══════════════════════════════
   v98 NAV REFINEMENTS
   ══════════════════════════════ */
/* 1 ─ Dropdown: sharp v95-style snap (overshoot pop) */
@keyframes dropSnapV98{from{opacity:0;transform:translateY(-16px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}
.nav-dropdown.open{animation:dropSnapV98 .4s var(--eback)}
@keyframes ddSnapItemV98{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:none}}
.nav-dropdown.open>*{animation:ddSnapItemV98 .34s var(--eback) backwards}

/* 3 ─ Phone: outline pill (variant B) */
.nav-phone{display:none}
@media(min-width:640px){
  .nav-phone{
    display:inline-flex;align-items:center;gap:7px;line-height:1;white-space:nowrap;
    font-size:13px;font-weight:700;color:var(--text);text-decoration:none;
    padding:8px 14px;border:1px solid var(--border);border-radius:999px;
    transition:border-color .25s,background .25s,transform .25s var(--ease),box-shadow .25s
  }
}
.nav-phone .ph-ic{width:14px;height:14px;flex-shrink:0;color:var(--ts);transition:color .25s,transform .4s var(--eback)}
.nav-phone:hover{color:var(--text);border-color:var(--coral);background:var(--cd);transform:translateY(-1px);box-shadow:0 6px 16px rgba(245,90,40,.16)}
.nav-phone:hover .ph-ic{color:var(--coral);transform:rotate(-14deg) scale(1.08)}

/* 4 ─ WhatsApp button: alive idle sheen + icon wave + lift */
.btn-wa-n{gap:8px;box-shadow:0 2px 10px rgba(37,211,102,.28);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn-wa-n .wa-ic{width:15px;height:15px;flex-shrink:0;transition:transform .3s var(--eback)}
@keyframes waSheen{0%,70%{left:-100%}84%,100%{left:160%}}
.btn-wa-n::after{animation:waSheen 4.5s ease-in-out infinite}
.btn-wa-n:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 24px rgba(37,211,102,.45)}
@keyframes waWave{0%,100%{transform:rotate(0)}22%{transform:rotate(-13deg)}50%{transform:rotate(9deg)}74%{transform:rotate(-4deg)}}
.btn-wa-n:hover .wa-ic{animation:waWave .55s var(--ease)}
@media(prefers-reduced-motion:reduce){.btn-wa-n::after{animation:none}.btn-wa-n .wa-ic{animation:none}}

/* ══════════════════════════════
   CONTACT WIDGET V4
   ══════════════════════════════ */
/* ── Keyframes ── */
@keyframes hubPop{
  from{opacity:0;transform:translateY(12px) scale(.92)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fabPulse{
  0%  {box-shadow:0 0 0 0   rgba(37,211,102,.55), 0 6px 22px rgba(37,211,102,.3)}
  70% {box-shadow:0 0 0 11px rgba(37,211,102,0),  0 6px 22px rgba(37,211,102,.2)}
  100%{box-shadow:0 0 0 0   rgba(37,211,102,0),  0 6px 22px rgba(37,211,102,.15)}
}
@keyframes rowIn{
  from{opacity:0;transform:translateX(10px)}
  to  {opacity:1;transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ── FAB ── */
.chub-btn{
  position:fixed;bottom:22px;right:20px;z-index:150;
  width:54px;height:54px;border-radius:50%;
  background:var(--wa);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  animation:fabPulse 2.6s ease-out infinite;
  transition:transform .25s var(--ease),filter .2s,background .2s;
  box-shadow:0 6px 22px rgba(37,211,102,.35);
}
.chub-btn:hover{
  transform:scale(1.1);filter:brightness(1.06);
  animation:none;box-shadow:0 10px 36px rgba(37,211,102,.5);
}
.chub-btn.open{background:#1DA851;animation:none;transform:rotate(45deg)}
.chub-btn.open:hover{transform:rotate(45deg) scale(1.08)}

/* ── Panel ── */
.chub-panel{
  position:fixed;bottom:86px;right:20px;z-index:149;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  width:232px;
  box-shadow:0 24px 64px rgba(0,0,0,.13),0 6px 18px rgba(0,0,0,.07);
  opacity:0;transform:translateY(14px) scale(.93);
  pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
[data-theme=dark] .chub-panel{
  background:rgba(22,20,44,.97);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.chub-panel.open{
  opacity:1;transform:translateY(0) scale(1);
  pointer-events:all;
  animation:hubPop .26s var(--ease);
}

/* Header */
.chub-header{
  padding:13px 16px 11px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.chub-header-label{
  font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ts);
}
.chub-header-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--wa);box-shadow:0 0 6px rgba(37,211,102,.6);
  animation:fabPulse 2.6s ease-out infinite;
}

/* List */
.chub-list{padding:8px;display:flex;flex-direction:column;gap:3px}

/* Rows */
.chub-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 10px;border-radius:12px;
  text-decoration:none;color:var(--text);
  border:1px solid transparent;
  transition:background .16s,border-color .16s,transform .18s var(--ease);
}
.chub-row:hover{transform:translateX(3px)}
.chub-row.wa{background:rgba(37,211,102,.07);border-color:rgba(37,211,102,.18)}
.chub-row.wa:hover{background:rgba(37,211,102,.13);border-color:rgba(37,211,102,.3)}
.chub-row.ig:hover{background:rgba(232,50,158,.08);border-color:rgba(232,50,158,.2)}
.chub-row.fb:hover{background:rgba(0,153,255,.08);border-color:rgba(0,153,255,.2)}
.chub-row.ph:hover{background:rgba(85,51,204,.08);border-color:rgba(85,51,204,.2)}
.chub-row.em:hover{background:rgba(42,159,214,.08);border-color:rgba(42,159,214,.2)}

/* Icon */
.chub-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chub-icon.wa{background:rgba(37,211,102,.15)}
.chub-icon.ig{background:rgba(232,50,158,.1)}
.chub-icon.fb{background:rgba(0,153,255,.1)}
.chub-icon.ph{background:rgba(85,51,204,.1)}
.chub-icon.em{background:rgba(42,159,214,.1)}

/* Text */
.chub-text{flex:1;min-width:0}
.chub-lbl{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.2}
.chub-sub{font-size:10.5px;font-weight:500;color:var(--ts);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chub-row.wa .chub-sub{color:var(--wa-dark);font-weight:600}
[data-theme=dark] .chub-row.wa .chub-sub{color:#50E080}

/* Arrow */
.chub-arr{color:var(--ts);opacity:.4;flex-shrink:0;transition:transform .18s var(--ease),opacity .18s}
.chub-row:hover .chub-arr{transform:translateX(2px);opacity:.8}

/* Divider */
.chub-divider{height:1px;background:var(--border);margin:4px 8px;opacity:.7}

/* Footer */
.chub-footer{
  padding:9px 16px 11px;
  border-top:1px solid var(--border);
  font-size:10px;font-weight:600;color:var(--ts);
  text-align:center;letter-spacing:.03em;
}

/* Stagger animation */
.chub-panel.open .chub-row{animation:rowIn .32s var(--ease) both}
.chub-panel.open .chub-row:nth-child(1){animation-delay:.03s}
.chub-panel.open .chub-row:nth-child(2){animation-delay:.08s}
.chub-panel.open .chub-row:nth-child(3){animation-delay:.13s}
.chub-panel.open .chub-row:nth-child(4){animation-delay:.19s}
.chub-panel.open .chub-row:nth-child(5){animation-delay:.25s}


/* ══════════════════════════════
   WHY BLOCK V3
   ══════════════════════════════ */
.sec{padding:76px 0;overflow:hidden}
.wrap{max-width:var(--mw);margin:0 auto;padding:0 24px}
.sey{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ts);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sey-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block;flex-shrink:0}
.sh{font-size:clamp(28px,4.5vw,46px);font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1.05;margin-bottom:10px}
.why-sub{font-size:clamp(14px,1.5vw,16px);font-weight:500;color:var(--ts);line-height:1.65;margin-bottom:0;max-width:480px}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.06s}.d2{transition-delay:.14s}.d3{transition-delay:.22s}
.d4{transition-delay:.30s}.d5{transition-delay:.38s}.d6{transition-delay:.46s}

/* Grid */
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
@media(min-width:640px){.wgrid{grid-template-columns:repeat(3,1fr)}}

/* Base card */
.wc{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 22px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition:transform .28s var(--ease),border-color .25s,box-shadow .28s
}
.wc::before{
  content:'';position:absolute;
  bottom:-24px;left:-24px;
  width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,var(--cl,rgba(136,102,255,.07)) 0%,transparent 70%);
  pointer-events:none;
  transition:opacity .3s,transform .4s var(--ease)
}
.wc:hover{
  transform:translateY(-5px);
  border-color:var(--ca,var(--indigo));
  box-shadow:0 14px 40px var(--cs,rgba(136,102,255,.14))
}
.wc:hover::before{transform:scale(1.5)}

/* Icon box */
.wc-icon{
  width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:var(--ib,rgba(136,102,255,.1));
  border:1px solid var(--ibc,rgba(136,102,255,.18));
  transition:transform .4s var(--eback)
}
.wc:hover .wc-icon{transform:translateY(-5px) scale(1.14) rotate(-7deg)}

.wt{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.3}
.wd{font-size:12.5px;color:var(--ts);line-height:1.65}

/* Speed badge */
.wc-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--cl,rgba(245,166,35,.1));
  border:1px solid var(--ibc,rgba(245,166,35,.22));
  border-radius:20px;padding:3px 10px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:var(--ca,var(--gold));width:fit-content
}
.wc-badge-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--ca,var(--gold));
  animation:liveDot 2s ease-in-out infinite
}
@keyframes liveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.5)}}

/* Google card */
.wc-google{cursor:pointer}
.wg-stars{display:flex;gap:3px;margin-bottom:2px}
.wg-star{
  width:17px;height:17px;color:var(--gold);
  opacity:0;transform:scale(.4) rotate(-15deg);
  transition:opacity .35s var(--eback),transform .4s var(--eback)
}
.wc-google.stars-in .wg-star:nth-child(1){opacity:1;transform:scale(1) rotate(0deg);transition-delay:.05s}
.wc-google.stars-in .wg-star:nth-child(2){opacity:1;transform:scale(1) rotate(0deg);transition-delay:.13s}
.wc-google.stars-in .wg-star:nth-child(3){opacity:1;transform:scale(1) rotate(0deg);transition-delay:.21s}
.wc-google.stars-in .wg-star:nth-child(4){opacity:1;transform:scale(1) rotate(0deg);transition-delay:.29s}
.wc-google.stars-in .wg-star:nth-child(5){opacity:1;transform:scale(1) rotate(0deg);transition-delay:.37s}
.wg-score{font-size:36px;font-weight:800;color:var(--text);letter-spacing:-.04em;line-height:1}
.wg-lbl{font-size:12px;font-weight:600;color:var(--ts)}
.wg-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;color:var(--gold);
  margin-top:auto;transition:gap .2s var(--ease)
}
.wg-link:hover{gap:9px}

/* CTA strip */
.why-cta{
  margin-top:14px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:14px;
  padding:20px 26px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap
}
[data-theme=dark] .why-cta{
  background:rgba(136,102,255,.06);
  border-color:rgba(136,102,255,.16)
}
.why-cta-t{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.why-cta-s{font-size:13px;color:var(--ts);margin-top:3px}
.why-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--indigo);color:#fff;
  font-family:var(--f);font-size:14px;font-weight:700;
  padding:13px 22px;border-radius:8px;border:none;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  letter-spacing:-.01em;position:relative;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s
}
.why-cta-btn::after{
  content:'';position:absolute;top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .55s var(--ease)
}
.why-cta-btn:hover{transform:scale(1.03) translateY(-1px);box-shadow:0 8px 28px var(--ig)}
.why-cta-btn:hover::after{left:160%}
.why-cta-btn .arr{transition:transform .2s var(--ease);display:inline-block}
.why-cta-btn:hover .arr{transform:translateX(3px)}

/* ══════════════════════════════
   NFC SPOTLIGHT V3
   ══════════════════════════════ */
/* ==========================================
   SITE CSS VARIABLES (unchanged from main)
   ========================================== */


a{text-decoration:none;color:inherit}
.sec{padding:80px 0;overflow:hidden}
.seca{background:var(--bg-alt)}
.wrap{max-width:var(--mw);margin:0 auto;padding:0 24px}
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ==========================================
   ★ NEW CSS — ADD TO MAIN SITE <style> TAG ★
   ========================================== */

/* --- Animations --- */
@keyframes nfc2Float{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-12px) rotate(.6deg)}
}
@keyframes nfc2Ring{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:.55}
  100%{transform:translate(-50%,-50%) scale(3.2);opacity:0}
}
@keyframes nfc2Badge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* --- Layout --- */
.nfc2-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:52px;
  align-items:center;
  position:relative;
}
@media(min-width:860px){
  .nfc2-layout{
    grid-template-columns:1.1fr 1fr;
    gap:72px;
  }
}

/* --- Section bg glow --- */
.nfc2-glow{
  position:absolute;
  width:600px;height:600px;
  top:-160px;right:-120px;
  background:radial-gradient(circle,rgba(42,159,214,.07) 0%,transparent 65%);
  pointer-events:none;
}
[data-theme=dark] .nfc2-glow{background:radial-gradient(circle,rgba(80,206,255,.12) 0%,transparent 65%)}

/* --- Content column --- */
.nfc2-content{position:relative;z-index:1}

/* Eyebrow pill */
.nfc2-ey{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);
  background:var(--bd);
  border:1px solid rgba(42,159,214,.22);
  border-radius:20px;
  padding:6px 14px 6px 7px;
  margin-bottom:20px;
}
.nfc2-ey-dot{
  width:24px;height:24px;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* Heading */
.nfc2-h{
  font-size:clamp(32px,4.6vw,50px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.02;
  margin-bottom:18px;
  color:var(--text);
}
.nfc2-h em{font-style:normal;color:var(--blue)}

/* Sub */
.nfc2-sub{
  font-size:15px;font-weight:500;
  color:var(--ts);line-height:1.78;
  margin-bottom:28px;max-width:460px;
}

/* Feature pills row */
.nfc2-feats{
  display:flex;flex-wrap:wrap;
  gap:8px;margin-bottom:28px;
}
.nfc2-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;
  color:var(--ts);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:7px;
  padding:7px 12px;
  transition:border-color .2s,color .2s,box-shadow .2s;
}
.nfc2-pill:hover{
  border-color:rgba(42,159,214,.45);
  color:var(--text);
  box-shadow:0 2px 8px rgba(42,159,214,.1);
}
.nfc2-pill-ic{color:var(--blue);flex-shrink:0;display:flex;align-items:center}

/* Use case cards 2x2 */
.nfc2-cases{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:30px;
}
@media(max-width:500px){.nfc2-cases{grid-template-columns:1fr}}

.nfc2-case{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  display:flex;gap:11px;align-items:flex-start;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s;
}
.nfc2-case:hover{
  border-color:rgba(42,159,214,.45);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(42,159,214,.09);
}
.nfc2-case-ic{
  width:32px;height:32px;border-radius:8px;
  background:var(--bd);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);flex-shrink:0;
}
.nfc2-case-who{
  font-size:11px;font-weight:700;
  color:var(--text);margin-bottom:4px;
  letter-spacing:-.01em;
}
.nfc2-case-what{
  font-size:11px;color:var(--ts);line-height:1.5;
}
.nfc2-case-what b{color:var(--blue);font-weight:600}

/* Price row */
.nfc2-price-row{
  font-size:13px;font-weight:500;color:var(--ts);
  display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;
  margin-bottom:16px;
}
.nfc2-price-n{
  font-size:24px;font-weight:800;
  color:var(--gold);letter-spacing:-.04em;line-height:1;
}
.nfc2-price-sep{opacity:.3}

/* CTAs row */
.nfc2-ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Primary CTA — coral (matches site-wide action color) */
.btn-nfc2-pri{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--coral);color:#fff;
  font-family:var(--f);font-size:14px;font-weight:700;
  padding:13px 22px;border-radius:7px;border:none;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s;
  text-decoration:none;
}
.btn-nfc2-pri::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .5s var(--ease);
}
.btn-nfc2-pri:hover{transform:scale(1.03)translateY(-2px);box-shadow:0 8px 28px rgba(245,90,40,.3)}
.btn-nfc2-pri:hover::after{left:150%}

/* Secondary link */
.btn-nfc2-sec{
  font-family:var(--f);font-size:13px;font-weight:700;
  color:var(--blue);
  display:inline-flex;align-items:center;gap:5px;
  border-bottom:1px solid rgba(42,159,214,.3);
  padding-bottom:2px;
  transition:color .2s,border-color .2s,gap .2s;
  text-decoration:none;
}
.btn-nfc2-sec:hover{color:var(--indigo);border-color:rgba(85,51,204,.35);gap:8px}

/* --- Visual column --- */
.nfc2-visual-col{
  position:relative;z-index:1;
}

/* Tap rings (behind img-box, centered in visual col) */
.nfc2-rings{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  z-index:0;
  pointer-events:none;
}
.nfc2-ring{
  position:absolute;
  width:100px;height:100px;
  border-radius:50%;
  border:1.5px solid rgba(42,159,214,.35);
  animation:nfc2Ring 2.8s ease-out infinite;
}
.nfc2-ring:nth-child(2){animation-delay:.95s;border-color:rgba(85,51,204,.22)}
.nfc2-ring:nth-child(3){animation-delay:1.9s;border-color:rgba(42,159,214,.18)}

/* Image box */
.nfc2-img-box{
  background:linear-gradient(135deg,rgba(85,51,204,.05) 0%,rgba(42,159,214,.07) 100%);
  border:1px solid rgba(42,159,214,.15);
  border-radius:24px;
  padding:52px 36px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  min-height:300px;
}
/* Dot grid overlay */
.nfc2-img-box::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(42,159,214,.16) 1px,transparent 1px);
  background-size:22px 22px;
  pointer-events:none;opacity:.65;
}
/* Radial glow center */
.nfc2-img-box::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(42,159,214,.1) 0%,transparent 62%);
  pointer-events:none;
}

/* Product image */
.nfc2-product-img{
  position:relative;z-index:2;
  width:100%;max-width:310px;height:auto;
  display:block;
  filter:drop-shadow(0 22px 48px rgba(85,51,204,.22)) drop-shadow(0 6px 14px rgba(0,0,0,.12));
  animation:nfc2Float 6s ease-in-out infinite;
}

/* Floating badges */
.nfc2-badge{
  position:absolute;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  display:flex;align-items:center;gap:9px;
  box-shadow:0 8px 24px rgba(0,0,0,.09);
  z-index:5;white-space:nowrap;
}
[data-theme=dark] .nfc2-badge{box-shadow:0 8px 24px rgba(0,0,0,.42)}

.nfc2-b-saved{
  top:22px;right:-10px;
  animation:nfc2Badge 4.5s ease-in-out infinite .4s;
}
.nfc2-b-price{
  bottom:26px;left:-10px;
  animation:nfc2Badge 5s ease-in-out infinite 1.4s;
}
@media(max-width:640px){
  .nfc2-b-saved{top:12px;right:12px}
  .nfc2-b-price{bottom:12px;left:12px}
}

.nfc2-badge-ic{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.nfc2-badge-ic.g{background:var(--gd);color:var(--green)}
.nfc2-badge-ic.b{background:var(--bd);color:var(--blue)}

.nfc2-badge-lbl{font-size:12px;font-weight:700;color:var(--text);line-height:1.3}
.nfc2-badge-sub{font-size:10px;color:var(--ts);line-height:1.3}

/* ══════════════════════════════
   GALLERY V1
   ══════════════════════════════ */
/* ── CSS VARIABLES ── */





/* ── PREVIEW TOGGLE ── */
.preview-toggle{position:fixed;top:16px;right:16px;z-index:9999;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-family:var(--f);font-size:12px;font-weight:700;color:var(--ts);cursor:pointer;transition:background .2s}
.preview-toggle:hover{background:var(--bg-alt)}

/* ── BASE SECTION ── */
.sec{padding:76px 0;overflow:hidden}
.seca{background:var(--bg-alt)}
.wrap{max-width:var(--mw);margin:0 auto;padding:0 20px}
.idiv{width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--indigo),var(--magenta),var(--coral),var(--green),transparent);opacity:.16;display:block}

/* ── SCROLL REVEAL ── */
.rv{opacity:0;transform:translateY(24px);filter:blur(4px);transition:opacity .65s var(--ease),transform .65s var(--ease),filter .6s var(--ease)}
.rv.in{opacity:1;transform:translateY(0);filter:blur(0)}
.d1{transition-delay:.06s}.d2{transition-delay:.14s}.d3{transition-delay:.22s}
.d4{transition-delay:.30s}.d5{transition-delay:.38s}.d6{transition-delay:.46s}

/* Card-specific stagger */
.ggrid .rv:nth-child(1){transition-delay:.08s}
.ggrid .rv:nth-child(2){transition-delay:.20s}
.ggrid .rv:nth-child(3){transition-delay:.30s}
.ggrid .rv:nth-child(4){transition-delay:.14s}
.ggrid .rv:nth-child(5){transition-delay:.24s}
.ggrid .rv:nth-child(6){transition-delay:.34s}

/* ── HEADING ── */
.sey{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ts);margin-bottom:8px}
.sh{font-size:clamp(28px,4.5vw,46px);font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1.05;margin-bottom:8px}
.ssub{font-size:clamp(13px,1.5vw,15px);font-weight:500;color:var(--ts);line-height:1.7;max-width:480px;margin-bottom:0}

/* ── ANIMATIONS ── */
@keyframes heroShimmer{0%{left:-60%}100%{left:160%}}
@keyframes accentBar{0%{transform:scaleX(0)}60%{transform:scaleX(1.04)}100%{transform:scaleX(1)}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes modalOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(24px) scale(.97)}}

/* ── BENTO GRID ── */
.ggrid{display:grid;gap:12px;margin-top:28px}
@media(min-width:700px){
  .ggrid{grid-template-columns:repeat(3,1fr);grid-template-rows:228px 228px 210px}
  .gi3-hero{grid-column:span 2;grid-row:span 2}
}
@media(max-width:699px) and (min-width:421px){
  .ggrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px;gap:10px}
  .gi3-hero{grid-column:span 2}
}
@media(max-width:420px){
  .ggrid{grid-template-columns:1fr;grid-auto-rows:210px;gap:10px}
}

/* ── GALLERY CARD ── */
.gi3{border-radius:13px;overflow:hidden;position:relative;cursor:pointer;border:1px solid var(--border);background:var(--bg-alt);transition:transform .4s var(--ease),box-shadow .4s,border-color .35s;user-select:none}
.gi3:hover{transform:scale(1.025);box-shadow:0 16px 48px rgba(0,0,0,.12);border-color:transparent}
[data-theme=dark] .gi3:hover{box-shadow:0 16px 48px rgba(0,0,0,.44)}
.gi3-hero{transition:transform .45s var(--ease),box-shadow .45s}
.gi3-hero:hover{transform:scale(1.018);box-shadow:0 24px 64px rgba(0,0,0,.15)}

/* Color accent bar */
.gi3::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gc,var(--indigo));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:5}
.gi3:hover::after{animation:accentBar .55s var(--ease) forwards}

/* Hero shimmer on scroll-in */
.gi3-hero::before{content:'';position:absolute;top:0;width:38%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:skewX(-14deg);z-index:4;pointer-events:none;left:-60%}
.gi3-hero.in::before{animation:heroShimmer 1.2s var(--ease) 1s forwards}

/* ── CARD IMAGE ── */
.gi3 img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease);display:block}
.gi3:hover img{transform:scale(1.09)}
.gi3-hero:hover img{transform:scale(1.06)}

/* ── HOVER OVERLAY ── */
.gov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,24,.9) 0%,rgba(8,6,24,.62) 44%,rgba(8,6,24,.08) 100%);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px;opacity:0;transform:translateY(8px);transition:opacity .38s var(--ease),transform .38s var(--ease);z-index:2;pointer-events:none}
.gi3:hover .gov{opacity:1;transform:translateY(0)}
.gi3-hero .gov{padding:24px}

/* Category tag */
.gov-cat{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gc,var(--indigo));background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:3px 9px;border-radius:4px;margin-bottom:7px;flex-shrink:0}

/* Product name */
.glb{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.2;margin-bottom:3px}
.gi3-hero .glb{font-size:clamp(17px,2vw,21px);margin-bottom:5px}

/* Sub line */
.gov-sub{font-size:11px;font-weight:500;color:rgba(255,255,255,.58);margin-bottom:11px;display:none}
.gi3-hero .gov-sub{display:block}

/* Expand cue (replaces old WA button) */
.gov-expand{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;transition:color .2s}
.gi3:hover .gov-expand{color:#fff}
.gi3-hero .gov-expand{font-size:12px;margin-top:6px}
.gov-expand svg{opacity:.7;transition:opacity .2s,transform .2s}
.gi3:hover .gov-expand svg{opacity:1;transform:translate(2px,-2px)}

/* ── PLACEHOLDER ── */
.gph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-alt) 100%)}
.gpi{font-size:26px}.gpl{font-size:10px;font-weight:700;color:var(--ts);letter-spacing:.1em;text-transform:uppercase}

/* ── BOTTOM CTA STRIP ── */
.g-cta-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:16px;padding:20px 26px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;transition:border-color .3s,box-shadow .3s}
.g-cta-strip:hover{border-color:rgba(85,51,204,.18);box-shadow:0 4px 28px rgba(85,51,204,.07)}
[data-theme=dark] .g-cta-strip:hover{box-shadow:0 4px 28px rgba(136,102,255,.1)}
.g-cta-text{font-size:clamp(14px,1.8vw,16px);font-weight:700;color:var(--text);letter-spacing:-.01em}
.g-cta-text span{color:var(--ts);font-weight:500}
.g-cta-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.btn-coral-g{display:inline-flex;align-items:center;gap:7px;background:var(--coral);color:#fff;font-family:var(--f);font-size:13.5px;font-weight:700;padding:11px 22px;border-radius:7px;border:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;white-space:nowrap}
.btn-coral-g::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s var(--ease)}
.btn-coral-g:hover{transform:scale(1.03) translateY(-1px);box-shadow:0 6px 24px rgba(245,90,40,.38)}
.btn-coral-g:hover::after{left:160%}

.btn-ig-g{display:inline-flex;align-items:center;gap:7px;color:var(--magenta);font-family:var(--f);font-size:13px;font-weight:700;padding:10px 18px;border-radius:7px;border:1.5px solid rgba(232,50,158,.28);background:transparent;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn-ig-g:hover{background:rgba(232,50,158,.07);border-color:var(--magenta);transform:scale(1.02)}

@media(max-width:560px){
  .g-cta-strip{flex-direction:column;align-items:flex-start;padding:18px 20px}
  .g-cta-btns{width:100%}
  .btn-coral-g,.btn-ig-g{flex:1;justify-content:center}
}

/* ════════════════════════════════════════
   MODAL / DETAIL PANEL
════════════════════════════════════════ */
.g-backdrop{position:fixed;inset:0;background:rgba(8,6,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.g-backdrop.open{opacity:1;pointer-events:all;animation:backdropIn .3s var(--ease)}

.g-modal{background:var(--bg-card);border-radius:20px;width:100%;max-width:560px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border);box-shadow:0 32px 80px rgba(0,0,0,.28);position:relative;transform:translateY(36px) scale(.97);transition:transform .38s var(--ease),opacity .3s var(--ease)}
[data-theme=dark] .g-modal{box-shadow:0 32px 80px rgba(0,0,0,.6)}
.g-backdrop.open .g-modal{transform:translateY(0) scale(1);animation:modalIn .38s var(--ease)}

/* Close button */
.g-modal-close{position:absolute;top:14px;right:14px;z-index:10;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.45);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;transition:background .2s,transform .2s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.g-modal-close:hover{background:rgba(0,0,0,.65);transform:scale(1.08)}

/* Image */
.g-modal-img{width:100%;aspect-ratio:16/9;overflow:hidden;flex-shrink:0;background:var(--bg-alt);position:relative}
.g-modal-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.g-modal:hover .g-modal-img img{transform:scale(1.03)}
.g-modal-img-badge{position:absolute;top:14px;left:14px;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(8,6,24,.55);border:1px solid rgba(255,255,255,.2);padding:4px 10px;border-radius:5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Body */
.g-modal-body{padding:24px;overflow-y:auto;flex:1;scroll-behavior:smooth}
.g-modal-body::-webkit-scrollbar{width:4px}
.g-modal-body::-webkit-scrollbar-track{background:transparent}
.g-modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.g-modal-cat{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--modal-color,var(--indigo));background:var(--modal-bg,var(--id));padding:4px 10px;border-radius:5px;margin-bottom:12px}
.g-modal-name{font-size:clamp(20px,3vw,26px);font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.1;margin-bottom:10px}
.g-modal-desc{font-size:14px;font-weight:500;color:var(--ts);line-height:1.72;margin-bottom:16px}

/* Price chip */
.g-modal-price{display:inline-flex;align-items:center;gap:6px;background:rgba(245,166,35,.1);border:.5px solid rgba(245,166,35,.28);border-radius:8px;padding:7px 14px;margin-bottom:20px;font-size:13px;font-weight:700;color:var(--gold)}
[data-theme=dark] .g-modal-price{background:rgba(255,191,64,.1)}

/* Future photos grid */
.g-modal-photos{margin-bottom:20px}
.g-modal-photos-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bm);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.g-modal-photos-label::after{content:'';flex:1;height:1px;background:var(--border)}
.g-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:330px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.g-photo-slot{aspect-ratio:1;border-radius:8px;border:1.5px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--bg-alt);transition:border-color .2s,background .2s;cursor:default}
.g-photo-slot.has-img{border-style:solid;border-color:var(--border);overflow:hidden;cursor:pointer}
.g-photo-slot.has-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.g-photo-slot.has-img:hover img{transform:scale(1.06)}
.g-photo-slot-icon{width:22px;height:22px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;color:var(--bm);font-size:11px}
.g-photo-slot-txt{font-size:9.5px;font-weight:600;color:var(--bm);letter-spacing:.06em;text-transform:uppercase;text-align:center}

/* WA CTA */
.g-modal-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--coral);color:#fff;font-family:var(--f);font-size:14px;font-weight:700;padding:14px 22px;border-radius:10px;border:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;width:100%;letter-spacing:.01em}
.g-modal-cta::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s var(--ease)}
.g-modal-cta:hover{transform:scale(1.02) translateY(-1px);box-shadow:0 8px 28px rgba(245,90,40,.38)}
.g-modal-cta:hover::after{left:160%}

@media(max-width:480px){
  .g-backdrop{padding:0;align-items:flex-end}
  .g-modal{border-radius:20px 20px 0 0;max-height:92vh}
  .g-modal-img{aspect-ratio:4/3}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ══════════════════════════════
   QUOTE FORM V6
   ══════════════════════════════ */
/* ===== KEYFRAMES ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes chipPop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes circleDraw{from{stroke-dashoffset:202}to{stroke-dashoffset:0}}
@keyframes checkDraw{from{stroke-dashoffset:52}to{stroke-dashoffset:0}}
@keyframes scaleIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes successFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ===== SECTION ===== */
.qf-section{padding:88px 20px 96px;background:var(--bg-alt);position:relative;overflow:hidden}
.qf-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.qf-blob{position:absolute;border-radius:50%}
.qf-blob-1{width:600px;height:600px;top:-220px;right:-120px;background:radial-gradient(circle,rgba(85,51,204,.045) 0%,transparent 65%)}
.qf-blob-2{width:480px;height:480px;bottom:-160px;left:-100px;background:radial-gradient(circle,rgba(245,90,40,.04) 0%,transparent 65%)}
.qf-wrap{max-width:var(--mw);margin:0 auto;position:relative;z-index:1}

/* ===== EYEBROW ===== */
.qf-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:40px;opacity:0;animation:fadeUp .5s var(--ease) .05s forwards}
.qf-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:pulse 2s ease-in-out infinite}

/* ===== GRID ===== */
.qf-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:860px){.qf-grid{grid-template-columns:400px 1fr;gap:64px}}

/* ===== LEFT: PITCH (unchanged from v2) ===== */
.qf-pitch{opacity:0;animation:fadeUp .65s var(--ease) .12s forwards}
.qf-headline{font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--text);margin-bottom:14px}
.qf-headline em{font-style:normal;background:linear-gradient(130deg,var(--coral) 0%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.qf-sub{font-size:15.5px;color:var(--ts);line-height:1.65;margin-bottom:36px;max-width:360px}
.qf-benefits{display:flex;flex-direction:column;gap:15px;margin-bottom:36px}
.qf-benefit{display:flex;align-items:flex-start;gap:13px;opacity:0;animation:fadeUp .5s var(--ease) forwards}
.qf-benefit:nth-child(1){animation-delay:.22s}
.qf-benefit:nth-child(2){animation-delay:.32s}
.qf-benefit:nth-child(3){animation-delay:.42s}
.qf-bicon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qf-bicon.c-coral{background:var(--cd)}
.qf-bicon.c-indigo{background:var(--id)}
.qf-bicon.c-green{background:var(--gd)}
.qf-btext strong{display:block;font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.qf-btext span{font-size:12.5px;color:var(--ts);line-height:1.5}
@keyframes starIn{from{opacity:0;transform:scale(.3) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.qf-rating{
  display:inline-flex;align-items:center;gap:13px;
  padding:12px 18px 12px 13px;
  background:var(--bg-card);
  border:1px solid var(--border);border-radius:14px;
  margin-bottom:28px;cursor:pointer;
  box-shadow:0 1px 2px rgba(26,26,46,.04),0 8px 24px -14px rgba(26,26,46,.14);
  opacity:0;animation:fadeUp .5s var(--ease) .5s forwards;
  transition:transform .22s var(--ease),box-shadow .22s,border-color .2s;
}
.qf-rating:hover{transform:translateY(-2px);border-color:var(--bm);box-shadow:0 12px 28px -12px rgba(26,26,46,.2)}
[data-theme=dark] .qf-rating{box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.55)}
.qf-g-badge{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:#fff;border:1px solid #ECECEA;
  display:flex;align-items:center;justify-content:center;
}
.qf-rating-body{display:flex;flex-direction:column;gap:2px}
.qf-rating-top{display:flex;align-items:center;gap:8px}
.qf-stars{display:flex;gap:2.5px}
.qf-stars svg{fill:#FBBC05;opacity:0;animation:starIn .35s var(--eback) forwards}
.qf-stars svg:nth-child(1){animation-delay:.62s}
.qf-stars svg:nth-child(2){animation-delay:.69s}
.qf-stars svg:nth-child(3){animation-delay:.76s}
.qf-stars svg:nth-child(4){animation-delay:.83s}
.qf-stars svg:nth-child(5){animation-delay:.9s}
.qf-rating-score{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.qf-rating-sub{font-size:11.5px;font-weight:600;color:var(--ts)}
.qf-rating-arr{margin-left:4px;color:var(--ts);font-size:15px;transition:transform .2s var(--ease)}
.qf-rating:hover .qf-rating-arr{transform:translateX(3px)}
.qf-wa-alt{display:flex;align-items:center;gap:13px;padding:13px 16px;background:rgba(37,211,102,.06);border:1.5px solid rgba(37,211,102,.18);border-radius:12px;transition:background .2s,transform .2s var(--ease),border-color .2s;opacity:0;animation:fadeUp .5s var(--ease) .58s forwards}
.qf-wa-alt:hover{background:rgba(37,211,102,.11);transform:translateY(-2px);border-color:rgba(37,211,102,.3)}
.qf-wa-icon{width:40px;height:40px;background:var(--wa);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qf-wa-copy strong{display:block;font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:1px}
.qf-wa-copy span{font-size:12px;color:var(--ts)}
.qf-wa-arrow{margin-left:auto;color:var(--ts);font-size:16px;transition:transform .2s var(--ease)}
.qf-wa-alt:hover .qf-wa-arrow{transform:translateX(4px)}

/* Messenger secondary */
.qf-msgr{
  display:flex;align-items:center;gap:13px;
  margin-top:10px;padding:13px 16px;
  background:rgba(0,132,255,.05);
  border:1.5px solid rgba(0,132,255,.16);
  border-radius:12px;
  transition:background .2s,transform .2s var(--ease),border-color .2s;
  opacity:0;animation:fadeUp .5s var(--ease) .66s forwards;
}
.qf-msgr:hover{background:rgba(0,132,255,.1);transform:translateY(-2px);border-color:rgba(0,132,255,.3)}
.qf-msgr-icon{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#00B2FF 0%,#006AFF 100%);
  display:flex;align-items:center;justify-content:center;
}
.qf-msgr-copy strong{display:block;font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:1px}
.qf-msgr-copy span{font-size:12px;color:var(--ts)}
.qf-msgr .qf-wa-arrow{margin-left:auto}
.qf-msgr:hover .qf-wa-arrow{transform:translateX(4px)}

/* ════════════════════════════════
   RIGHT: FORM CARD — V3
   ════════════════════════════════ */
.qf-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:34px 32px 30px;
  position:relative;overflow:hidden;
  opacity:0;animation:fadeUp .65s var(--ease) .18s forwards;
  box-shadow:0 1px 2px rgba(26,26,46,.04),0 12px 40px -18px rgba(26,26,46,.12);
}
[data-theme=dark] .qf-card{box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 40px -18px rgba(0,0,0,.5)}
.qf-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--indigo),var(--magenta),var(--coral));
  border-radius:20px 20px 0 0;
}

/* ── Step labels ── */
.qf-step-label{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ts);margin-bottom:13px;
}
.qf-step-num{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;letter-spacing:0;
  background:var(--cd);color:var(--coral);
  transition:background .3s,color .3s;
}
.qf-step-num.done{background:var(--coral);color:#fff}
.qf-step-num.done svg{display:block}
.qf-step-num span{display:block}
.qf-step-num.done span{display:none}
.qf-step-num svg{display:none}

/* ── Product select (single dropdown) ── */
.qf-select-wrap{position:relative;margin-bottom:26px}
.qf-select{
  display:flex;align-items:center;gap:11px;width:100%;
  font-family:var(--f);font-size:14.5px;font-weight:600;color:var(--ts);
  background:var(--bg);
  border:1.5px solid var(--border);border-radius:11px;
  padding:12px 14px;cursor:pointer;text-align:left;
  transition:border-color .2s,box-shadow .2s,background .2s,color .2s;
}
.qf-select:hover{border-color:var(--bm)}
.qf-select[aria-expanded="true"]{
  border-color:var(--indigo);background:var(--bg-card);
  box-shadow:0 0 0 4px var(--id);
}
.qf-select.has-value{color:var(--text);border-color:var(--coral);background:var(--cd)}
.qf-select-ico{display:flex;align-items:center;color:inherit;flex-shrink:0}
.qf-select.has-value .qf-select-ico{color:var(--coral)}
.qf-select-chev{margin-left:auto;flex-shrink:0;transition:transform .25s var(--ease)}
.qf-select[aria-expanded="true"] .qf-select-chev{transform:rotate(180deg)}
.qf-menu{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  padding:6px;z-index:40;
  max-height:296px;overflow-y:auto;
  background:var(--bg-card);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 16px 44px -10px rgba(26,26,46,.25),0 2px 8px rgba(26,26,46,.06);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;
  pointer-events:none;
  transition:opacity .22s var(--ease),transform .25s var(--ease);
}
[data-theme=dark] .qf-menu{box-shadow:0 16px 44px -10px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4)}
.qf-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.qf-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 11px;border:none;border-radius:9px;
  background:none;font-family:var(--f);font-size:13.5px;font-weight:600;
  color:var(--ts);cursor:pointer;text-align:left;
  transition:background .15s,color .15s;
}
.qf-menu-item svg{flex-shrink:0;stroke:currentColor}
.qf-menu-item:hover{background:var(--id);color:var(--indigo)}
.qf-menu-item.selected{color:var(--coral)}
.qf-menu-item .qf-mi-check{margin-left:auto;opacity:0;color:var(--coral)}
.qf-menu-item.selected .qf-mi-check{opacity:1}

/* ── Stage 2 lock / unlock ── */
.qf-stage2{transition:opacity .5s var(--ease),filter .5s var(--ease)}
.qf-stage2.is-waiting{opacity:.42;filter:saturate(.55)}
.qf-stage2.is-waiting .qf-step-num{animation:pulse 2s ease-in-out infinite}

/* ── Fields ── */
.qf-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.qf-row2{grid-template-columns:1fr}}
.qf-fg{margin-bottom:16px}
.qf-label{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:7px;
}
.qf-opt{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bm);background:var(--bg-alt);
  padding:2px 7px;border-radius:100px;
}
.qf-input{
  width:100%;
  font-family:var(--f);font-size:14.5px;font-weight:500;color:var(--text);
  background:var(--bg);
  border:1.5px solid var(--border);border-radius:11px;
  padding:12px 14px;
  transition:border-color .2s,box-shadow .2s,background .2s;
  -webkit-appearance:none;appearance:none;
}
.qf-input::placeholder{color:var(--bm);font-weight:400}
.qf-input:hover{border-color:var(--bm)}
.qf-input:focus{
  outline:none;border-color:var(--indigo);background:var(--bg-card);
  box-shadow:0 0 0 4px var(--id);
}
textarea.qf-input{min-height:96px;resize:vertical;line-height:1.55}

/* ── Compact file attach ── */
.qf-drop{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border:1.5px dashed var(--bm);border-radius:11px;
  cursor:pointer;position:relative;
  transition:border-color .2s,background .2s;
}
.qf-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.qf-drop:hover{border-color:var(--indigo);background:var(--id)}
.qf-drop.drag-over{border-color:var(--indigo);background:var(--id);box-shadow:0 0 0 4px var(--id)}
.qf-drop.has-file{border-style:solid;border-color:rgba(61,184,90,.45);background:var(--gd)}
.qf-drop-icon{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:var(--id);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.qf-drop.has-file .qf-drop-icon{background:rgba(61,184,90,.16);color:var(--green)}
.qf-drop-copy{min-width:0}
.qf-drop-title{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.qf-drop-sub{font-size:11.5px;color:var(--ts);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qf-drop-fname{
  display:none;font-size:11.5px;font-weight:600;color:var(--green);
  margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qf-drop.has-file .qf-drop-fname{display:block}
.qf-drop.has-file .qf-drop-sub{display:none}

/* ── Submit v3 ── */
.qf-submit{
  width:100%;margin-top:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--f);cursor:pointer;
  background:var(--coral);color:#fff;
  border:none;border-radius:13px;
  padding:14px 20px 12px;
  box-shadow:0 6px 20px -6px rgba(245,90,40,.55);
  transition:transform .22s var(--ease),box-shadow .22s,filter .22s;
}
.qf-submit:hover{transform:translateY(-2px);box-shadow:0 10px 26px -6px rgba(245,90,40,.6);filter:brightness(1.04)}
.qf-submit:active{transform:translateY(0)}
.qf-submit:disabled{opacity:.75;cursor:default;transform:none}
.qf-submit-main{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15.5px;font-weight:800;letter-spacing:-.01em;
}
.qf-submit-main .qf-sarrow{transition:transform .22s var(--ease)}
.qf-submit:hover .qf-sarrow{transform:translateX(3px)}
.qf-submit-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,.88);letter-spacing:.01em}

.qf-privacy{
  margin-top:13px;text-align:center;
  font-size:11.5px;color:var(--ts);
}

/* ── Success state (unchanged) ── */
.qf-success{display:none;text-align:center;padding:48px 20px}
.qf-success.show{display:block;animation:successFadeUp .55s var(--ease) forwards}
.qf-check{margin-bottom:20px;display:inline-block;animation:scaleIn .45s var(--eback)}
.qf-check-circle{stroke-dasharray:202;stroke-dashoffset:202;animation:circleDraw .7s var(--ease) .15s forwards}
.qf-check-path{stroke-dasharray:52;stroke-dashoffset:52;animation:checkDraw .45s var(--ease) .65s forwards}
.qf-ok-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.qf-ok-sub{font-size:14px;color:var(--ts);line-height:1.6;max-width:340px;margin:0 auto 24px}
.qf-ok-wa{display:inline-flex;align-items:center;gap:9px;background:var(--wa);color:#fff;font-size:14px;font-weight:700;padding:12px 22px;border-radius:100px;transition:transform .2s var(--ease),box-shadow .2s}
.qf-ok-wa:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,211,102,.35)}

@media(max-width:560px){
  .qf-card{padding:26px 20px 24px}
}

/* ══════════════════════════════
   SAMPLE BLOCK + FOOTER V3
   ══════════════════════════════ */
/* ===== DESIGN SYSTEM (matches index.html exactly) ===== */





/* === DEMO TOGGLE === */
.demo-toggle{
  position:fixed;top:16px;right:16px;z-index:999;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--ts);font-family:var(--f);font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:8px;cursor:pointer;transition:border-color .2s;
}


/* === SCROLL REVEAL === */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes waGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.35),0 8px 32px rgba(37,211,102,.15)}
  50%{box-shadow:0 0 0 8px rgba(37,211,102,0),0 12px 40px rgba(37,211,102,.28)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.07s}.d2{transition-delay:.15s}.d3{transition-delay:.23s}.d4{transition-delay:.31s}

/* ============================================================
   SAMPLE BLOCK — REDESIGNED
   ============================================================ */

.sample-block{
  background:var(--bg-alt);
  border-top:.5px solid var(--border);
  padding:72px 24px;
  position:relative;
  overflow:hidden;
}

/* Subtle ambient glow */
.sample-block::before{
  content:'';
  position:absolute;
  width:600px;height:600px;
  top:-200px;right:-100px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,211,102,.06) 0%, transparent 60%);
  pointer-events:none;
}
.sample-block::after{
  content:'';
  position:absolute;
  width:400px;height:400px;
  bottom:-150px;left:-80px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(80,224,128,.04) 0%, transparent 65%);
  pointer-events:none;
}

.sample-inner{
  max-width:var(--mw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:center;
  position:relative;z-index:1;
}
@media(min-width:760px){
  .sample-inner{grid-template-columns:1fr 1fr;gap:64px}
}

/* === LEFT: COPY === */
.sample-copy{}

.sample-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);
  background:var(--gd);
  border:1px solid rgba(80,224,128,.18);
  padding:5px 12px;
  border-radius:100px;
  margin-bottom:20px;
}
.sample-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  animation:pulse 2.4s ease-in-out infinite;
  flex-shrink:0;
}

.sample-headline{
  font-size:clamp(30px,4.5vw,50px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.035em;
  color:var(--text);
  margin-bottom:14px;
}
.sample-headline em{
  font-style:normal;
  color:var(--green);
}

.sample-sub{
  font-size:clamp(14px,1.6vw,16px);
  color:var(--ts);
  line-height:1.7;
  max-width:380px;
  margin-bottom:32px;
}

/* WhatsApp CTA */
.sample-cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:16px 24px;
  background:var(--wa);
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),filter .2s;
  animation:waGlow 3.2s ease-in-out 1.5s infinite;
  position:relative;
  overflow:hidden;
  width:fit-content;
  margin-bottom:14px;
}
.sample-cta::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 55%);
  pointer-events:none;
}
.sample-cta:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 44px rgba(37,211,102,.38);
  filter:brightness(1.06);
  animation:none;
}
.sample-cta:active{transform:translateY(0) scale(.99)}

.sample-cta-icon{
  width:42px;height:42px;
  background:rgba(255,255,255,.2);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sample-cta-text{display:flex;flex-direction:column;gap:1px}
.sample-cta-text strong{
  display:block;
  font-size:15px;font-weight:800;
  color:#fff;letter-spacing:-.02em;
}
.sample-cta-text span{
  font-size:12px;
  color:rgba(255,255,255,.72);
  font-weight:500;
}
.sample-cta-arrow{
  color:rgba(255,255,255,.7);
  margin-left:4px;
  transition:transform .25s var(--ease);
}
.sample-cta:hover .sample-cta-arrow{transform:translateX(4px)}

/* Micro-copy trust strip */
.sample-micro{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.sample-micro-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;font-weight:600;
  color:var(--ts);
}
.sample-micro-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--green);
  opacity:.7;
  flex-shrink:0;
}

/* === RIGHT: IMAGE === */
.sample-visual{
  position:relative;
}

.sample-img-frame{
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  aspect-ratio:4/3;
  position:relative;
}
@media(min-width:760px){
  .sample-img-frame{aspect-ratio:5/4}
}

.sample-img-frame img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .6s var(--ease);
}
.sample-visual:hover .sample-img-frame img{transform:scale(1.04)}

/* Image overlay gradient (bottom fade for depth) */
.sample-img-frame::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

/* Floating price chip */
.sample-chip{
  position:absolute;
  top:-14px;right:-8px;
  display:flex;align-items:center;gap:8px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:100px;
  padding:8px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  font-size:12.5px;font-weight:700;
  color:var(--text);
  white-space:nowrap;
  animation:floatChip 4.5s ease-in-out infinite;
}
[data-theme=dark] .sample-chip{
  background:var(--bg-card);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
@keyframes floatChip{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.sample-chip-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  flex-shrink:0;
  animation:pulse 2s ease-in-out infinite;
}

/* Bottom-left chip */
.sample-chip-bottom{
  position:absolute;
  bottom:-12px;left:12px;
  display:flex;align-items:center;gap:7px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:100px;
  padding:7px 13px;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  font-size:11.5px;font-weight:600;
  color:var(--ts);
  white-space:nowrap;
  animation:floatChip 5.5s ease-in-out infinite .8s;
}
[data-theme=dark] .sample-chip-bottom{
  background:var(--bg-card);
  box-shadow:0 6px 20px rgba(0,0,0,.38);
}

/* ============================================================
   FOOTER — REDESIGNED
   ============================================================ */

footer{
  background:var(--bg-alt);
  border-top:1px solid var(--border);
  padding:56px 24px 36px;
  position:relative;
}

/* Subtle top accent line */
footer::before{
  content:'';
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:200px;height:1px;
  background:linear-gradient(90deg,transparent,var(--indigo),var(--magenta),transparent);
  opacity:.3;
}

.ft-inner{max-width:var(--mw);margin:0 auto}

/* 3-column grid */
.ft-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  margin-bottom:40px;
}
@media(min-width:560px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.ft-grid{grid-template-columns:2fr 1.1fr 1fr}}

/* === COL 1: BRAND === */
.ft-brand{}

.ft-logo{
  display:flex;align-items:center;gap:9px;
  font-weight:800;font-size:17px;
  color:var(--text);
  margin-bottom:12px;
}
.ft-logo-mark{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;
  flex-shrink:0;
}

.ft-desc{
  font-size:13px;font-weight:500;
  color:var(--ts);
  line-height:1.7;
  max-width:250px;
  margin-bottom:14px;
}

/* Location badge — replaces old italic .ftfr */
.ft-location-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:100px;
  padding:5px 11px;
  font-size:11.5px;font-weight:600;
  color:var(--ts);
  transition:border-color .2s;
}
.ft-location-badge:hover{border-color:var(--bm)}
.ft-location-badge svg{flex-shrink:0}

/* === COL 2: NYC STUDIO === */
.ft-col-head{
  font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ts);opacity:.6;
  margin-bottom:16px;
}

.ft-contact{display:flex;flex-direction:column;gap:10px}

.ft-contact-row{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;font-weight:500;
  color:var(--ts);
  line-height:1.45;
}
.ft-contact-row a{transition:color .2s}
.ft-contact-row a:hover{color:var(--text)}

.ft-contact-icon{
  width:28px;height:28px;
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}

.ft-service-area{
  margin-top:6px;
  font-size:11.5px;font-weight:500;
  color:var(--bm);
  line-height:1.55;
  padding-left:0;
}

/* === COL 3: EXPLORE === */
.ft-nav{display:flex;flex-direction:column;gap:9px}

.ft-nav a{
  font-size:13px;font-weight:600;
  color:var(--ts);
  /* CHANGED: removed text-transform:uppercase — now mixed case */
  letter-spacing:.01em;
  transition:color .2s,transform .15s var(--ease);
  display:inline-block;
}
.ft-nav a:hover{color:var(--text);transform:translateX(3px)}

/* === FOOTER BOTTOM === */
.ft-bottom{
  border-top:.5px solid var(--border);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
@media(min-width:560px){
  .ft-bottom{flex-direction:row;justify-content:space-between}
}

.ft-copy{
  font-size:11px;
  color:var(--bm);
  letter-spacing:.03em;
}

/* === SOCIAL ICONS — redesigned with SVGs === */
.ft-socials{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.ft-social-link{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:8px;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--ts);
  transition:border-color .2s,transform .2s var(--ease),color .2s,box-shadow .2s;
}
.ft-social-link:hover{
  transform:translateY(-3px);
  border-color:var(--bm);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
[data-theme=dark] .ft-social-link:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.ft-social-link svg{transition:transform .25s var(--eback)}
.ft-social-link:hover svg{transform:scale(1.15)}

/* Branded hover colors */
.ft-social-link.insta:hover{border-color:var(--magenta);color:var(--magenta)}
.ft-social-link.fb:hover{border-color:#1877F2;color:#1877F2}
.ft-social-link.tiktok:hover{border-color:var(--text);color:var(--text)}
.ft-social-link.yt:hover{border-color:#FF0000;color:#FF0000}
.ft-social-link.pin:hover{border-color:#E60023;color:#E60023}
.ft-social-link.google:hover{border-color:#FBBC05;color:#FBBC05}

/* Sticker type chip transition */
#stickerType{
  display:inline-block;
  transition:opacity .25s ease, transform .25s var(--ease);
}
.ft-review-cta{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;
  color:var(--ts);
  border:1px solid var(--border);
  background:var(--bg-card);
  border-radius:8px;
  padding:6px 12px;
  transition:border-color .2s,color .2s,transform .2s var(--ease);
  white-space:nowrap;
}
.ft-review-cta:hover{
  border-color:#FBBC05;
  color:var(--text);
  transform:translateY(-2px);
}
.ft-review-stars{display:flex;gap:1px}
.ft-review-stars svg{fill:#FBBC05}

/* ═══════════ ICON MICRO-ANIMATIONS (v93) ═══════════ */
@keyframes icoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes icoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes icoTap{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-10deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
/* Why cards — gentle idle float, staggered (visible on mobile too) */
.wgrid .wc:nth-child(1) .wc-icon{animation:icoFloat 3.8s ease-in-out infinite}
.wgrid .wc:nth-child(2) .wc-icon{animation:icoFloat 3.8s ease-in-out .6s infinite}
.wgrid .wc:nth-child(3) .wc-icon{animation:icoFloat 3.8s ease-in-out 1.2s infinite}
.wgrid .wc:nth-child(4) .wc-icon{animation:icoFloat 3.8s ease-in-out .3s infinite}
.wgrid .wc:nth-child(5) .wc-icon{animation:icoFloat 3.8s ease-in-out .9s infinite}
.wgrid .wc:nth-child(6) .wc-icon{animation:icoFloat 3.8s ease-in-out 1.5s infinite}
.wc:hover .wc-icon{animation-play-state:paused}
/* NFC spotlight — pills & use-case icons breathe */
.nfc2-pill-ic svg{animation:icoPulse 3.4s ease-in-out infinite}
.nfc2-pill:nth-child(2) .nfc2-pill-ic svg{animation-delay:.45s}
.nfc2-pill:nth-child(3) .nfc2-pill-ic svg{animation-delay:.9s}
.nfc2-pill:nth-child(4) .nfc2-pill-ic svg{animation-delay:1.35s}
.nfc2-case-ic{transition:transform .3s var(--eback)}
.nfc2-case:hover .nfc2-case-ic{transform:scale(1.15)rotate(-6deg)}
/* Quote form benefit icons — soft pulse */
.qf-bicon svg{animation:icoPulse 3.6s ease-in-out infinite}
.qf-benefit:nth-child(2) .qf-bicon svg{animation-delay:.5s}
.qf-benefit:nth-child(3) .qf-bicon svg{animation-delay:1s}
/* Contact cards — icon pop on hover */
.ccard svg{transition:transform .3s var(--eback)}
.ccard:hover svg{transform:scale(1.2)rotate(-8deg)}
/* WhatsApp CTA icons — periodic "ring" wiggle to draw the eye */
.sample-btn-p svg,.btn-coral-g svg,.pcard-expand-wa svg{animation:icoTap 5s ease-in-out infinite;transform-origin:50% 50%}
/* Behind The Print CTA arrow nudge */
.bcard-cta::after{display:inline-block;transition:transform .25s var(--ease)}
.bcard:hover .bcard-cta::after{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .wc-icon,.nfc2-pill-ic svg,.qf-bicon svg,.sample-btn-p svg,.btn-coral-g svg,.pcard-expand-wa svg{animation:none!important}
}

/* ═══════════ GALLERY CAROUSEL (v92) ═══════════ */
.gcar{position:relative;margin-top:32px}
.gtrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gtrack::-webkit-scrollbar{display:none}
.gtrack .gi3{flex:0 0 280px;width:280px;height:340px;aspect-ratio:auto;scroll-snap-align:start}
/* edge fades — desktop hint that there's more */
.gcar::before,.gcar::after{content:'';position:absolute;top:6px;bottom:20px;width:36px;z-index:4;pointer-events:none;opacity:0;transition:opacity .3s}
.gcar::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.gcar::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
@media(min-width:769px){.gcar.has-left::before{opacity:1}.gcar.has-right::after{opacity:1}}
/* arrows */
.gcar-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.13);transition:border-color .25s,color .25s,opacity .3s,transform .25s var(--eback)}
[data-theme=dark] .gcar-arr{box-shadow:0 8px 26px rgba(0,0,0,.5)}
.gcar-arr:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-50%)scale(1.08)}
.gcar-arr:active{transform:translateY(-50%)scale(.94)}
.gcar-prev{left:-14px}.gcar-next{right:-14px}
.gcar-arr[disabled]{opacity:.3;pointer-events:none}
@media(max-width:768px){
  .gcar-arr{display:none}
  .gtrack{gap:10px;padding-bottom:14px}
  .gtrack .gi3{flex:0 0 240px;width:240px;height:300px}
}
/* stagger reveal inside track */
.gtrack .rv:nth-child(1){transition-delay:.05s}
.gtrack .rv:nth-child(2){transition-delay:.12s}
.gtrack .rv:nth-child(3){transition-delay:.19s}
.gtrack .rv:nth-child(4){transition-delay:.26s}
.gtrack .rv:nth-child(5){transition-delay:.33s}
.gtrack .rv:nth-child(6){transition-delay:.40s}

/* ═══════════ BUNDLES CAROUSEL — reuses .gcar/.gtrack/.gcar-arr above;
   only the card itself (.bpk) is new, since bundle content (name, list,
   tagline, CTA) must stay visible, unlike Gallery's hover-to-reveal photo tiles ═══════════ */
.gtrack .bpk{flex:0 0 280px;width:280px;height:auto;aspect-ratio:auto;scroll-snap-align:start;display:flex;flex-direction:column}
@media(max-width:768px){.gtrack .bpk{flex:0 0 240px;width:240px}}
.bpk{
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  padding:22px 20px;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s
}
.bpk:hover{transform:translateY(-4px);border-color:var(--bc,var(--indigo));box-shadow:0 14px 40px rgba(0,0,0,.1)}
[data-theme=dark] .bpk:hover{box-shadow:0 14px 40px rgba(0,0,0,.4)}
.bpk-ic{width:42px;height:42px;border-radius:12px;background:var(--bcbg,var(--id));color:var(--bc,var(--indigo));display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0}
.bpk-ic svg{width:21px;height:21px}
.bpk-name{font-size:16px;font-weight:800;color:var(--text);margin-bottom:10px;letter-spacing:-.01em;line-height:1.25}
.bpk-list{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.bpk-list li{font-size:12.5px;color:var(--ts);font-weight:500;display:flex;align-items:center;gap:7px}
.bpk-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--bc,var(--indigo));flex-shrink:0}
.bpk-tag{font-size:12.5px;font-style:italic;color:var(--ts);opacity:.85;line-height:1.5;margin-bottom:16px;flex:1}
.bpk-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--bc,var(--indigo));border:1.5px solid var(--bc,var(--indigo));padding:9px 14px;border-radius:8px;transition:background .2s,color .2s;align-self:flex-start}
.bpk-cta:hover{background:var(--bc,var(--indigo));color:#fff}

/* ============ CONTACT BLOCK v1 ============ */
@keyframes waGlow{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.35),0 8px 32px rgba(37,211,102,.18)}50%{box-shadow:0 0 0 8px rgba(37,211,102,.0),0 8px 32px rgba(37,211,102,.3)}}
.ct-section{padding:100px 24px 108px;background:var(--bg);position:relative;overflow:hidden}
.ct-section::before{content:'';position:absolute;width:700px;height:700px;top:-220px;left:-180px;border-radius:50%;background:radial-gradient(circle,rgba(37,211,102,.045) 0%,transparent 60%);pointer-events:none}
.ct-section::after{content:'';position:absolute;width:500px;height:500px;bottom:-180px;right:-100px;border-radius:50%;background:radial-gradient(circle,rgba(255,112,64,.04) 0%,transparent 60%);pointer-events:none}
.ct-grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 20%,transparent 100%)}
.ct-wrap{max-width:var(--mw);margin:0 auto;position:relative;z-index:1}
.ct-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:800px){.ct-grid{grid-template-columns:1fr 1fr;gap:80px}}
.ct-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ts);margin-bottom:22px}
.ct-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--wa);animation:pulse 2.2s ease-in-out infinite}
.ct-headline{font-size:clamp(32px,4.5vw,52px);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:var(--text);margin-bottom:18px}
.ct-headline em{font-style:normal;color:var(--coral)}
.ct-sub{font-size:clamp(15px,1.6vw,16.5px);color:var(--ts);line-height:1.68;margin-bottom:40px;max-width:400px}
.ct-trust{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:0}
.ct-trust-item{display:flex;align-items:center;gap:7px;padding:8px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:100px;font-size:12.5px;font-weight:600;color:var(--ts);transition:border-color .2s,transform .2s var(--ease)}
.ct-trust-item:hover{border-color:var(--bm);transform:translateY(-2px)}
.ct-trust-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ct-trust-icon.star{background:rgba(251,188,5,.14)}
.ct-trust-icon.pin{background:rgba(255,112,64,.12)}
.ct-trust-icon.bolt{background:rgba(37,211,102,.12)}
.ct-trust-item.google{cursor:pointer}
.ct-trust-item.google:hover{border-color:#FBBC05;box-shadow:0 0 0 3px rgba(251,188,5,.08)}
.g-stars{display:flex;gap:1px}
.g-stars svg{fill:#FBBC05}
.g-logo-text{font-size:11.5px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-right:2px}
.g-b{color:#4285F4}.g-r{color:#EA4335}.g-y{color:#FBBC05}.g-gr{color:#34A853}
.ct-ctas{display:flex;flex-direction:column;gap:14px}
.ct-wa{display:flex;align-items:center;gap:16px;padding:20px 26px;background:var(--wa);border-radius:16px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;animation:waGlow 3s ease-in-out 1.2s infinite;position:relative;overflow:hidden;text-decoration:none}
.ct-wa::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 50%);pointer-events:none}
.ct-wa:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 16px 48px rgba(37,211,102,.35);filter:brightness(1.06);animation:none}
.ct-wa:active{transform:translateY(0) scale(.99)}
.ct-wa-icon{width:48px;height:48px;background:rgba(255,255,255,.18);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ct-wa-copy{flex:1}
.ct-wa-copy strong{display:block;font-size:16px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:2px}
.ct-wa-copy span{font-size:12.5px;color:rgba(255,255,255,.75);font-weight:500}
.ct-wa-arrow{color:rgba(255,255,255,.7);transition:transform .25s var(--ease)}
.ct-wa:hover .ct-wa-arrow{transform:translateX(5px)}
.ct-email{display:flex;align-items:center;gap:14px;padding:16px 22px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:14px;cursor:pointer;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;text-decoration:none}
.ct-email:hover{transform:translateY(-2px);border-color:var(--bm);box-shadow:0 8px 24px rgba(0,0,0,.09)}
.ct-email:active{transform:translateY(0)}
.ct-email-icon{width:42px;height:42px;background:var(--cd);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ct-email-copy{flex:1}
.ct-email-copy strong{display:block;font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em;margin-bottom:1px}
.ct-email-copy span{font-size:12px;color:var(--ts)}
.ct-email-arrow{color:var(--ts);transition:transform .25s var(--ease)}
.ct-email:hover .ct-email-arrow{transform:translateX(4px)}
.ct-or{display:flex;align-items:center;gap:12px;color:var(--ts);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:4px 0}
.ct-or::before,.ct-or::after{content:'';flex:1;height:1px;background:var(--border)}
.ct-form-note{text-align:center;font-size:13px;color:var(--ts);line-height:1.5}
.ct-form-note a{color:var(--coral);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .2s}
.ct-form-note a:hover{opacity:.75}
.ct-bottom-rule{max-width:var(--mw);margin:64px auto 0;padding:0 24px;position:relative;z-index:1}
.ct-rule-line{height:1px;background:linear-gradient(90deg,transparent,var(--border) 20%,var(--border) 80%,transparent)}
/* ============ CART DRAWER + ADD-TO-CART + EXIT POPUP ============ */

.pcard-add-cart{margin-top:10px;width:100%;font-family:var(--f);font-size:13px;font-weight:700;padding:11px 16px;border-radius:8px;border:1.5px solid var(--indigo);background:transparent;color:var(--indigo);cursor:pointer;transition:background .2s,color .2s,transform .15s var(--ease)}
.pcard-add-cart:hover{background:var(--indigo);color:#fff}
.pcard-add-cart:active{transform:scale(.97)}
.pcard-add-cart.added{background:var(--green);border-color:var(--green);color:#fff}

.cart-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;background:var(--coral);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;font-family:var(--f)}
.nav-acct{position:relative}
.nav-wm{white-space:nowrap}
.nav-acct.nav-nfc{width:38px;height:38px;border-radius:10px;border:1.5px solid #8866FF;background:#120B2E;box-shadow:0 0 16px -4px #8866FF;gap:8px;color:#fff;transition:box-shadow .2s,transform .2s}
.nav-nfc svg{height:15px;width:auto;display:block;flex:none}
.nav-nfc .nfc-t{display:none;font-weight:800;font-size:13.5px;letter-spacing:.02em}
.nav-nfc:hover{box-shadow:0 0 22px -2px #8866FF;transform:translateY(-1px)}
@media(min-width:900px){.nav-acct.nav-nfc{width:auto;padding:0 15px 0 12px;border-radius:99px}.nav-nfc .nfc-t{display:inline}}
@media(max-width:480px){.nav-r{gap:6px}.btn-wa-n{font-size:0;gap:0;padding:0;width:38px;height:34px;display:inline-flex;align-items:center;justify-content:center}.btn-wa-n .wa-ic{margin:0}}
.cat-more{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:center;margin-top:30px}
.cat-more-a{font-weight:800;font-size:15px;color:#fff;text-decoration:none;padding:13px 22px;border-radius:12px;background:linear-gradient(135deg,#4527B8,#7C4DEB);box-shadow:0 8px 20px rgba(85,51,204,.26)}
.cat-more-b{font-weight:700;font-size:14.5px;color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
.acct-pop{position:absolute;top:calc(100% + 10px);right:0;width:260px;padding:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 40px rgba(20,16,50,.18);z-index:60}
.acct-pop[hidden]{display:none}
.ap-row{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:var(--text);text-decoration:none}
.ap-row:hover{background:var(--bg-alt)}
.ap-row svg{flex-shrink:0;color:var(--indigo)}
.ap-row span{display:flex;flex-direction:column;line-height:1.25}
.ap-row b{font-size:13.5px;font-weight:800}
.ap-row small{font-size:12px;color:var(--ts)}
.ap-main{background:linear-gradient(135deg,#4527B8,#7C4DEB);color:#fff}
.ap-main:hover{background:linear-gradient(135deg,#4527B8,#7C4DEB);filter:brightness(1.08)}
.ap-main svg,.ap-main small{color:#fff;opacity:.95}
@media(max-width:480px){.acct-pop{position:fixed;top:64px;right:12px;left:12px;width:auto}}

.cart-overlay{position:fixed;inset:0;background:rgba(10,10,20,.45);backdrop-filter:blur(2px);z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.cart-overlay.open{opacity:1;pointer-events:auto}

.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--bg-card);z-index:9999;box-shadow:-8px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s var(--ease)}
.cart-drawer.open{transform:translateX(0)}
.cd-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border);flex-shrink:0}
.cd-title{font-size:17px;font-weight:800;letter-spacing:-.01em}
.cd-close{width:32px;height:32px;border-radius:8px;border:none;background:var(--bg-alt);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cd-tabs{display:flex;gap:6px;background:var(--bg-alt);border-radius:10px;padding:4px;margin:16px 22px 0}
.cd-tab{flex:1;text-align:center;padding:9px;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ts);font-family:var(--f);border:none;background:transparent;transition:all .2s var(--ease)}
.cd-tab.active{background:var(--bg-card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cd-body{flex:1;overflow-y:auto;padding:18px 22px}
.cd-foot{padding:16px 22px;border-top:1px solid var(--border);flex-shrink:0}

.cd-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.cd-item:last-child{border-bottom:none}
.cd-item-name{flex:1;font-size:13.5px;font-weight:700}
.cd-item-qty{display:flex;align-items:center;gap:6px}
.cd-item-qty button{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--bg-alt);cursor:pointer;font-size:13px;line-height:1}
.cd-item-qty span{min-width:18px;text-align:center;font-size:13px;font-weight:700}
.cd-item-rm{color:var(--coral);background:none;border:none;cursor:pointer;font-size:16px;padding:2px 4px}
.cd-empty{text-align:center;padding:50px 10px;color:var(--ts);font-size:13.5px}
.cd-empty .emoji{font-size:30px;margin-bottom:10px}

.cd-quick{margin-bottom:6px}
.cd-quick-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ts);margin-bottom:10px}
.cd-quick-row{display:flex;flex-direction:column;gap:6px}
.cd-pcard{display:flex;align-items:center;gap:12px;margin:14px 22px 0;padding:12px 14px;border-radius:14px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#4527B8,#7C4DEB);box-shadow:0 6px 18px rgba(85,51,204,.28);transition:transform .2s var(--ease),box-shadow .2s}
.cd-pcard:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(85,51,204,.36)}
.cd-pcard-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.18);flex-shrink:0}
.cd-pcard-t{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.cd-pcard-t b{font-size:14px;font-weight:800}
.cd-pcard-t small{font-size:12px;opacity:.85}
.cd-pcard-go{font-size:18px;font-weight:700}
.dd-new{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:.05em;color:#fff;background:linear-gradient(135deg,#4527B8,#7C4DEB);vertical-align:2px}
.cd-quick-chip{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font-family:var(--f);font-size:14px;font-weight:700;color:var(--text);
  background:var(--bg-alt);border:1.5px solid var(--border);
  padding:12px 14px;border-radius:12px;cursor:pointer;
  transition:transform .2s var(--ease),border-color .2s,background .2s
}
.cd-quick-chip:hover{border-color:var(--indigo);background:var(--bg-card);transform:translateY(-1px)}
.cd-quick-ic{font-size:16px;line-height:1;width:22px;text-align:center}
.cd-steps{display:flex;gap:6px;list-style:none;margin:0 0 16px;padding:0}
.cd-steps li{flex:1;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ts);padding:8px 10px;border-radius:10px;background:var(--bg-alt)}
.cd-steps li b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bm);color:#fff;font-size:11px;flex-shrink:0}
.cd-steps li.on{color:var(--text);background:var(--id)}.cd-steps li.on b{background:var(--indigo)}
.cd-item2{display:flex;gap:12px;padding:14px;margin-bottom:10px;border:1.5px solid var(--border);border-radius:14px;background:var(--bg-card)}
.cd-thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg-alt)}
.cd-imain{flex:1;min-width:0}
.cd-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cd-chip{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--bg-alt);color:var(--text)}
.cd-chip i{font-style:normal;color:var(--ts);font-weight:500}
.cd-inote{font-size:12px;color:var(--ts);margin-top:6px}
.cd-irow{display:flex;align-items:center;gap:12px;margin-top:10px}
.cd-irow .cd-item-rm{margin-left:auto;font-size:12px;font-weight:700;color:var(--ts)}
.cd-cfg{font-size:12.5px;font-weight:700;color:var(--indigo);text-decoration:none}
.cd-cfg:hover{text-decoration:underline}
.cd-sug{display:flex;flex-direction:column;gap:8px}
.cd-sg{display:flex;align-items:center;gap:11px;width:100%;text-align:left;text-decoration:none;color:var(--text);font-family:var(--f);padding:8px 10px;border:1.5px dashed var(--bm);border-radius:12px;background:transparent;cursor:pointer}
.cd-sg:hover{border-color:var(--indigo);background:var(--id)}
.cd-sg img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.cd-sg span{display:flex;flex-direction:column;flex:1;line-height:1.25}.cd-sg b{font-size:13.5px}.cd-sg small{font-size:12px;color:var(--ts)}
.cd-sg em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--indigo)}
.cd-allp{display:block;text-align:center;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--indigo)}
.cd-perks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:12px;font-weight:600;color:var(--ts)}
.cd-wa{display:flex;align-items:center;justify-content:center;margin-top:8px;padding:12px;border-radius:12px;background:var(--wa);color:#06260f;font-weight:800;font-size:14px;text-decoration:none}
.cd-quick-login{margin-top:6px;padding-top:18px;border-top:1px solid var(--border)}

.cd-label{display:block;font-size:12px;font-weight:700;color:var(--ts);margin:14px 0 6px}
.cd-label:first-child{margin-top:0}
.cd-input{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:9px;font-family:var(--f);font-size:13.5px;background:var(--bg-card);color:var(--text)}
.cd-input:focus{outline:none;border-color:var(--indigo)}
.cd-textarea{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:9px;font-family:var(--f);font-size:13.5px;resize:vertical;min-height:64px;background:var(--bg-card);color:var(--text)}
.cd-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--indigo);color:#fff;font-family:var(--f);font-size:14px;font-weight:700;padding:13px;border-radius:9px;border:none;cursor:pointer;transition:transform .2s var(--ease),opacity .2s}
.cd-btn:hover{transform:translateY(-1px)}
.cd-btn:disabled{opacity:.55;cursor:default;transform:none}
.cd-btn.ghost{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.cd-switch{text-align:center;font-size:12.5px;color:var(--ts);margin-top:12px}
.cd-switch a{color:var(--indigo);font-weight:700;cursor:pointer}
.cd-err{background:rgba(245,90,40,.09);color:var(--coral);font-size:12.5px;font-weight:600;padding:9px 12px;border-radius:8px;margin-top:12px;display:none}

.cd-order{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.cd-order-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cd-order-id{font-weight:800;font-size:13.5px}
.cd-status{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:20px}
.cd-status.requested{background:rgba(42,159,214,.12);color:var(--blue)}
.cd-status.quoted,.cd-status.invoiced{background:rgba(245,166,35,.15);color:#a8720b}
.cd-status.paid,.cd-status.completed{background:rgba(61,184,90,.13);color:#1f8a3d}
.cd-status.in_production,.cd-status.shipped{background:rgba(85,51,204,.12);color:var(--indigo)}
.cd-status.cancelled{background:rgba(0,0,0,.06);color:var(--ts)}
.cd-order-items{margin-top:8px;font-size:12.5px;color:var(--ts)}
.cd-order-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.cd-order-amt{font-weight:800;font-size:13px}
.cd-pay-btn{background:var(--indigo);color:#fff;font-family:var(--f);font-size:12px;font-weight:700;padding:7px 14px;border-radius:7px;border:none;cursor:pointer}

@media (max-width:480px){.cart-drawer{width:100vw}}

/* Exit-intent / timed offer popup — NEON + pixel rain */
.xp-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,43,214,.16),rgba(6,3,20,.86) 62%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:9997;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.xp-overlay.open{opacity:1;pointer-events:auto}
.xp-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,92vw);background:#0a0620;border-radius:22px;z-index:9998;padding:0;opacity:0;pointer-events:none;overflow:hidden;color:#fff;
  box-shadow:0 0 0 1.5px #ff2bd6,0 0 22px rgba(255,43,214,.65),0 0 60px rgba(255,43,214,.28),0 0 90px rgba(0,229,255,.22),inset 0 0 30px rgba(0,229,255,.10);transition:opacity .2s linear}
.xp-card.open{opacity:1;pointer-events:auto}
.xp-card::before{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(0,229,255,.06) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(255,43,214,.06) 1px,transparent 1px) 0 0/22px 22px;pointer-events:none}
.xp-top,.xp-body{position:relative;opacity:0;transform:translateY(8px);transition:opacity .5s ease .05s,transform .5s ease .05s}
.xp-card.ready .xp-top,.xp-card.ready .xp-body{opacity:1;transform:none}
.xp-top{padding:30px 26px 38px;background:linear-gradient(160deg,rgba(255,43,214,.20),rgba(0,229,255,.08) 70%,transparent)}
.xp-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:9px;border:1px solid rgba(0,229,255,.7);background:rgba(0,229,255,.08);color:#7df3ff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 0 10px rgba(0,229,255,.45)}
.xp-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7df3ff;border:1px solid rgba(0,229,255,.7);padding:5px 12px;border-radius:20px;margin-bottom:14px;text-shadow:0 0 8px rgba(0,229,255,.9);box-shadow:0 0 12px rgba(0,229,255,.35),inset 0 0 10px rgba(0,229,255,.15)}
.xp-h{font-size:30px;font-weight:800;letter-spacing:-.01em;line-height:1.1;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.7),0 0 18px rgba(255,43,214,.85),0 0 42px rgba(255,43,214,.55)}
.xp-h em{font-style:normal;color:#ff6be6;text-shadow:0 0 8px #ff2bd6,0 0 22px #ff2bd6,0 0 50px #ff2bd6;animation:xpFlick 3.2s infinite}
@keyframes xpFlick{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}
.xp-tag{position:absolute;right:22px;bottom:-22px;width:58px;height:58px;border-radius:14px;background:#0a0620;border:1.5px solid #00e5ff;display:flex;align-items:center;justify-content:center;font-size:25px;transform:rotate(-8deg);box-shadow:0 0 16px rgba(0,229,255,.8),inset 0 0 12px rgba(0,229,255,.35)}
.xp-body{padding:34px 26px 26px}
.xp-sub{font-size:13.5px;color:#cfd2ff;line-height:1.55;margin-bottom:14px}
.xp-trust{display:flex;align-items:center;gap:5px;font-size:12px;color:#ffd24d;letter-spacing:.01em;margin-bottom:18px;text-shadow:0 0 8px rgba(255,210,77,.5)}
.xp-trust b{color:#fff;font-weight:800}
.xp-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#25D366;color:#04210f;font-family:var(--f);font-size:14px;font-weight:800;padding:14px;border-radius:12px;text-decoration:none;box-shadow:0 0 0 1px #6dffa6,0 0 20px rgba(37,211,102,.7),0 0 46px rgba(37,211,102,.35);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.xp-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #9dffc4,0 0 28px rgba(37,211,102,.9),0 0 60px rgba(37,211,102,.5)}
.xp-skip{text-align:center;font-size:12px;color:#8b8fc7;margin-top:13px;cursor:pointer}
/* pixel rain layer */
.xp-pix{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.xp-pix i{position:absolute;display:block;opacity:0;will-change:transform,opacity}
.xp-card.open .xp-pix i{animation:xpDrop .62s cubic-bezier(.3,.7,.4,1) var(--d) both,xpGone .45s ease calc(var(--d) + 1.05s) forwards}
@keyframes xpDrop{0%{opacity:1;transform:translateY(var(--from))}70%{opacity:1;transform:translateY(0)}84%{transform:translateY(-5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes xpGone{to{opacity:0;transform:scale(.4)}}
.xp-fall{position:fixed;z-index:9999;pointer-events:none;width:8px;height:8px;opacity:0;animation:xpFall var(--t) linear var(--d) forwards}
@keyframes xpFall{0%{opacity:0;transform:translateY(-10vh)}10%{opacity:1}100%{opacity:0;transform:translateY(105vh) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.xp-pix,.xp-fall{display:none}.xp-card .xp-top,.xp-card .xp-body{opacity:1;transform:none;transition:none}}

/* Mobile: bottom-sheet style instead of centered modal */
@media (max-width:640px){
  .xp-card{left:0;right:0;top:auto;bottom:0;width:100%;transform:none;border-radius:22px 22px 0 0}
  .xp-card.open{transform:none}
}


/* bundles: photo keeps its 4:3 shape */
.gtrack .bpk .bpk-img{aspect-ratio:4/3;border-radius:12px;overflow:hidden;margin:0 0 16px;flex:0 0 auto;background:var(--bg-alt)}
.gtrack .bpk .bpk-img img{width:100%;height:100%;object-fit:cover;display:block}
/* NFC section: photo fills the whole visual box */
@keyframes nfc2Zoom{0%{transform:scale(1)}100%{transform:scale(1.045)}}
.nfc2-img-box{padding:0;min-height:0;aspect-ratio:16/10}
.nfc2-img-box .nfc2-product-img{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;filter:none;animation:nfc2Zoom 9s ease-in-out infinite alternate}
.nfc2-img-box::before{z-index:3;opacity:.35}
.nfc2-img-box::after{z-index:3}
@media(prefers-reduced-motion:reduce){.nfc2-img-box .nfc2-product-img{animation:none}}

.pcx{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.pcx-ey{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);background:var(--id,rgba(85,51,204,.09));padding:7px 13px;border-radius:99px}
.pcx h2{font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:16px 0 14px}
.pcx h2 em{font-style:normal;background:linear-gradient(90deg,var(--indigo),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.pcx p.sub{font-size:17px;line-height:1.6;color:var(--ts);max-width:540px}
.pcx ul{margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;max-width:560px}
.pcx li{display:flex;gap:10px;font-size:14.5px;color:var(--text);font-weight:600;align-items:flex-start}
.pcx li:before{content:"✓";color:var(--green);font-weight:800}
.pcx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.pcx-cta a{padding:14px 24px;border-radius:12px;font-weight:700;font-size:15px;transition:transform .2s var(--ease)}
.pcx-cta a:hover{transform:translateY(-2px)}
.pcx-cta .p{background:linear-gradient(135deg,var(--indigo),var(--magenta));color:#fff}
.pcx-cta .g{border:1.5px solid var(--border);background:var(--bg-card)}
.pcx-note{margin-top:14px;font-size:13px;color:var(--ts)}
.pcx-ph{width:min(290px,78vw);margin:0 auto;border-radius:36px;border:8px solid #14142a;background:#14142a;overflow:hidden;box-shadow:0 30px 70px -26px rgba(30,20,90,.55);transform:rotate(2deg)}
.pcx-ph img{width:100%;height:auto;display:block;border-radius:2px}
@media(max-width:860px){.pcx{grid-template-columns:1fr;gap:34px}.pcx ul{grid-template-columns:1fr}}

/* cursor trail only: no background grid; pixels exist only where the pointer has just been */
.pp-bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;display:block}
