@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Manrope:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

/* ==========================================================================
   STICKY SCROLL REVEAL — PRODUCT CATALOGUE
   Right: phone with the live product list. Left: detail of the active product.
   Scroll position drives the index; rows and pillar tabs jump to it.
   Tune SCROLL LENGTH with --step (JS reads it) — smaller = faster reveal.
   ========================================================================== */
.ps{
  --green:#5eb346; --green-lo:#4d9639; --green-hi:#78b945;
  --slate:#30444F; --ink:#30444F; --white:#30444F;
  --mist:rgba(48,68,79,.78); --hair:rgba(48,68,79,.14);
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Manrope',sans-serif; --serif:'Instrument Serif',serif;
  --step:58vh;
  position:relative;
  width:100vw;margin-left:calc(50% - 50vw);
  color:var(--white);font-family:var(--body);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,rgba(94,179,70,.10),transparent 60%),
    linear-gradient(to right,#f1f6f7,#d5f1f1)}
.ps *{box-sizing:border-box}
.ps ::selection{background:var(--green);color:#fff}
.ps h2,.ps h3,.ps p{margin:0}

.ps-pulse{width:7px;height:7px;border-radius:50%;background:var(--green-hi);box-shadow:0 0 0 0 rgba(143,208,95,.7);animation:psPulse 2.2s infinite}
@keyframes psPulse{70%{box-shadow:0 0 0 11px rgba(143,208,95,0)}100%{box-shadow:0 0 0 0 rgba(143,208,95,0)}}
.ps-dot{width:6px;height:6px;border-radius:50%;background:var(--green-hi);box-shadow:0 0 9px var(--green-hi)}

.ps-sticky::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 5%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 5%,transparent 75%)}

.ps-sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.ps-inner{position:relative;z-index:2;width:100%;max-width:1500px;margin:0 auto;
  padding:clamp(74px,9vh,104px) 48px clamp(26px,5vh,56px);
  display:grid;grid-template-columns:1.02fr .98fr;
  align-items:center;gap:clamp(24px,3vw,40px)}

/* ---------- LEFT: detail ---------- */
.ps-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-bottom:clamp(14px,2.4vh,26px)}
.ps-head h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.03em;line-height:1;color:var(--slate)}
.ps-head>span{font-size:12px;color:rgba(48,68,79,.55);letter-spacing:.04em;
  border-left:1px solid var(--hair);padding-left:14px}
.ps-flip{margin-left:auto;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--body);font-size:11.5px;font-weight:600;color:rgba(48,68,79,.7);
  background:#fff;border:1px solid var(--hair);
  padding:8px 14px;border-radius:100px;transition:.35s;white-space:nowrap}
.ps-flip:hover{color:var(--slate);border-color:rgba(112,173,71,.45);background:rgba(112,173,71,.09)}
.ps-flip:focus-visible{outline:2px solid var(--green-hi);outline-offset:3px}
.ps-flip-ic{width:15px;height:11px;border-radius:2.5px;border:1.5px solid currentColor;
  position:relative;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.ps-flip-ic::after{content:"";position:absolute;top:1px;bottom:1px;left:1px;width:4px;
  border-radius:1px;background:var(--green-hi)}
.ps-flip[aria-pressed="true"] .ps-flip-ic{transform:rotateY(180deg)}

/* mirrored composition — device swaps to the left column */
.ps.flip .ps-inner{grid-template-columns:.98fr 1.02fr}
.ps.flip .ps-stage{order:-1}
.ps.flip .ps-head{flex-direction:row}
@media(max-width:1080px){.ps.flip .ps-stage{order:1}.ps.flip .ps-inner{grid-template-columns:1fr}}

.ps-detail{position:relative;min-height:clamp(320px,46vh,400px)}
.ps-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(22px);
  filter:blur(6px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),filter .5s ease}
.ps-panel.on{opacity:1;visibility:visible;transform:none;filter:none}

.ps-markrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(10px,2vh,20px)}
.ps-mark{flex:0 0 auto;width:clamp(38px,5.4vh,50px);height:clamp(38px,5.4vh,50px);
  -webkit-filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.ps-markrow .ps-pill{margin-bottom:0}
.ps-pill{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green-hi);
  background:rgba(112,173,71,.12);border:1px solid rgba(112,173,71,.3);
  padding:7px 15px;border-radius:100px;margin-bottom:clamp(10px,2vh,20px)}
.ps-code{font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.14em;
  color:rgba(48,68,79,.55);margin-bottom:9px}
.ps-title{font-family:var(--display);font-weight:800;color:var(--slate);
  font-size:clamp(28px,min(3.9vw,5.4vh),54px);
  line-height:1.02;letter-spacing:-.035em;margin-bottom:14px}
.ps-title em{font-family:var(--serif);font-style:italic;font-weight:400}
.ps-contract{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(48,68,79,.75);
  background:#fff;border:1px solid var(--hair);
  padding:8px 15px;border-radius:100px;margin-bottom:20px}
.ps-contract b{color:var(--slate);font-weight:600}
.ps-desc{font-size:clamp(14.5px,1.8vh,16.5px);line-height:1.62;color:var(--mist);max-width:470px;margin-bottom:clamp(16px,2.6vh,26px)}
.ps-points{display:flex;flex-direction:column;gap:11px;max-width:470px}
.ps-points div{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:rgba(48,68,79,.82)}
.ps-points i{flex:0 0 auto;width:18px;height:18px;border-radius:6px;background:rgba(112,173,71,.16);
  color:var(--green-hi);display:grid;place-items:center;font-size:10px;font-style:normal;margin-top:1px}

.ps-foot{margin-top:clamp(16px,3vh,30px);padding-top:clamp(12px,2vh,20px);border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:470px}
.ps-verify{font-size:11.5px;color:rgba(48,68,79,.55)}
.ps-verify b{color:var(--slate);font-weight:600}
.ps-count{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.04em;color:rgba(48,68,79,.6)}
.ps-count b{color:var(--green-hi)}

/* ---------- RIGHT: phone ---------- */
.ps-stage{position:relative;display:grid;place-items:center;
  height:min(660px,74vh);perspective:1600px}
.ps-glow{position:absolute;width:430px;height:430px;border-radius:50%;
  background:radial-gradient(circle,rgba(112,173,71,.22),transparent 70%);filter:blur(64px)}

/* machined rail: light catches the left and right edges, not the whole face */
.ps-phone{position:relative;height:min(612px,72vh);width:auto;aspect-ratio:300/612;
  border-radius:clamp(32px,4.4vh,44px);padding:clamp(6px,.9vh,9px);
  transform-style:preserve-3d;will-change:transform;
  background:
    linear-gradient(96deg,#0B1115 0%,#5E6E77 3%,#2B3A42 9%,#141D22 30%,
                    #101A1F 70%,#2B3A42 91%,#66757E 97%,#0B1115 100%);
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.14),
    0 34px 70px -26px rgba(0,0,0,.95),
    -22px 44px 110px -34px rgba(0,0,0,.9),
    0 0 120px -34px rgba(112,173,71,.34);
  transform:rotateY(-11deg) rotateX(4deg) rotateZ(.6deg);
  transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.ps-phone::before{content:"";position:absolute;right:-2px;top:23%;width:2px;height:56px;
  border-radius:2px;background:linear-gradient(180deg,#5A6971,#222E35);
  box-shadow:0 -84px 0 -1px #3C4A52,0 -128px 0 -1px #3C4A52}
.ps-phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;
  background:linear-gradient(107deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 16%,
             transparent 34%,transparent 78%,rgba(255,255,255,.045) 100%)}

.ps-screen{width:100%;height:100%;border-radius:clamp(26px,3.7vh,38px);overflow:hidden;position:relative;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%,rgba(112,173,71,.10),transparent 60%),
    linear-gradient(178deg,#0D171A,#080F13 46%,#060B0E);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;flex-direction:column}
.ps-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:7;
  background:radial-gradient(ellipse 100% 74% at 50% 44%,transparent 52%,rgba(0,0,0,.5) 100%)}

.ps-notch{position:absolute;top:clamp(11px,1.8vh,16px);left:50%;translate:-50% 0;
  width:78px;height:21px;background:#03070A;border-radius:100px;z-index:10;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06)}
.ps-notch::after{content:"";position:absolute;right:8px;top:50%;translate:0 -50%;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#1D3340 0%,#070E12 62%);
  box-shadow:0 0 0 .5px rgba(255,255,255,.09)}

.ps-schead{padding:clamp(38px,5.4vh,50px) 16px 12px;flex:0 0 auto;position:relative;z-index:6;
  background:linear-gradient(180deg,#0A1417 76%,transparent)}
.ps-sctitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.ps-sctitle b{font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:-.01em}
.ps-live{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
.ps-tabs{display:flex;gap:6px}
.ps-tab{flex:1;font-family:var(--body);font-size:9.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.46);background:transparent;border:1px solid rgba(255,255,255,.08);
  padding:6px 4px;border-radius:7px;cursor:pointer;transition:.35s;text-align:center}
.ps-tab:hover{color:#fff;border-color:rgba(255,255,255,.2)}
.ps-tab.on{color:#08120A;background:rgba(143,208,95,.92);border-color:transparent;font-weight:700}

.ps-viewport{flex:1;position:relative;overflow:hidden;
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 99%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 99%)}
.ps-list{position:absolute;top:0;left:0;right:0;padding:0 12px;
  transition:transform .68s cubic-bezier(.2,.9,.25,1)}
.ps-group{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);
  padding:16px 6px 8px}
.ps-item{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:10px;cursor:pointer;overflow:hidden;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.045);margin-bottom:6px;
  transition:background .45s ease,border-color .45s ease,opacity .45s ease;opacity:.42}
.ps-item::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;
  background:var(--green-hi);transform:scaleY(0);transform-origin:center;
  transition:transform .45s cubic-bezier(.2,.9,.25,1)}
.ps-item:hover{opacity:.78;background:rgba(255,255,255,.05)}
.ps-item.on{opacity:1;background:linear-gradient(90deg,rgba(112,173,71,.15),rgba(112,173,71,.04));
  border-color:rgba(112,173,71,.38)}
.ps-item.on::before{transform:scaleY(1)}
.ps-badge{flex:0 0 auto;width:31px;height:31px;display:block;
  filter:saturate(.35) brightness(.72);opacity:.9;
  transition:filter .45s ease,transform .45s cubic-bezier(.2,.9,.25,1),opacity .45s}
.ps-item:hover .ps-badge{filter:saturate(.7) brightness(.88)}
.ps-item.on .ps-badge{filter:none;opacity:1;transform:scale(1.08) rotate(-3deg);
  -webkit-filter:drop-shadow(0 3px 8px rgba(112,173,71,.45));filter:drop-shadow(0 3px 8px rgba(112,173,71,.45))}
.ps-txt{flex:1;min-width:0}
.ps-txt b{display:block;font-size:11px;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-txt span{font-size:8.5px;letter-spacing:.01em;color:rgba(255,255,255,.36)}
.ps-arrow{flex:0 0 auto;font-size:12px;color:var(--green-hi);opacity:0;transform:translateX(-6px);transition:.4s}
.ps-item.on .ps-arrow{opacity:1;transform:none}

.ps-bar{flex:0 0 auto;height:3px;margin:0 18px 16px;border-radius:100px;background:rgba(255,255,255,.08);
  position:relative;overflow:hidden}
.ps-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--green),var(--green-hi));
  border-radius:100px}

.ps-hint{position:absolute;bottom:26px;left:50%;translate:-50% 0;z-index:3;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(48,68,79,.42)}

@media(max-width:1080px){
  .ps{--step:52vh}
  .ps-sticky{height:auto;min-height:100vh;position:sticky}
  .ps-inner{grid-template-columns:1fr;padding:88px 24px 40px;gap:26px}
  .ps-stage{order:1;height:min(520px,58vh)}
  .ps-detail{order:2;min-height:330px}
  .ps-phone{height:min(540px,56vh)}
  .ps-hint,.ps-flip{display:none}
  .ps-desc,.ps-points,.ps-foot{max-width:none}
}
@media(max-width:640px){
  .ps-head>span{display:none}
  .ps-phone{height:min(492px,52vh)}
  .ps-stage{height:min(470px,54vh)}
  .ps-detail{min-height:360px}
  .ps-title{font-size:29px}
  .ps-desc{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .ps-list,.ps-item,.ps-panel,.ps-phone{transition:none!important}
  .ps-panel{filter:none!important}
}