/* PasarByteOTP storefront — mobile-first corrective layer */
:root{
  --pb-bg:#07101b;
  --pb-surface:#0a1524;
  --pb-surface-2:#0d192a;
  --pb-line:#21344d;
  --pb-line-soft:#18283d;
  --pb-text:#f7fbff;
  --pb-muted:#a4b5c8;
  --pb-dim:#70849a;
  --pb-cyan:#43c9ff;
  --pb-cyan-soft:rgba(67,201,255,.1);
}

/* layout reset for public storefront */
html{scroll-padding-top:72px}
body{
  background:var(--pb-bg);
  color:var(--pb-text);
  font-size:16px;
}
.container{
  width:calc(100% - 28px);
  max-width:1180px;
  margin-inline:auto;
}

/* navbar */
.site-header{
  height:64px;
  background:rgba(7,16,27,.96);
  border-bottom:1px solid var(--pb-line-soft);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nav{height:64px}
.brand-logo,.drawer-logo{border-radius:10px}
.brand-name{font-size:17px}
.brand small{font-size:6px}
.nav-menu-desktop{display:none}
.nav-buy{display:none}
.hamburger{display:block}
.drawer-overlay{top:64px}
.mobile-drawer{
  top:64px;
  height:calc(100dvh - 64px);
  width:min(86vw,320px);
}

/* common typography */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 11px;
  color:var(--pb-cyan);
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
}
.eyebrow i{font-size:11px}
.section-intro{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-bottom:26px;
}
.section-intro h2,
.about-copy>h2,
.section-copy h2,
.contact-copy>h2{
  margin:0;
  font-size:clamp(34px,10vw,44px);
  line-height:1.04;
  letter-spacing:-1.7px;
}
.section-intro>p,
.section-note,
.about-copy>p,
.contact-copy>p:last-child{
  margin:0;
  color:var(--pb-muted);
  font-size:15px;
  line-height:1.72;
}
.catalog,.how,.about,.faq{
  padding:60px 0;
  border-bottom:1px solid var(--pb-line-soft);
}
.contact{padding:58px 0}

/* HERO — important: block, not flex. It has two .container children. */
.hero{
  display:block;
  min-height:0;
  padding:92px 0 30px;
  overflow:hidden;
  border-bottom:1px solid var(--pb-line-soft);
  background:
    radial-gradient(circle at 72% 23%,rgba(67,201,255,.09),transparent 34%),
    linear-gradient(180deg,#07101b 0%,#08131f 100%);
}
.hero-grid{
  display:block;
  inset:64px 0 0;
  opacity:.25;
  background-size:38px 38px;
}
.hero-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:30px;
  align-items:center;
}
.hero-copy{
  width:100%;
  max-width:none;
  min-width:0;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 18px;
  color:#b9c9da;
  font-size:11px;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
}
.hero-kicker i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid rgba(67,201,255,.3);
  border-radius:50%;
  background:#0a1928;
  color:var(--pb-cyan);
}
.hero-kicker>span{
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.hero-title{
  max-width:760px;
  margin:0;
  font-size:clamp(43px,12.5vw,56px);
  line-height:.98;
  letter-spacing:-2.7px;
}
.hero-line{display:block;overflow:hidden;padding-bottom:.07em}
.hero-line>span{display:block}
.hero-line-accent>span{
  color:var(--pb-cyan);
  background:none;
  -webkit-text-fill-color:initial;
}
.hero-text{
  max-width:680px;
  margin:20px 0 0;
  color:#b0c0d1;
  font-size:16px;
  line-height:1.68;
}
.hero-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  margin-top:24px;
}
.hero-primary,.hero-secondary{
  width:100%;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:850;
}
.hero-primary{
  border:1px solid #dff6ff;
  background:#e4f7ff;
  color:#06111c;
  box-shadow:none;
}
.hero-secondary{
  border:1px solid #314862;
  background:#0a1523;
  color:#eef7ff;
}
.hero-points{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:25px;
  padding-top:20px;
  border-top:1px solid var(--pb-line);
}
.hero-point{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.hero-point-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid #29445f;
  border-radius:12px;
  background:#0a1928;
  color:var(--pb-cyan);
  font-size:15px;
}
.hero-point div{display:grid;gap:2px;min-width:0}
.hero-point small{
  color:var(--pb-dim);
  font-size:10px;
}
.hero-point strong{
  overflow:hidden;
  color:#eef7ff;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* logo scene */
.hero-visual{
  display:grid;
  place-items:center;
  width:min(100%,300px);
  max-width:none;
  margin:0 auto;
  justify-self:center;
}
.hero-logo-scene{
  position:relative;
  width:100%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
}
.hero-logo-scene::before,
.hero-logo-scene::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero-logo-scene::before{
  inset:10%;
  border:1px solid rgba(67,201,255,.15);
}
.hero-logo-scene::after{
  inset:27%;
  border:1px dashed rgba(67,201,255,.18);
}
.hero-logo-wrap{
  position:relative;
  z-index:2;
  width:45%;
  aspect-ratio:1;
  padding:7px;
  border:1px solid rgba(67,201,255,.32);
  border-radius:50%;
  background:#091522;
  box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 56px rgba(67,201,255,.08);
}
.hero-logo-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:0;
  border-radius:50%;
  box-shadow:none;
}
.hero-float-icon{
  position:absolute;
  z-index:3;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid #29445f;
  border-radius:14px;
  background:#0a1827;
  color:var(--pb-cyan);
  font-size:16px;
  box-shadow:0 14px 28px rgba(0,0,0,.24);
}
.hero-float-icon-a{left:4%;top:18%}
.hero-float-icon-b{right:4%;top:12%}
.hero-float-icon-c{left:8%;bottom:15%}
.hero-float-icon-d{right:7%;bottom:18%}
.hero-visual-caption{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid #29445f;
  border-radius:999px;
  background:#091522;
  color:#cbd8e6;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.hero-visual-caption i{color:#22c55e}
.hero-service-strip{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  margin-top:20px;
  padding-top:15px;
  overflow-x:auto;
  border-top:1px solid var(--pb-line-soft);
  color:#8092a8;
  font-size:11px;
  font-weight:750;
  scrollbar-width:none;
}
.hero-service-strip::-webkit-scrollbar{display:none}
.hero-service-strip span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:none;
  white-space:nowrap;
}
.hero-service-strip span i{color:var(--pb-cyan)}
.hero-service-strip>i{flex:none;color:#41556d;font-size:8px}

/* Product */
.catalog{background:#08111d}
.catalog-panel{
  position:relative;
  top:auto;
  z-index:auto;
  overflow:hidden;
  border:1px solid #243a55;
  border-radius:11px;
  background:#0a1524;
  box-shadow:none;
}
.catalog-panel-head{
  align-items:flex-start;
  padding:14px;
}
.catalog-heading strong{font-size:14px}
#selectionPath{font-size:11px}
.catalog-icon{
  width:38px;
  height:38px;
  font-size:13px;
}
.catalog-tools{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:14px;
}
.catalog-field{
  gap:8px;
  font-size:12px;
}
select,input,textarea{
  min-height:52px;
  border-color:#2b405b;
  border-radius:8px;
  background:#07111d;
  color:#fff;
  font-size:16px;
}
.catalog-panel-foot{
  align-items:flex-start;
  flex-direction:column;
  gap:8px;
  padding:11px 14px;
  font-size:11px;
}
.badge{font-size:11px}
.catalog-head{
  align-items:flex-start;
  gap:12px;
  padding:24px 0 11px;
}
.catalog-head h3{font-size:26px}
.catalog-head p{font-size:12px}
.refresh-button{
  min-height:42px;
  padding:9px 13px;
  font-size:12px;
}
.product-list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.product-row{
  grid-template-columns:30px minmax(0,1fr);
  gap:10px;
  min-height:0;
  padding:18px 0;
}
.product-row-side{
  grid-column:2;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-top:7px;
}
.product-row h3{font-size:17px}
.product-subtitle{font-size:12px}
.product-price{text-align:left}
.product-price strong{font-size:18px}
.product-buy{
  min-width:76px;
  min-height:42px;
  padding:9px 13px;
  font-size:12px;
}

/* Cara beli */
.how{background:#07101b}
.how-route{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 12px;
  padding:13px 0;
}
.how-route-label{display:none}
.how-route-path{
  gap:7px;
  overflow-x:auto;
  color:#dbe7f3;
  font-size:12px;
  scrollbar-width:none;
}
.how-route-path::-webkit-scrollbar{display:none}
.how-flow{
  grid-template-columns:1fr;
  margin-top:28px;
}
.how-flow-item{
  grid-template-columns:40px minmax(0,1fr);
  gap:13px;
  min-height:0;
  padding:24px 0;
}
.how-flow-item+.how-flow-item{
  padding-left:0;
  border-left:0;
  border-top:1px solid var(--pb-line-soft);
}
.how-flow-icon{
  width:36px;
  height:36px;
  font-size:12px;
}
.how-flow-item h3{
  max-width:none;
  font-size:21px;
}
.how-flow-item p{
  max-width:none;
  color:#9cadc0;
  font-size:14px;
  line-height:1.7;
}
.how-flow-line{display:none}
.how-proof{
  align-items:flex-start;
  flex-direction:column;
  gap:14px;
}
.how-proof-copy strong{
  font-size:13px;
  line-height:1.6;
}
.how-proof-link{font-size:13px}

/* About / FAQ */
.about-layout,.faq-layout{
  grid-template-columns:1fr;
  gap:34px;
}
.about-row{
  grid-template-columns:46px minmax(0,1fr);
  gap:13px;
  padding:18px 0;
}
.about-row>span{
  width:40px;
  height:40px;
}
.about-row b{font-size:15px}
.about-row p{
  margin-top:5px;
  font-size:13px;
  line-height:1.65;
}
.about-signal{font-size:12px}
.faq-list summary{
  padding:19px 0;
  font-size:15px;
}
.faq-list details p{
  padding-right:16px;
  font-size:14px;
  line-height:1.7;
}

/* Contact */
.contact-panel{
  grid-template-columns:1fr;
  gap:26px;
  padding:25px 20px;
  border:1px solid #263d59;
  border-radius:12px;
  background:#0a1524;
}
.contact-action{min-width:0;gap:11px}
.contact-order{padding:12px}
.contact-admin{
  width:100%;
  min-height:50px;
  font-size:14px;
}
.contact-links{grid-template-columns:1fr}
.contact-links a{font-size:11px}

/* tablet */
@media(min-width:768px){
  .container{width:calc(100% - 48px)}
  .hero{padding:108px 0 38px}
  .hero-title{
    font-size:clamp(58px,8vw,72px);
    letter-spacing:-3.8px;
  }
  .hero-text{font-size:17px}
  .hero-actions{
    grid-template-columns:max-content max-content;
  }
  .hero-primary,.hero-secondary{width:auto}
  .hero-points{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .hero-visual{width:min(100%,370px)}
  .hero-float-icon{
    width:54px;
    height:54px;
    font-size:18px;
  }
  .hero-visual-caption{font-size:10px}
  .hero-service-strip{font-size:12px}
  .section-intro h2,
  .about-copy>h2,
  .section-copy h2,
  .contact-copy>h2{
    font-size:clamp(40px,6vw,52px);
  }
  .catalog-tools{grid-template-columns:1fr 1fr 1fr}
  .catalog-panel-foot{
    align-items:center;
    flex-direction:row;
  }
  .contact-links{grid-template-columns:1fr 1fr}
}

/* desktop */
@media(min-width:1024px){
  .nav-menu-desktop{display:flex}
  .nav-buy{display:inline-flex}
  .hamburger{display:none}

  .hero{
    padding:116px 0 40px;
  }
  .hero-layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.72fr);
    gap:66px;
  }
  .hero-copy{
    max-width:720px;
  }
  .hero-title{
    font-size:clamp(66px,5.6vw,80px);
    letter-spacing:-4.2px;
  }
  .hero-text{
    max-width:660px;
    font-size:17px;
  }
  .hero-points{max-width:650px}
  .hero-visual{
    width:100%;
    max-width:420px;
    margin:0;
    justify-self:end;
  }
  .hero-float-icon{
    width:58px;
    height:58px;
    border-radius:17px;
    font-size:20px;
  }
  .hero-visual-caption{font-size:11px}
  .hero-service-strip{
    margin-top:30px;
    font-size:12px;
  }

  .catalog,.how,.about,.faq{padding:82px 0}
  .contact{padding:74px 0}
  .section-intro{
    grid-template-columns:minmax(0,1fr) minmax(320px,440px);
    gap:72px;
    margin-bottom:34px;
  }
  .section-intro h2,
  .about-copy>h2,
  .section-copy h2,
  .contact-copy>h2{
    font-size:clamp(46px,4vw,56px);
  }
  .section-intro>p,.section-note,.about-copy>p,.contact-copy>p:last-child{
    font-size:15px;
  }

  .product-list{
    grid-template-columns:1fr 1fr;
    column-gap:28px;
  }
  .product-row{
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:14px;
    min-height:92px;
    padding:18px 10px 18px 0;
  }
  .product-row-side{
    grid-column:auto;
    grid-template-columns:auto auto;
    margin-top:0;
  }
  .product-price{text-align:right}

  .how-flow{
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:42px;
  }
  .how-flow-item{
    grid-template-columns:46px minmax(0,1fr);
    gap:16px;
    min-height:235px;
    padding:28px 30px 30px 0;
  }
  .how-flow-item+.how-flow-item{
    padding-left:30px;
    border-top:0;
    border-left:1px solid var(--pb-line-soft);
  }
  .how-flow-line{display:block}
  .how-flow-item h3{font-size:22px}
  .how-flow-item p{font-size:14px}
  .how-proof{
    align-items:center;
    flex-direction:row;
  }

  .about-layout{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:88px;
  }
  .faq-layout{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:72px;
  }
  .contact-panel{
    grid-template-columns:minmax(0,1fr) 300px;
    align-items:center;
    gap:72px;
    padding:38px 40px;
  }
}

/* very small phones */
@media(max-width:380px){
  .container{width:calc(100% - 24px)}
  .brand-copy small{display:none}
  .hero-title{font-size:40px}
  .hero-text{font-size:15px}
  .hero-visual{width:min(100%,270px)}
  .hero-float-icon{
    width:42px;
    height:42px;
    font-size:14px;
  }
}


/* Real-brand hero + stronger GSAP motion pass */
.hero-kicker-dot{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:#43c9ff;
  box-shadow:0 0 0 6px rgba(67,201,255,.08);
}
.hero-line-left,.hero-line-right{will-change:transform,opacity}
.hero-real-marks{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--pb-line);
}
.hero-real-mark{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.hero-real-mark>img{
  width:42px;
  height:30px;
  flex:none;
  object-fit:contain;
}
.hero-real-mark .hero-real-wa{
  width:38px;
  height:38px;
}
.hero-real-mark>div{
  display:grid;
  gap:2px;
  min-width:0;
}
.hero-real-mark small{
  color:var(--pb-dim);
  font-size:10px;
}
.hero-real-mark strong{
  color:#f2f8fd;
  font-size:14px;
}
.qris-mark{
  display:grid;
  place-items:center;
  flex:none;
  padding:7px 9px;
  border-radius:8px;
  background:#fff;
}
.qris-mark img{
  display:block;
  width:auto;
  height:24px;
  object-fit:contain;
}
.hero-real-mark-qris .qris-mark{
  width:96px;
  padding:7px 8px;
}
.hero-real-mark-qris .qris-mark img{height:22px}

.hero-logo-scene{
  perspective:1000px;
}
.hero-logo-orbit{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero-logo-orbit-a{
  inset:9%;
  border:1px solid rgba(67,201,255,.16);
}
.hero-logo-orbit-b{
  inset:27%;
  border:1px dashed rgba(67,201,255,.2);
}
.hero-logo-scene::before,
.hero-logo-scene::after{display:none}
.hero-brand-token{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border:1px solid #29435f;
  border-radius:11px;
  background:#091522;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  color:#dce9f5;
}
.hero-brand-token img{
  display:block;
  object-fit:contain;
}
.hero-brand-token span{
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.hero-brand-token-id{
  left:1%;
  top:16%;
}
.hero-brand-token-id img{
  width:38px;
  height:25px;
}
.hero-brand-token-wa{
  right:0;
  top:12%;
}
.hero-brand-token-wa img{
  width:30px;
  height:30px;
}
.hero-brand-token-server{
  left:3%;
  bottom:14%;
  display:grid;
  gap:1px;
}
.hero-brand-token-server strong{
  font-size:12px;
}
.hero-brand-token-server span{
  color:#72869e;
  font-size:8px;
}
.hero-brand-token-qris{
  right:0;
  bottom:15%;
  padding:6px;
  background:#fff;
}
.hero-brand-token-qris .qris-mark{
  padding:0;
}
.hero-brand-token-qris .qris-mark img{
  height:24px;
}
.hero-visual-caption{display:none}

.hero-service-strip span{
  gap:7px;
}
.hero-service-strip img{
  display:block;
  object-fit:contain;
  flex:none;
}
.hero-service-strip .strip-id img{
  border-radius:2px;
}
.hero-service-strip b{
  color:#41556d;
  font-size:11px;
  font-weight:500;
}
.qris-mark-strip{
  padding:4px 6px;
  border-radius:5px;
}
.qris-mark-strip img{height:15px}

@media(min-width:768px){
  .hero-real-marks{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:767px){
  .hero-real-marks{gap:11px}
  .hero-real-mark small{font-size:10px}
  .hero-real-mark strong{font-size:14px}
  .hero-brand-token{
    padding:7px 8px;
    border-radius:9px;
  }
  .hero-brand-token span{font-size:9px}
  .hero-brand-token-id{left:0}
  .hero-brand-token-wa{right:0}
  .hero-brand-token-server{left:1%}
  .hero-brand-token-qris{right:1%}
  .hero-brand-token-server strong{font-size:10px}
  .hero-brand-token-server span{font-size:7px}
  .hero-brand-token-id img{width:32px;height:21px}
  .hero-brand-token-wa img{width:25px;height:25px}
  .hero-brand-token-qris .qris-mark img{height:19px}
}


/* Hero scale + service brands + right-side mobile navigation */
.brand-logo{
  width:42px;
  height:42px;
}
.brand-name{font-size:18px}
.brand small{font-size:7px}

.hero-title{
  font-size:clamp(47px,13vw,60px);
  letter-spacing:-3px;
}
.hero-text{
  max-width:720px;
  font-size:17px;
  line-height:1.72;
}
.hero-kicker{font-size:12px}
.hero-actions a{font-size:15px}

.hero-services{
  display:grid;
  gap:10px;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--pb-line);
}
.hero-services-label{
  color:#73879e;
  font-size:10px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.hero-service-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.service-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid #29425d;
  border-radius:11px;
  background:#091522;
}
.service-logo img{
  width:25px;
  height:25px;
  display:block;
  object-fit:contain;
}
.service-logo-wa img{width:27px;height:27px}
.service-logo-tiktok img,
.service-logo-google img{width:23px;height:23px}
.hero-services-more{
  margin-left:3px;
  color:#95a6ba;
  font-size:12px;
  font-weight:700;
}
.hero-real-marks{
  margin-top:20px;
  padding-top:18px;
}
.hero-real-mark small{font-size:11px}
.hero-real-mark strong{font-size:15px}
.hero-live-dot{
  width:14px;
  height:14px;
  flex:none;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 7px rgba(34,197,94,.08);
}

.hero-visual{
  width:min(100%,340px);
}
.hero-logo-wrap{
  width:56%;
  padding:9px;
}
.hero-brand-token-telegram{
  left:4%;
  bottom:12%;
}
.hero-brand-token-telegram img{
  width:28px;
  height:28px;
}
.hero-brand-token-qris{
  right:1%;
  bottom:14%;
}

.hamburger{
  width:42px;
  height:42px;
}
.hamburger span{
  left:50%;
  top:50%!important;
  width:23px;
  height:2px;
  margin:0;
  transition:transform .3s cubic-bezier(.65,.05,.36,1),opacity .18s ease,width .3s ease!important;
}
.hamburger span:nth-child(1){
  transform:translate(-50%,-7px);
}
.hamburger span:nth-child(2){
  transform:translate(-50%,0);
}
.hamburger span:nth-child(3){
  transform:translate(-50%,7px);
}
.hamburger.active span:nth-child(1){
  transform:translate(-50%,0) rotate(45deg);
}
.hamburger.active span:nth-child(2){
  opacity:0;
  width:8px;
  transform:translate(-50%,0) scaleX(.2);
}
.hamburger.active span:nth-child(3){
  transform:translate(-50%,0) rotate(-45deg);
}

.mobile-drawer{
  left:auto!important;
  right:0;
  border-right:0;
  border-left:1px solid var(--pb-line);
  box-shadow:-18px 0 60px rgba(0,0,0,.45);
  transform:translateX(104%);
}
.mobile-drawer.open{
  transform:translateX(0);
}
.drawer-link{
  transform:translateX(28px);
}
.mobile-drawer.open .drawer-link{
  transform:translateX(0);
}
.drawer-brand{
  padding:19px 18px;
}
.drawer-logo{
  width:44px;
  height:44px;
}
.drawer-brand strong{font-size:16px}
.drawer-brand small{font-size:10px}
.drawer-title{font-size:10px}
.drawer-link{
  min-height:50px;
  font-size:14px;
}
.drawer-footer{padding:16px 18px}

@media(min-width:768px){
  .hero-title{
    font-size:clamp(66px,8vw,80px);
    letter-spacing:-4px;
  }
  .hero-text{font-size:18px}
  .hero-kicker{font-size:13px}
  .hero-visual{
    width:min(100%,430px);
  }
  .hero-logo-wrap{width:58%}
  .hero-real-marks{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(min-width:1024px){
  .brand-logo{
    width:44px;
    height:44px;
  }
  .brand-name{font-size:19px}
  .hero-title{
    font-size:clamp(72px,5.9vw,86px);
    letter-spacing:-4.6px;
  }
  .hero-text{
    max-width:700px;
    font-size:18px;
  }
  .hero-visual{
    max-width:470px;
  }
  .hero-logo-wrap{width:60%}
  .hero-brand-token{
    padding:10px 12px;
  }
  .hero-brand-token span{font-size:11px}
}

@media(max-width:767px){
  .brand-logo{
    width:38px;
    height:38px;
  }
  .brand-name{font-size:17px}
  .hero-title{font-size:clamp(45px,13.2vw,57px)}
  .hero-text{font-size:16px}
  .hero-visual{
    width:min(100%,330px);
  }
  .hero-logo-wrap{width:54%}
  .hero-brand-token-telegram{
    left:1%;
    bottom:11%;
  }
  .hero-services-more{
    width:100%;
    margin:2px 0 0;
    font-size:11px;
  }
}


/* Upward motion polish */
.hero-line{overflow:hidden}
.hero-line>span,
.hero-kicker,
.hero-text,
.hero-actions>*,
.hero-logo-wrap,
.hero-brand-token,
.hero-real-mark,
.service-logo{
  will-change:transform,opacity;
}

.hero-kicker-dot,
.hero-live-dot{
  animation:pbPulse 2.2s ease-in-out infinite;
}

.hero-logo-orbit-a{
  animation:pbOrbit 24s linear infinite;
}
.hero-logo-orbit-b{
  animation:pbOrbitReverse 18s linear infinite;
}

.hero-logo-wrap{
  animation:pbLogoBreath 5.5s ease-in-out infinite;
}

.service-logo,
.hero-brand-token,
.hero-primary,
.hero-secondary,
.product-buy,
.refresh-button{
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.service-logo:hover{
  transform:translateY(-4px);
  border-color:#3d6688;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.hero-brand-token:hover{
  transform:translateY(-3px);
  border-color:#3d6688;
}
.hero-primary:hover,
.hero-secondary:hover,
.product-buy:hover,
.refresh-button:hover{
  transform:translateY(-2px);
}
.hero-primary span:last-child{
  display:inline-block;
  transition:transform .22s ease;
}
.hero-primary:hover span:last-child{
  transform:translateX(4px);
}

@keyframes pbPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.12);opacity:.72}
}
@keyframes pbOrbit{
  to{transform:rotate(360deg)}
}
@keyframes pbOrbitReverse{
  to{transform:rotate(-360deg)}
}
@keyframes pbLogoBreath{
  0%,100%{filter:drop-shadow(0 0 0 rgba(67,201,255,0))}
  50%{filter:drop-shadow(0 0 14px rgba(67,201,255,.18))}
}

@media(prefers-reduced-motion:reduce){
  .hero-kicker-dot,
  .hero-live-dot,
  .hero-logo-orbit-a,
  .hero-logo-orbit-b,
  .hero-logo-wrap{
    animation:none!important;
  }
  .service-logo,
  .hero-brand-token,
  .hero-primary,
  .hero-secondary,
  .product-buy,
  .refresh-button{
    transition:none!important;
  }
}


/* Motion visibility + CSS fallback */
html:not(.gsap-ready) .hero-kicker,
html:not(.gsap-ready) .hero-line>span,
html:not(.gsap-ready) .hero-text,
html:not(.gsap-ready) .hero-actions>*,
html:not(.gsap-ready) .service-logo,
html:not(.gsap-ready) .hero-services-more,
html:not(.gsap-ready) .hero-real-mark,
html:not(.gsap-ready) .hero-logo-wrap,
html:not(.gsap-ready) .hero-brand-token,
html:not(.gsap-ready) .hero-service-strip>*{
  animation:pbFallbackRise .8s both cubic-bezier(.2,.7,.2,1);
}
html:not(.gsap-ready) .hero-line:nth-child(2)>span{animation-delay:.1s}
html:not(.gsap-ready) .hero-text{animation-delay:.16s}
html:not(.gsap-ready) .hero-actions>*{animation-delay:.22s}
html:not(.gsap-ready) .hero-logo-wrap{animation-delay:.12s}

@keyframes pbFallbackRise{
  from{opacity:0;transform:translateY(54px)}
  to{opacity:1;transform:translateY(0)}
}

.hero-logo-scene,
.hero-copy,
.hero-service-strip{
  will-change:transform;
}

@media(prefers-reduced-motion:reduce){
  html:not(.gsap-ready) .hero-kicker,
  html:not(.gsap-ready) .hero-line>span,
  html:not(.gsap-ready) .hero-text,
  html:not(.gsap-ready) .hero-actions>*,
  html:not(.gsap-ready) .service-logo,
  html:not(.gsap-ready) .hero-services-more,
  html:not(.gsap-ready) .hero-real-mark,
  html:not(.gsap-ready) .hero-logo-wrap,
  html:not(.gsap-ready) .hero-brand-token,
  html:not(.gsap-ready) .hero-service-strip>*{
    animation-duration:.35s;
  }
}