/* =====================================================================
   VERTEX SHOPS — style.css
   Built by Sortup.dev
   ===================================================================== */

/* §0 GLOBAL RESET & SHELL */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#020204}
body{font-family:Poppins,Inter,system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

/* =====================================================================
   §1 CORE ARCHITECTURE
   ===================================================================== */
.stage{position:fixed;inset:0;overflow:hidden;background:#020204}
.canvas{
  position:absolute;left:50%;top:0;
  width:1172px;height:657px;
  transform:translateX(-50%) scale(var(--k,1));
  transform-origin:50% 0
}
.canvas>*{position:absolute}
.stack{position:absolute;inset:0;z-index:300}
.stack>*{position:absolute}
.navmenu{display:contents}
.burger{display:none}

.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
}

/* Starfield */
.stars{
  position:absolute;left:0;top:0;
  width:1px;height:1px;
  border-radius:50%;background:#fff
}

/* =====================================================================
   §4 NAV PILL
   ===================================================================== */
.nav{
  position:absolute;left:247px;top:3px;width:678px;height:64px;
  border-radius:32px;z-index:400;
  background:rgba(255,255,255,.008);
  border:1px solid rgba(255,255,255,.105);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)
}

.mark{position:absolute;left:21px;top:19px;width:24px;height:24px}

.wm{position:absolute;left:50px;top:0;white-space:nowrap}
.wm .kick{
  position:absolute;left:3px;top:20px;
  font-size:4.4px;font-weight:600;
  letter-spacing:.10em;color:#fff;opacity:.92;line-height:1
}
.wm .name{
  position:absolute;left:0;top:26px;
  transform-origin:0 50%;
  font-family:Poppins;font-weight:900;font-size:22px;
  line-height:1;letter-spacing:-.01em;color:#fff
}

.links{
  position:absolute;left:156px;top:0;height:62px;
  transform-origin:0 50%;
  display:flex;align-items:center;gap:24px
}
.links a{
  font-size:12.5px;font-weight:400;
  color:rgba(255,255,255,.92);
  white-space:nowrap;transition:opacity .25s
}
.links a:hover{opacity:.65}

/* =====================================================================
   §3 PIXEL CONTRACT B — GLOW BUTTON
   ===================================================================== */
.btn{
  display:grid;place-items:center;
  color:#fff;position:relative;overflow:hidden;
  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
}

/* top streak — nav button only */
.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%)
}

/* masked side edge light */
.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%)
}

.btn span{
  position:relative;z-index:2;
  display:block;line-height:1;
  text-shadow:0 1px 2px rgba(0,20,30,.5)
}

.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)
}

/* Instance A — nav CTA */
.nav .btn{
  position:absolute;left:530.7px;top:10.5px;
  width:125.5px;height:39.5px;
  border-radius:14px;font-size:14px;
  font-weight:500;letter-spacing:-.005em
}
.nav .btn span{margin-top:0}

/* Instance B — hero CTA */
.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
}
.cta2::before{display:none}   /* hero button has NO top streak */
.cta2 span{margin-top:0}

/* =====================================================================
   §2 PIXEL CONTRACT A — THE BADGE
   ===================================================================== */
.badge{
  position:absolute;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)
}

.badge i{
  position:absolute;left:4px;top:4px;
  width:29px;height:29px;border-radius:8px;
  display:grid;place-items:center;
  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)
}

.badge i svg{
  width:14px;height:16px;
  position:relative;top:-1px;left:0
}

.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
}

/* =====================================================================
   §5 HERO TYPE
   ===================================================================== */
.h1{
  position:absolute;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
}
.sub{
  position:absolute;left:586px;
  transform:translateX(-50%);
  white-space:nowrap;line-height:1;
  font-size:13.2px;color:#a9aeb5;z-index:300
}
.sub b{font-weight:600;color:#fff}
.nb{white-space:nowrap}

/* =====================================================================
   §6 CAROUSEL / RING
   ===================================================================== */
.showcase{
  position:absolute;left:0;top:0;
  width:1172px;height:0
}
.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
}
.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
}
.card img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover
}
.card .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)
}
.card.broken img{display:none}

/* Card creative sub-classes */
.cv{position:absolute;left:0;right:0;padding:0 10px}
.fill{position:absolute;inset:0}
.ph{
  position:absolute;left:0;right:0;overflow:hidden;
  background:linear-gradient(155deg,#2b3b50,#131c28 60%,#1d1526)
}
.phf{top:0;bottom:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dot{
  display:inline-block;width:4.5px;height:4.5px;
  background:#e5202f;margin-right:4px;
  transform:rotate(45deg) translateY(-1px)
}
.dot.sq{transform:none;width:6.5px;height:4.5px;border-radius:1px}
.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
}
.t-serif{
  font-family:"Playfair Display",serif;
  line-height:1.02;letter-spacing:.01em;white-space:nowrap
}

/* =====================================================================
   §9 BROWSER MOCK
   ===================================================================== */
.browser{
  position:absolute;left:165px;top:558px;
  width:842px;height:calc(99px + var(--fill,0px));
  border-radius:28px 28px 0 0;overflow:hidden;
  z-index:100;box-shadow:0 -14px 44px rgba(0,0,0,.55)
}
.browser::before{
  content:"";position:absolute;
  left:0;right:0;top:42px;bottom:0;
  background:rgba(20,20,26,.82);z-index:0
}

/* Chrome bar */
.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%)
}
.dots{position:absolute;left:27px;top:16px;display:flex;gap:2.6px}
.dots i{width:7.6px;height:7.6px;border-radius:50%}

.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
}
.omni svg{width:9px;height:9px;opacity:.72}
.omni span{font-size:9.5px;color:rgba(255,255,255,.72);letter-spacing:.005em}

.tools{
  position:absolute;right:27px;top:14px;
  display:flex;align-items:center;gap:4px;opacity:.9
}
.tools svg{width:11px;height:12px}

/* Page surface */
.page{
  position:absolute;left:7px;right:6px;top:42px;bottom:0;
  background:#fff;color:#111;overflow:hidden;
  border-radius:10px 10px 0 0
}

.ann{
  position:absolute;left:0;top:0;width:100%;height:16px;
  background:#101210;display:grid;place-items:center;
  border-radius:10px 10px 0 0
}
.ann span{font-size:5px;letter-spacing:.06em;color:#cfcfcf}
.ann u{position:absolute;font-size:6px;color:#9a9a9a;text-decoration:none}

.shoplogo{
  position:absolute;left:50%;transform:translateX(-50%);
  top:24px;text-align:center
}
.shopicons{
  position:absolute;right:100px;top:33px;
  display:flex;gap:5px;opacity:.85
}
.shopicons svg{width:7px;height:7px}

/* Store front */
.pagebody{
  position:absolute;left:0;right:0;top:62px;bottom:0;
  background:#fff;overflow:hidden
}
.pghero{
  position:relative;margin:0 26px;height:158px;
  border-radius:7px;overflow:hidden;
  background:linear-gradient(120deg,#e8dcd4,#cbb6a8)
}
.pghero img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover
}
.pghero .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%)
}
.pghero .copy{
  position:absolute;left:22px;top:50%;
  transform:translateY(-50%);color:#fff
}
.pghero .copy u{
  font-size:4.6px;letter-spacing:.26em;
  text-transform:uppercase;opacity:.9;
  display:block;text-decoration:none
}
.pghero .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
}
.pghero .copy i{
  display:inline-block;margin-top:10px;padding:5px 13px;
  border-radius:20px;background:#fff;color:#17181c;
  font-size:5.2px;font-weight:600;font-style:normal;letter-spacing:.06em
}

.pgsec{
  display:flex;align-items:baseline;
  justify-content:space-between;margin:16px 26px 9px
}
.pgsec b{
  font-family:"Playfair Display",serif;
  font-weight:600;font-size:9px;color:#17181c
}
.pgsec u{
  font-size:4.6px;letter-spacing:.14em;
  color:#8a8a8a;text-transform:uppercase;text-decoration:none
}

.pggrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin:0 26px
}
.pgcard .ph{
  position:relative;height:0;padding-bottom:104%;
  border-radius:6px;overflow:hidden;
  background:linear-gradient(150deg,#efe7e1,#ddcfc6)
}
.pgcard .ph img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover
}
.pgcard .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
}
.pgcard b{
  display:block;margin-top:6px;font-size:5.4px;
  font-weight:600;color:#17181c;letter-spacing:.01em
}
.pgcard i{
  display:block;font-style:normal;margin-top:2px;
  font-size:4.6px;color:#8a8a8a
}
.pgcard s{
  display:block;margin-top:3px;font-size:5.6px;
  font-weight:700;color:#17181c;text-decoration:none
}
.pgcard s span{
  font-weight:400;color:#a08f86;
  text-decoration:line-through;margin-left:4px;font-size:4.6px
}

.pgstrip{
  display:flex;justify-content:space-between;
  margin:16px 26px 0;padding:9px 0;
  border-top:1px solid #eee6e0;border-bottom:1px solid #eee6e0
}
.pgstrip span{
  font-size:4.4px;letter-spacing:.12em;
  color:#7d7169;text-transform:uppercase
}

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

/* =====================================================================
   §12 ENTRANCE ANIMATION — CSS RESTING STATES
   ===================================================================== */
html.intro .nav{opacity:0;translate:0 -9px}
html.intro .mark,
html.intro .wm,
html.intro .links a,
html.intro .nav .btn,
html.intro .burger{opacity:0;translate:0 6px}
html.intro .badge{opacity:0;translate:0 11px;scale:.985}
html.intro .h1{opacity:0;translate:0 15px;clip-path:inset(100% 0 -30% 0)}
html.intro .sub{opacity:0;translate:0 10px}
html.intro .cta2{opacity:0;translate:0 13px;scale:.985}
html.intro .ring{opacity:0;translate:0 18px;scale:.99}
html.intro .browser{opacity:0;translate:0 26px}
html.intro .wa{opacity:0;scale:.88}

/* =====================================================================
   §10 RESPONSIVE — SHARED NARROW NAV  @media <=1080px
   ===================================================================== */
@media (max-width:1080px){
  .burger{
    display:grid;place-content:center;gap:4px;
    position:absolute;right:12px;top:11px;
    width:42px;height:42px;padding:0;border:0;
    border-radius:14px;background:transparent;
    cursor:pointer;-webkit-tap-highlight-color:transparent
  }
  .burger span{
    display:block;width:19px;height:1.6px;border-radius:2px;
    background:rgba(255,255,255,.92);
    transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s
  }
  .burger:focus-visible{outline:2px solid rgba(120,225,255,.7);outline-offset:2px}
  .nav.open .burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

  .navmenu{
    display:block;position:absolute;left:0;right:0;top:74px;padding:12px;
    border-radius:22px;border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg,rgba(11,15,22,.985),rgba(7,10,16,.99));
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 26px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .24s ease,transform .28s cubic-bezier(.4,0,.2,1),visibility .28s
  }
  .nav.open .navmenu{opacity:1;visibility:visible;transform:none}

  .links{
    position:static;display:flex;flex-direction:column;
    align-items:stretch;height:auto;gap:2px;transform:none!important
  }
  .links a{
    font-size:15px;padding:11px 14px;border-radius:12px;
    color:rgba(255,255,255,.9);transition:background .2s,color .2s
  }
  .nav .btn{position:static;width:100%;height:46px;margin-top:10px;font-size:15px}
  .nav .btn span{margin-top:3px}

  /* Tablet geometry tweaks */
  .nav{left:286px;width:620px}
  .badge{left:448px;width:277px}
  .stack{transform:translateY(var(--stshift,0px))}
  .showcase{transform:translateY(var(--sshift,0px))}
  .ring{transform:scale(var(--rs,1));transform-origin:586px 595px}
  .wa{width:58px;height:58px;right:22px;bottom:26px}
  .wa svg{width:32px;height:32px}
}

@media (hover:hover) and (max-width:1080px){
  .burger:hover span{background:#fff}
  .links a:hover{background:rgba(255,255,255,.055);color:#fff;opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .navmenu,.burger span{transition:none}
}

/* =====================================================================
   §10 RESPONSIVE — PHONE <=700px
   ===================================================================== */
@media (max-width:700px){
  .canvas{
    position:relative;left:auto;top:auto;
    width:100%;height:100%;transform:none;
    display:flex;flex-direction:column;align-items:center;padding:0 20px
  }
  .canvas>*{position:static}
  .stack{display:contents}

  .nav{
    position:relative;left:auto;top:auto;
    width:100%;max-width:500px;height:58px;
    margin-top:clamp(10px,1.5vh,15px);flex:0 0 auto
  }
  .mark{left:16px;top:calc(50% - 13px);width:26px;height:26px}
  .wm{left:49px;top:0;height:100%}
  .wm .kick{top:calc(50% - 15px);font-size:5px;letter-spacing:.2em}
  .wm .name{
    top:calc(50% - 9px);font-size:18px;
    transform:scaleX(.88);transform-origin:left center
  }
  .burger{right:8px;top:7px;width:44px;height:44px}
  .navmenu{top:68px;padding:12px}
  .links a{font-size:16px;padding:12px 15px;border-radius:12px}
  .nav .btn{height:48px;margin-top:10px;font-size:16px}

  .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
  }
  .badge b{
    position:relative;left:auto;top:auto;
    height:36px;padding:0 15px 0 42px;font-size:12.5px
  }
  .badge i{top:4px;left:4px;width:28px;height:28px}
  .badge i svg{width:13px;height:19px}

  .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
  }
  .h1.l1{margin-top:clamp(12px,2.2vh,20px)}

  .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
  }
  .sub.s1{margin-top:clamp(10px,1.8vh,16px)}

  .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
  }

  .showcase{
    position:relative;left:auto;top:auto;
    flex:1 1 auto;width:100%;height:auto;min-height:224px
  }
  .ring{
    position:absolute;left:50%;margin-left:-586px;
    top:-446px;bottom:auto;width:1172px;height:657px;
    transform-origin:586px 466px;transform:scale(1.02)
  }
  .browser{
    position:absolute;left:50%;transform:translateX(-50%);
    top:212px;bottom:0;width:calc(100% + 40px);
    height:auto;border-radius:22px 22px 0 0
  }
  .browser .bar{height:36px}
  .omni{left:50%;transform:translateX(-50%);width:58%;height:24px;top:6px}
  .omni span{font-size:9px}
  .dots{top:14px}
  .tools{display:none}
  .ann{height:15px}
  .ann span{font-size:6px}
  .page{top:36px}
  .pagebody{top:56px}
  .pghero{margin:0 18px;height:122px;border-radius:10px}
  .pghero .copy{left:18px}
  .pghero .copy u{font-size:7.5px;letter-spacing:.2em}
  .pghero .copy em{font-size:20px;margin-top:5px}
  .pghero .copy i{font-size:8.5px;padding:6px 13px;margin-top:8px}
  .pgsec{margin:16px 18px 10px}
  .pgsec b{font-size:14px}
  .pgsec u{font-size:8px}
  .pggrid{grid-template-columns:repeat(2,1fr);gap:14px;margin:0 18px}
  .pgcard .ph{border-radius:9px}
  .pgcard .tag{font-size:7px;padding:3px 7px;border-radius:4px}
  .pgcard b{font-size:10.5px;margin-top:7px}
  .pgcard i{font-size:8.5px}
  .pgcard s{font-size:11.5px;margin-top:4px}
  .pgcard s span{font-size:8.5px}
  .pgstrip{margin:16px 18px 0;flex-wrap:wrap;gap:5px 16px}
  .pgstrip span{font-size:8px}
  .wa{width:54px;height:54px;right:14px;bottom:16px}
  .wa svg{width:29px;height:29px}
}

/* =====================================================================
   PREFERS-REDUCED-MOTION — neutralise intro states
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html.intro .nav,
  html.intro .mark,
  html.intro .wm,
  html.intro .links a,
  html.intro .nav .btn,
  html.intro .burger,
  html.intro .badge,
  html.intro .h1,
  html.intro .sub,
  html.intro .cta2,
  html.intro .ring,
  html.intro .browser,
  html.intro .wa{opacity:1;translate:none;scale:none;clip-path:none}
  .wa::after{animation:none}
}

/* =====================================================================
   SORTUP.DEV PORTFOLIO CREDIT
   ===================================================================== */
.credit{
  position:fixed;bottom:6px;left:50%;transform:translateX(-50%);
  font-size:8px;letter-spacing:.12em;
  color:rgba(255,255,255,.22);white-space:nowrap;
  z-index:9999;pointer-events:none;text-transform:uppercase
}