.hero-wrap{ position:relative; }

.hero-wrap > .hero-badge{
  position:absolute;
  top:4px;
  left:var(--inset-x);
  z-index:2;
  display:block;
  border:none;
  padding:0;
  margin:0;
  background:transparent;
}
.hero-wrap > .hero-badge .curva-badge{
  transform:scale(.82);
  transform-origin:left center;
}
@media (max-width:640px){
  .hero-wrap > .hero-badge{
    top:0;
    left:var(--inset-x);
  }
  .hero-wrap > .hero-badge .curva-badge{
    transform:scale(.72);
    transform-origin:left center;
  }
}

.hero-v2 .hero-badge-wrap{
  display:flex;
  justify-content:flex-start;
  margin-top:4px;
  margin-bottom:14px;
}
.hero-v2 .curva-badge{
  transform:scale(.82);
  transform-origin:left center;
}
@media (max-width:767px){
  .hero-v2 .hero-badge-wrap{ margin-top:-14px; }
  .hero-v2 .curva-badge{ transform:scale(.72); transform-origin:left center; }
}

.hero-v2{
  position:relative;
  padding:120px 0 0;
  overflow:hidden;
  text-align:center;
}
main#content > .hero-v2{ padding-top:96px; }

.hero-v2.hero-inset{
  position:relative;
  margin:calc(var(--header-h) + 8px) var(--inset-x) 0;
  border-radius:10px;
  overflow:hidden;
  background:var(--surface-2);
  isolation:isolate;

  --nw:240px; 
  --nh:65px; 
  --nr:10px;
  --cw:100px;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 calc(var(--nh) + var(--nr)) / 100% calc(100% - var(--nh) - var(--nr)) no-repeat,
    linear-gradient(#000 0 0) var(--nr) var(--nh) / calc(100% - var(--nr)) calc(100% - var(--nh)) no-repeat,
    radial-gradient(closest-side circle,#000 99%,#0000) 0 var(--nh) / calc(var(--nr)*2) calc(var(--nr)*2) no-repeat,
    linear-gradient(#000 0 0) calc(var(--nw) + var(--cw)) 0 / calc(100% - var(--nw) - var(--cw)) calc(var(--nh) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 76' preserveAspectRatio='none'%3E%3Cpath d='M0 76 C72 76 98 0 170 0 L170 76 Z' fill='%23000'/%3E%3C/svg%3E") var(--nw) 0 / var(--cw) calc(var(--nh) + 1px) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 calc(var(--nh) + var(--nr)) / 100% calc(100% - var(--nh) - var(--nr)) no-repeat,
    linear-gradient(#000 0 0) var(--nr) var(--nh) / calc(100% - var(--nr)) calc(100% - var(--nh)) no-repeat,
    radial-gradient(closest-side circle,#000 99%,#0000) 0 var(--nh) / calc(var(--nr)*2) calc(var(--nr)*2) no-repeat,
    linear-gradient(#000 0 0) calc(var(--nw) + var(--cw)) 0 / calc(100% - var(--nw) - var(--cw)) calc(var(--nh) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 76' preserveAspectRatio='none'%3E%3Cpath d='M0 76 C72 76 98 0 170 0 L170 76 Z' fill='%23000'/%3E%3C/svg%3E") var(--nw) 0 / var(--cw) calc(var(--nh) + 1px) no-repeat;
}
.hero-v2.hero-inset .curva-stack{ margin-top:30px; }

.hero-v2.hero-inset::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.072) 0%,
    rgba(255,255,255,.060) 45%,
    rgba(255,255,255,.082) 100%);
  z-index:1;
  pointer-events:none;
}
[data-theme="dark"] .hero-v2.hero-inset::after{
  background:linear-gradient(180deg,
    rgba(8,10,18,.072) 0%,
    rgba(8,10,18,.058) 45%,
    rgba(8,10,18,.082) 100%);
}
.hero-v2.hero-inset > *:not(.hero-bg-video){
  position:relative;
  z-index:3;
}

@media (max-width:900px){
  .hero-v2.hero-inset{
    height:auto;
    max-height:none;
    overflow:visible;
  }
}
@media (max-width:767px){
  .hero-v2{ padding-top:70px; }
  .hero-v2.hero-inset .curva-stack{ margin-top:20; }
}
@media (max-width:640px){
  .hero-v2.hero-inset{
    margin-top:calc(var(--header-h) + -5px);
    --nw:200px;
    --nh:44px;
    --nr:10px;
    --cw:60px;
  }
}

/* Video background di dalam frame */
.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .hero-bg-video{ display:none; }
}

.hero-v2.hero-inset .hero-paint-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .hero-v2.hero-inset .hero-paint-canvas{ display:none; }
}

.curva-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.hero-v2 .curva-stack{ z-index:1; }

.stack-word{
  font-size:clamp(70px,10vw,180px);
  font-weight:500;
  line-height:.90;
  letter-spacing:-2px;
  margin:0;padding:0;
  color:var(--text);
  transition:opacity .6s ease,filter .6s ease,transform .6s ease;
}
.hero-v2.hero-inset .stack-word{ color:var(--text); }

.stack-word:not(.active){
  opacity:.30;
  animation:focusBreath 6s ease-in-out infinite;
}
.stack-word.top{
  animation-delay:0s;
  font-size:clamp(70px,10vw,100px);
  font-weight:500;
}
.stack-word.bottom{
  animation-delay:3s;
  font-size:clamp(70px,10vw,100px);
  font-weight:500;
}
.stack-word.active{
  position:relative;
  overflow:visible;
  font-size:clamp(70px,10vw,100px);
}
.dynamic-word{
  min-width:min(900px,90vw);
  text-align:center;
}
@media (max-width:767px){
  .stack-word{ font-size:clamp(40px,12vw,70px); }
  .stack-word.top,.stack-word.bottom{ font-size:clamp(40px,12vw,70px); }
  .stack-word.active{ font-size:clamp(40px,12vw,70px); }
}

@keyframes focusBreath{
  0%,100%{opacity:.80;filter:blur(0px)}
  50%{opacity:.02;filter:blur(8px)}
}
@keyframes premiumFlow{
  0%{background-position:50% 0%}
  50%{background-position:50% 100%}
  100%{background-position:50% 0%}
}
@keyframes heroPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}
@keyframes chromeGlitch{
  0%,94%,100%{transform:translateX(0)}
  95%{transform:translateX(-2px) skewX(-2deg)}
  96%{transform:translateX(2px) skewX(2deg)}
  97%{transform:translateX(-1px) skewX(-1deg)}
  98%{transform:translateX(0)}
}

.hero-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  perspective:900px;
  perspective-origin:50% 45%;
}
.hero-v2 .hero-stage{ margin-top:5px; }
@media (max-width:767px){
  .hero-v2 .hero-stage{ perspective:600px; }
}

.hero-model-wrap{
  position:relative;
  z-index:2;
  width:320px;
  height:320px;
  margin-top:-100px;
  margin-bottom:-25px;
}
.hero-model{
  width:100%;
  height:100%;
  --poster-color:transparent;
}
@media (max-width:767px){
  .hero-model-wrap{ width:220px;height:220px;margin-bottom:-15px;margin-top:-65px; }
}

.hero-glass{
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto;
  padding:20px 40px 20px;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:0px solid rgba(255,255,255,.55);
  box-shadow:none;
}
[data-theme="dark"] .hero-glass{
  background:rgba(18,18,22,.050);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.hero-glass h2{
  font-size:clamp(1.3rem,2.6vw,1.8em);
  font-weight:700;margin:0 0 .5em;
  color:var(--text);
}
.hero-glass p{
  color:var(--muted);
  max-width:640px;margin:0 auto;
  font-size:1rem;line-height:1.5
}
.hero-glass .hero-actions{ margin-top:1.2em; } 

@media (max-width:767px){
  .hero-glass{ margin-left:16px;margin-right:16px;padding:24px 20px; }
}
.hero-v2 .services-marquee{
  max-width:none;
  width:100%;
  margin:20px 0 0;
  padding:14px 0 18px;
  border-top:1px solid var(--line);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.hero-v2 .services-marquee .marquee-track{
  display:flex;
  gap:10px;
  width:max-content;
  will-change:transform;
}
.hero-v2 .services-marquee:hover .marquee-track{ animation-play-state:paused; }
.hero-v2 .services-marquee span{
  flex:none;white-space:nowrap;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text);
  font-size:.8rem;
  padding:.4em 1em;
  border-radius:999px;
}
[data-theme="dark"] .hero-v2 .services-marquee span{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:var(--text);
}
@media (max-width:767px){
  .hero-v2 .services-marquee{ margin-top:14px; }
}

@keyframes heroMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--marquee-shift, 50%)))}
}