/* ===== Cosmic hero (homepage) — vx- prefixed port of index.html =====
   The desktop composition is authored at a fixed 1172x657 design canvas;
   every element is absolutely positioned in raw design pixels and the whole
   canvas is scaled by ONE transform. Optical centre of centred elements: x=586. */

[class^="vx-"],[class*=" vx-"],[class^="vx-"]::before,[class^="vx-"]::after,
[class*=" vx-"]::before,[class*=" vx-"]::after,[class^="vx-"] *,[class*=" vx-"] *{box-sizing:border-box}

.vx-stage{position:relative;overflow:hidden;background:#020204;
  height:calc(100vh - var(--vx-hdr,120px));
  height:calc(100svh - var(--vx-hdr,120px));min-height:520px}
.vx-canvas{position:absolute;left:50%;top:0;width:1172px;height:657px;
  transform:translateX(-50%) scale(var(--k,1));transform-origin:50% 0}
.vx-canvas>*{position:absolute}
.vx-stack{position:absolute;inset:0;z-index:300}
.vx-stack>*{position:absolute}

.vx-bg{position:absolute;inset:0;
  background:
   linear-gradient(180deg, rgba(25,127,255,0) 38%, rgba(25,127,255,.042) 54%,
     rgba(25,127,255,.052) 68%, rgba(25,127,255,.030) 100%),
   #020204}
.vx-stars{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;background:#fff}

/* ===== PIXEL CONTRACT A — THE BADGE ===== */
.vx-badge{left:462px;top:95px;width:250px;height:39px;border-radius:12px;z-index:300;
  border:1px solid rgba(255,255,255,.115);
  background:linear-gradient(to top,
    rgba(190,225,255,.175) 0px, rgba(190,225,255,.128) 2px, rgba(190,225,255,.075) 4px,
    rgba(190,225,255,.026) 6px, rgba(255,255,255,.012) 9px, rgba(255,255,255,.012) 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.vx-badge i{position:absolute;left:4px;top:4px;width:29px;height:29px;border-radius:8px;
  display:grid;place-items:center;font-style:normal;
  background:linear-gradient(to top,
    #46afc8 0px, #35abc7 2px, #0b859d 4px, #026c84 6px, #004e66 8px,
    #053f58 10px, #012c3d 12px, #031a2a 14px, #061125 16px, #090f25 19px,
    #090c1c 23px, #060d16 29px);
  box-shadow:inset 1px 0 0 rgba(150,220,250,.40),
    inset -1px 0 0 rgba(150,220,250,.52),
    0 0 6px rgba(60,190,230,.20), 0 3px 8px -5px rgba(90,220,255,.6)}
.vx-badge i svg{width:14px;height:16px;position:relative;top:-1px;left:0px}
.vx-badge b{position:absolute;left:45px;transform-origin:0 50%;top:0;height:39px;
  display:flex;align-items:center;
  font-size:13px;font-weight:400;color:rgba(255,255,255,.94);white-space:nowrap;
  padding-top:1.5px}

/* ===== PIXEL CONTRACT B — THE GLOW BUTTON ===== */
.vx-btn{display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;
  /* bloom is a fixed ~18px bank of light at the foot, sampled row by row */
  background:linear-gradient(to top,
    #9ad9ec 1px, #89dff0 2px, #79e0f1 3px, #61daef 4px, #3ec8e4 5px,
    #14a8c6 6px, #0596b3 7px, #038aa8 8px, #047796 9px, #006180 10px,
    #025066 12px, #0a4f5e 13px, #04465a 14px, #073746 16px,
    #0a2a37 18px, #0d212e 20px, #0f1824 24px, #0a121e 30px,
    #0a111d 34px, #0a111d 100%);
  box-shadow:
    inset 0 3px 3px -2px rgba(180,228,255,.10),
    inset 1px 0 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(255,255,255,.09),
    var(--hair,0 1px 0 rgba(152,218,234,.38)),
    1px 0 0 rgba(152,218,234,.17), -1px 0 0 rgba(152,218,234,.17),
    0 0 8px rgba(60,190,235,.10),
    0 2px 5px -3px rgba(90,220,255,.45);
  transition:transform .25s,box-shadow .25s,filter .25s}
.vx-btn::before{content:"";position:absolute;left:22%;right:38%;top:0.8px;height:1.9px;z-index:1;
  filter:blur(.55px);
  background:linear-gradient(90deg,rgba(120,225,255,0) 0%,rgba(120,225,255,.58) 34%,
    rgba(160,240,255,.74) 50%,rgba(120,225,255,.58) 66%,rgba(120,225,255,0) 100%)}
.vx-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(200,245,255,.70),rgba(200,245,255,0) 13px),
             linear-gradient(270deg,rgba(200,245,255,.70),rgba(200,245,255,0) 13px);
  -webkit-mask:linear-gradient(to top,#000 0,#000 6px,rgba(0,0,0,.40) 12px,
    rgba(0,0,0,.15) 18px,rgba(0,0,0,.09) 24px,rgba(0,0,0,.02) 30px,rgba(0,0,0,.02) 100%);
          mask:linear-gradient(to top,#000 0,#000 6px,rgba(0,0,0,.40) 12px,
    rgba(0,0,0,.15) 18px,rgba(0,0,0,.09) 24px,rgba(0,0,0,.02) 30px,rgba(0,0,0,.02) 100%)}
.vx-btn span{position:relative;z-index:2;display:block;line-height:1;
  text-shadow:0 1px 2px rgba(0,20,30,.5)}
.vx-btn:hover{transform:translateY(-1px);filter:brightness(1.12);
  box-shadow:inset 0 1px 0 rgba(200,245,255,.6),inset 1px 0 0 rgba(170,225,255,.35),
             inset -1px 0 0 rgba(170,225,255,.35),0 6px 22px rgba(20,180,225,.55)}
.vx-cta2{position:absolute;left:526px;top:349px;width:121px;height:54.5px;
  --hair:0 0 0 transparent;border-radius:13px;font-size:17px;font-weight:500;
  letter-spacing:-.01em;z-index:300}
.vx-cta2::before{display:none}    /* the HERO button has no top streak */
.vx-cta2 span{margin-top:0}

/* ===== HERO TYPE ===== */
.vx-h1{left:586px;transform:translateX(-50%);white-space:nowrap;line-height:1;
  font-family:Poppins;font-weight:900;font-size:54px;letter-spacing:-.004em;
  word-spacing:.175em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 34px rgba(130,180,255,.22);z-index:300}
.vx-brand{left:586px;transform:translateX(-50%);white-space:nowrap;line-height:1;
  font-family:Poppins;font-weight:800;font-size:15px;letter-spacing:.3em;
  text-transform:uppercase;z-index:300;
  background:linear-gradient(90deg,#e8c96a,#22c8ee);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vx-sub{left:586px;transform:translateX(-50%);white-space:nowrap;line-height:1;
  font-size:13.2px;color:#a9aeb5;z-index:300}
.vx-sub b{font-weight:600;color:#fff}
.vx-nb{white-space:nowrap}

/* ===== THE CAROUSEL — a true 3D perspective ring ===== */
.vx-showcase{position:absolute;left:0;top:0;width:1172px;height:0}
.vx-ring{position:absolute;left:0;top:0;width:1172px;height:657px;z-index:5;
  perspective:891px;perspective-origin:586px 918px;transform-style:preserve-3d;
  pointer-events:none}
.vx-card{position:absolute;left:586px;top:616px;width:130px;height:300px;
  margin:-150px 0 0 -65px;border-radius:12px;overflow:hidden;background:#0d1117;
  box-shadow:0 24px 46px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.5);
  backface-visibility:hidden;will-change:transform}
.vx-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-card .vx-edge{position:absolute;inset:0;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),
             inset 0 16px 30px rgba(255,255,255,.05)}
.vx-card.vx-broken img{display:none}
.vx-cv{position:absolute;left:0;right:0;padding:0 10px}
.vx-fill{position:absolute;inset:0}
.vx-ph{position:absolute;left:0;right:0;overflow:hidden;
  background:linear-gradient(155deg,#2b3b50,#131c28 60%,#1d1526)}   /* fallback */
.vx-phf{top:0;bottom:0}
.vx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-dot{display:inline-block;width:4.5px;height:4.5px;background:#e5202f;
  margin-right:4px;transform:rotate(45deg) translateY(-1px)}
.vx-dot.vx-sq{transform:none;width:6.5px;height:4.5px;border-radius:1px}
.vx-t-big{font-family:Poppins;font-weight:900;text-transform:uppercase;line-height:.96;
  letter-spacing:-.015em;white-space:nowrap;transform:scaleX(.875);
  transform-origin:left center}
.vx-t-serif{font-family:"Playfair Display",serif;line-height:1.02;letter-spacing:.01em;
  white-space:nowrap}

/* ===== THE BROWSER MOCK — in FRONT of the ring, bleeding off the bottom ===== */
.vx-browser{position:absolute;left:165px;top:558px;width:842px;
  height:calc(99px + var(--fill,0px));   /* --fill is set by JS */
  border-radius:28px 28px 0 0;overflow:hidden;z-index:100;
  box-shadow:0 -14px 44px rgba(0,0,0,.55)}
.vx-browser::before{content:"";position:absolute;left:0;right:0;top:42px;bottom:0;
  background:rgba(20,20,26,.82);z-index:0}
.vx-bar{position:absolute;left:0;top:0;width:100%;height:42px;
  background:linear-gradient(180deg,rgba(20,24,48,.48),rgba(15,19,38,.58));
  -webkit-backdrop-filter:blur(6px) saturate(112%);backdrop-filter:blur(6px) saturate(112%)}
.vx-dots{position:absolute;left:27px;top:16px;display:flex;gap:2.6px}
.vx-dots i{width:7.6px;height:7.6px;border-radius:50%}
.vx-omni{position:absolute;left:246px;top:7px;width:336px;height:26px;border-radius:5px;
  background:rgba(9,13,26,.93);box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
  display:flex;align-items:center;justify-content:center;gap:6px}
.vx-omni svg{width:9px;height:9px;opacity:.72}
.vx-omni span{font-size:9.5px;color:rgba(255,255,255,.72);letter-spacing:.005em}
.vx-tools{position:absolute;right:27px;top:14px;display:flex;align-items:center;gap:4px;
  opacity:.9}
.vx-tools svg{width:11px;height:12px}
.vx-page{position:absolute;left:7px;right:6px;top:42px;bottom:0;background:#fff;
  color:#111;overflow:hidden;border-radius:10px 10px 0 0}
.vx-ann{position:absolute;left:0;top:0;width:100%;height:16px;background:#101210;
  display:grid;place-items:center;border-radius:10px 10px 0 0}
.vx-ann span{font-size:5px;letter-spacing:.06em;color:#cfcfcf}
.vx-ann u{position:absolute;font-size:6px;color:#9a9a9a;text-decoration:none}
.vx-shoplogo{position:absolute;left:50%;transform:translateX(-50%);top:24px;text-align:center}
.vx-shoplogo em{font-family:"Playfair Display",serif;font-style:normal;font-weight:600;
  font-size:15px;letter-spacing:.14em;line-height:1;display:inline-block;padding-left:.14em;
  background:linear-gradient(90deg,#0a2a4a 0%,#0a86d8 55%,#22c8ee 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vx-shoplogo i{font-style:normal;font-size:5px;letter-spacing:.3em;color:#3a3a3a;
  margin-top:3px;display:block}
.vx-shopicons{position:absolute;right:100px;top:33px;display:flex;gap:5px;opacity:.85}
.vx-shopicons svg{width:7px;height:7px}
.vx-pagebody{position:absolute;left:0;right:0;top:62px;bottom:0;background:#fff;overflow:hidden}
.vx-pghero{position:relative;margin:0 26px;height:158px;border-radius:7px;overflow:hidden;
  background:linear-gradient(120deg,#e8dcd4,#cbb6a8)}
.vx-pghero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-pghero .vx-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,20,16,.62) 0%,rgba(28,20,16,.30) 46%,rgba(28,20,16,0) 72%)}
.vx-pghero .vx-copy{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:#fff}
.vx-pghero .vx-copy u{font-size:4.6px;letter-spacing:.26em;text-transform:uppercase;
  opacity:.9;display:block;text-decoration:none}
.vx-pghero .vx-copy em{font-family:"Playfair Display",serif;font-style:normal;font-weight:600;
  font-size:15px;line-height:1.12;margin-top:6px;display:block}
.vx-pghero .vx-copy i{display:inline-block;font-style:normal;margin-top:10px;padding:5px 13px;
  border-radius:20px;background:#fff;color:#17181c;font-size:5.2px;font-weight:600;
  letter-spacing:.06em}
.vx-pgsec{display:flex;align-items:baseline;justify-content:space-between;margin:16px 26px 9px}
.vx-pgsec b{font-family:"Playfair Display",serif;font-weight:600;font-size:9px;color:#17181c}
.vx-pgsec u{font-size:4.6px;letter-spacing:.14em;color:#8a8a8a;text-transform:uppercase;
  text-decoration:none}
.vx-pggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 26px}
.vx-pgcard .vx-ph{position:relative;height:0;padding-bottom:104%;border-radius:6px;
  overflow:hidden;background:linear-gradient(150deg,#efe7e1,#ddcfc6)}
.vx-pgcard .vx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-pgcard .vx-tag{position:absolute;left:6px;top:6px;padding:2px 5px;border-radius:3px;
  background:#17181c;color:#fff;font-size:3.8px;font-weight:600;letter-spacing:.1em}
.vx-pgcard b{display:block;margin-top:6px;font-size:5.4px;font-weight:600;color:#17181c;
  letter-spacing:.01em}
.vx-pgcard i{display:block;font-style:normal;margin-top:2px;font-size:4.6px;color:#8a8a8a}
.vx-pgcard s{display:block;margin-top:3px;font-size:5.6px;font-weight:700;color:#17181c;
  text-decoration:none}
.vx-pgcard s span{font-weight:400;color:#a08f86;text-decoration:line-through;
  margin-left:4px;font-size:4.6px}
.vx-pgstrip{display:flex;justify-content:space-between;margin:16px 26px 0;padding:9px 0;
  border-top:1px solid #eee6e0;border-bottom:1px solid #eee6e0}
.vx-pgstrip span{font-size:4.4px;letter-spacing:.12em;color:#7d7169;text-transform:uppercase}

/* ===== FLOATING WHATSAPP BUTTON ===== */
.vx-wa{position:fixed;right:16px;bottom:92px;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;z-index:900;
  box-shadow:0 8px 20px rgba(0,0,0,.5)}
.vx-wa svg{width:31px;height:31px}
.vx-wa::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.5);animation:vxPulse 2.8s ease-out infinite}
@keyframes vxPulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.4);opacity:0}
  100%{opacity:0}}

/* ===== ENTRANCE RESTING STATES — individual translate/scale/clip-path properties,
   NOT transform, because transform is owned by the pixel-fitter and the ring loop ===== */
html.vx-intro .vx-badge{opacity:0;translate:0 11px;scale:.985}
.vx-ch{display:inline-block}
html.vx-intro .vx-ch{opacity:0;translate:0 12px}
html.vx-intro .vx-sub{opacity:0;translate:0 10px}
html.vx-intro .vx-cta2{opacity:0;translate:0 13px;scale:.985}
html.vx-intro .vx-ring{opacity:0;translate:0 18px;scale:.99}
html.vx-intro .vx-browser{opacity:0;translate:0 26px}
html.vx-intro .vx-wa{opacity:0;scale:.88}

/* ===== TABLET 701–1080px ===== */
@media (min-width:701px) and (max-width:1080px){
  .vx-badge{left:448px;width:277px}
  .vx-stack{transform:translateY(var(--stshift,0px))}
  .vx-showcase{transform:translateY(var(--sshift,0px))}
  .vx-ring{transform:scale(var(--rs,1));transform-origin:586px 595px}
  .vx-wa{width:58px;height:58px;right:22px;bottom:26px}
  .vx-wa svg{width:32px;height:32px}
}

/* ===== PHONE <=700px : a genuine flow column ===== */
@media (max-width:700px){
  .vx-stage{height:auto;min-height:calc(100svh - var(--vx-hdr,90px))}
  .vx-canvas{position:relative;left:auto;top:auto;width:100%;height:100%;transform:none;
    display:flex;flex-direction:column;align-items:center;padding:0 20px;min-height:inherit}
  .vx-canvas>*{position:static}
  .vx-stack{display:contents}
  /* the badge becomes auto-width, but the tile stays pinned left and the label
     stays to its RIGHT via padding - it must still never overlap the tile */
  .vx-badge{position:relative;left:auto;top:auto;margin-top:clamp(16px,2.6vh,26px);
    width:auto;max-width:100%;height:36px;flex:0 0 auto;border-radius:18px}
  .vx-badge b{position:relative;left:auto;top:auto;height:36px;padding:0 15px 0 42px;
    font-size:12.5px}
  .vx-badge i{top:4px;left:4px;width:28px;height:28px}
  .vx-badge i svg{width:13px;height:19px}
  /* 7.4em sits between the width of UNLOCK YOUR and UNLOCK YOUR COSMIC, so the
     line break always lands balanced instead of orphaning words */
  .vx-h1{position:relative;left:auto;top:auto;transform:none;white-space:normal;
    text-align:center;font-size:clamp(29px,8.4vw,36px);line-height:1.06;
    letter-spacing:-.01em;max-width:7.4em}
  .vx-h1.vx-l1{margin-top:clamp(12px,2.2vh,20px)}
  .vx-brand{position:relative;left:auto;top:auto;transform:none;text-align:center;
    font-size:clamp(13px,3.6vw,15px);letter-spacing:.28em;
    margin-top:clamp(6px,1.2vh,10px)}
  .vx-sub{position:relative;left:auto;top:auto;transform:none;white-space:normal;
    text-align:center;font-size:clamp(14px,3.9vw,15.5px);line-height:1.5;max-width:340px}
  .vx-sub.vx-s1{margin-top:clamp(10px,1.8vh,16px)}
  .vx-cta2{position:relative;left:auto;top:auto;margin-top:clamp(16px,2.6vh,26px);
    flex:0 0 auto;width:auto;min-width:158px;height:52px;padding:0 26px;font-size:16px}
  .vx-showcase{position:relative;left:auto;top:auto;flex:1 1 auto;width:100%;height:auto;
    min-height:224px}
  /* the ring keeps its full 1172x657 3D geometry, just repositioned and clipped */
  .vx-ring{position:absolute;left:50%;margin-left:-586px;top:-446px;bottom:auto;
    width:1172px;height:657px;transform-origin:586px 466px;transform:scale(1.02)}
  .vx-browser{position:absolute;left:50%;transform:translateX(-50%);top:212px;bottom:0;
    width:calc(100% + 40px);height:auto;border-radius:22px 22px 0 0}
  .vx-browser .vx-bar{height:36px}
  .vx-omni{left:50%;transform:translateX(-50%);width:58%;height:24px;top:6px}
  .vx-omni span{font-size:9px}
  .vx-dots{top:14px}
  .vx-tools{display:none}
  .vx-ann{height:15px}
  .vx-ann span{font-size:6px}
  .vx-page{top:36px}
  /* the mock is now nearly full-bleed, so the store front reads as a real UI
     rather than a miniature: two-up products and legible type */
  .vx-pagebody{top:56px}
  .vx-pghero{margin:0 18px;height:122px;border-radius:10px}
  .vx-pghero .vx-copy{left:18px}
  .vx-pghero .vx-copy u{font-size:7.5px;letter-spacing:.2em}
  .vx-pghero .vx-copy em{font-size:20px;margin-top:5px}
  .vx-pghero .vx-copy i{font-size:8.5px;padding:6px 13px;margin-top:8px}
  .vx-pgsec{margin:16px 18px 10px}
  .vx-pgsec b{font-size:14px}
  .vx-pgsec u{font-size:8px}
  .vx-pggrid{grid-template-columns:repeat(2,1fr);gap:14px;margin:0 18px}
  .vx-pgcard .vx-ph{border-radius:9px}
  .vx-pgcard .vx-tag{font-size:7px;padding:3px 7px;border-radius:4px}
  .vx-pgcard b{font-size:10.5px;margin-top:7px}
  .vx-pgcard i{font-size:8.5px}
  .vx-pgcard s{font-size:11.5px;margin-top:4px}
  .vx-pgcard s span{font-size:8.5px}
  .vx-pgstrip{margin:16px 18px 0;flex-wrap:wrap;gap:5px 16px}
  .vx-pgstrip span{font-size:8px}
  .vx-wa{width:54px;height:54px;right:14px;bottom:16px}
  .vx-wa svg{width:29px;height:29px}
}

@media (prefers-reduced-motion:reduce){
  .vx-wa::after{animation:none}
  html.vx-intro .vx-badge,html.vx-intro .vx-h1,html.vx-intro .vx-ch,html.vx-intro .vx-sub,
  html.vx-intro .vx-cta2,html.vx-intro .vx-ring,html.vx-intro .vx-browser,
  html.vx-intro .vx-wa{opacity:1;translate:none;scale:none;clip-path:none}
}