/* ===========================================================
   Vosss — revamp v3 ("midnight studio")
   Loaded after style.css / home-v2.css / motion.css on pages whose
   <body> has both .v2 and .v3. Adds an elegant dark hero + header,
   serif accents, and the new homepage sections (pain points,
   3D template wall, process timeline, testimonials).
   Every rule is scoped to body.v3.
=========================================================== */
body.v3{
  --night: #070b18;
  --night-2: #0b1226;
  --night-3: #111a33;
  --night-line: rgba(255,255,255,.09);
  --night-ink: #f4f6fb;
  --night-soft: rgba(233,238,250,.72);
  --night-faint: rgba(233,238,250,.5);
  --bg: #f6f7fb;
  --bg-alt: #edf0f7;
  --ink: #0b1220;
  --ink-soft: #465063;
  --ink-faint: #667085;
  --line: #e3e7ef;
  --accent: #2f5cf5;
  --accent-soft: #eaf0ff;
  --accent-2: #13b5d1;
  --grad: linear-gradient(105deg, #2f5cf5 0%, #2a8ee6 55%, #13b5d1 100%);
  --grad-light: linear-gradient(100deg, #9bb6ff 0%, #6f93ff 40%, #5fd6ea 100%);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --shadow-card: 0 1px 2px rgba(11,18,32,.04), 0 20px 44px -26px rgba(11,18,32,.28);
  --shadow-lift: 0 2px 4px rgba(11,18,32,.05), 0 34px 70px -34px rgba(47,92,245,.42);
  background: var(--bg);
}
body.v3 ::selection{ background: #c9d6ff; color: var(--ink); }

/* ---------- serif accent in headings ---------- */
body.v3 h1 em,
body.v3 h2 em,
body.v3 .v3-serif{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
body.v3 .section-head h2{ font-weight: 750; letter-spacing: -0.035em; line-height: 1.08; }
body.v3 .section-head h2 em{ color: var(--accent); font-size: 1.08em; line-height: 1; }
body.v3 .section-head p{ max-width: 620px; }
body.v3 .section-head.center{ margin-inline: auto; text-align: center; }
body.v3 .section-head.center p{ margin-inline: auto; }

/* quieter, more editorial eyebrow */
body.v3 .eyebrow{
  background: transparent; border: 0; box-shadow: none; padding: 0;
  color: var(--accent); font-size: 12px; letter-spacing: .16em; gap: 12px;
}
body.v3 .eyebrow::before{ width: 28px; height: 1px; border-radius: 0; background: currentColor; opacity: .6; }
body.v3 .section-head .eyebrow{ margin-bottom: 18px; }

/* ---------- buttons ---------- */
body.v3 .btn{ border-radius: 999px; letter-spacing: -0.005em; }
body.v3 .btn-accent,
body.v3 .btn-primary{ background: var(--grad); }
body.v3 .btn-white{
  background: #fff; color: var(--ink); border: 0;
  box-shadow: 0 12px 30px -14px rgba(255,255,255,.55), inset 0 -2px 0 rgba(11,18,32,.06);
}
body.v3 .btn-white:hover{ transform: translateY(-2px); background: #fff; }
body.v3 .btn-line{
  background: rgba(255,255,255,.04); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.v3 .btn-line:hover{ border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); color: #fff; }
body.v3 .btn svg{ width: 18px; height: 18px; }

/* ===========================================================
   HEADER — dark glass on every v3 page
=========================================================== */
body.v3 .site-header{
  background: rgba(7,11,24,.94);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
body.v3 .site-header.scrolled{
  background: rgba(7,11,24,.86);
  border-bottom-color: var(--night-line);
  box-shadow: 0 14px 40px -24px rgba(0,0,0,.6);
}
body.v3 .nav-links a{ color: var(--night-soft); position: relative; }
body.v3 .nav-links a:hover{ color: #fff; }
body.v3 .nav-links a.active{ color: #fff; }
body.v3 .nav-links a.active::after{
  content:""; position:absolute; left:50%; bottom:-8px; width:4px; height:4px; border-radius:50%;
  background: #6f93ff; transform: translateX(-50%);
}
body.v3 .site-header .btn-primary{
  background: #fff; color: var(--ink); box-shadow: none;
}
body.v3 .site-header .btn-primary:hover{ background: #e9eeff; }
body.v3 .nav-toggle{ color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }

/* ===========================================================
   Mobile menu — full-screen overlay (js/v3.js builds the markup)
=========================================================== */
/* burger → X */
body.v3 .nav-toggle{ position: relative; width: 46px; height: 46px; cursor: pointer; transition: background .3s, border-color .3s, transform .5s var(--ease); }
body.v3 .nav-toggle:active{ transform: scale(.92); }
body.v3 .nt-lines{ position: relative; width: 18px; height: 12px; display: block; }
body.v3 .nt-lines i{
  position: absolute; left: 0; height: 1.8px; border-radius: 2px; background: currentColor;
  transition: transform .55s var(--ease), opacity .3s, width .45s var(--ease), top .45s var(--ease);
}
body.v3 .nt-lines i:nth-child(1){ top: 0; width: 100%; }
body.v3 .nt-lines i:nth-child(2){ top: 5px; width: 70%; left: auto; right: 0; }
body.v3 .nt-lines i:nth-child(3){ top: 10px; width: 100%; }
body.v3.menu-open .nav-toggle{ background: #fff; color: var(--night); border-color: #fff; }
body.v3.menu-open .nt-lines i:nth-child(1){ top: 5px; transform: rotate(45deg); }
body.v3.menu-open .nt-lines i:nth-child(2){ opacity: 0; width: 0; }
body.v3.menu-open .nt-lines i:nth-child(3){ top: 5px; transform: rotate(-45deg); }

/* header sits above the overlay; goes transparent while it's open */
body.v3.menu-open .site-header{ background: transparent; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.v3.menu-open{ overflow: hidden; }
body.v3.menu-open .wa-float,
body.v3.menu-open .m-top{ opacity: 0; pointer-events: none; }

body.v3 .mobile-menu{
  display: block; position: fixed; inset: 0; z-index: 49;
  background: var(--night); border: 0; color: var(--night-ink);
  clip-path: circle(0px at var(--ox, calc(100% - 44px)) var(--oy, 38px));
  visibility: hidden;
  transition: clip-path .75s cubic-bezier(.7,0,.2,1), visibility 0s linear .75s;
}
body.v3 .mobile-menu.open{
  clip-path: circle(150vmax at var(--ox, calc(100% - 44px)) var(--oy, 38px));
  visibility: visible;
  transition: clip-path .85s cubic-bezier(.7,0,.2,1), visibility 0s;
}
@media (min-width: 880px){ body.v3 .mobile-menu{ display: none; } }

body.v3 .mm-inner{
  position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 104px 24px max(28px, env(safe-area-inset-bottom)); isolation: isolate;
}
/* backdrop: glowing orbs, faint grid, and a big 3D "VOSSS" in perspective */
body.v3 .mm-bg{ position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; perspective: 700px; }
body.v3 .mm-orb{
  position: absolute; right: -130px; top: 70px; width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 3%, #b9caff 12%, #4f7bff 40%, #13206b 78%);
  box-shadow: inset -26px -36px 70px rgba(3,6,20,.65), 0 30px 110px -10px rgba(79,123,255,.55);
  opacity: 0; transform: translate3d(40px,-30px,0) scale(.7);
  transition: opacity 1s .2s, transform 1.4s .15s var(--ease);
}
body.v3 .mm-orb.b{
  right: auto; left: -70px; top: auto; bottom: 150px; width: 150px; height: 150px;
  background: radial-gradient(circle at 35% 30%, #e6fbff 0 4%, #5fd6ea 28%, #0e6d86 70%, #062335 100%);
  box-shadow: inset -16px -22px 40px rgba(3,6,20,.6), 0 20px 80px -10px rgba(19,181,209,.5);
}
body.v3 .mobile-menu.open .mm-orb{ opacity: .7; transform: none; animation: mmFloat 9s ease-in-out 1.4s infinite; }
body.v3 .mobile-menu.open .mm-orb.b{ opacity: .75; animation-duration: 11s; }
@keyframes mmFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }
body.v3 .mm-grid{
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 10%, transparent 75%);
}
body.v3 .mm-word{
  position: absolute; left: -4%; right: -4%; bottom: -3vh; text-align: center; white-space: nowrap;
  font-weight: 800; font-size: 38vw; line-height: .8; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09);
  transform: rotateX(38deg) translateY(30%); transform-origin: 50% 100%;
  opacity: 0; transition: opacity 1s .3s, transform 1.4s .2s var(--ease);
}
body.v3 .mm-word b{ -webkit-text-stroke: 1px rgba(111,147,255,.35); }
body.v3 .mobile-menu.open .mm-word{ opacity: 1; transform: rotateX(38deg) translateY(0); }

body.v3 .mm-label{
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--night-faint);
}
body.v3 .mm-label span{ width: 28px; height: 1px; background: currentColor; }

/* links */
body.v3 .mm-list{ padding: 0; display: flex; flex-direction: column; gap: 0; }
body.v3 .mm-list li{ overflow: hidden; border-bottom: 1px solid var(--night-line); }
body.v3 .mobile-menu .mm-list a{
  display: flex; align-items: center; gap: 16px; padding: 15px 2px; border: 0;
  font-size: clamp(30px, 9.5vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1;
  color: var(--night-ink);
  transform: translateY(105%) rotate(3deg); transform-origin: 0 100%; opacity: 0;
  transition: transform .8s var(--ease), opacity .5s, color .3s;
  transition-delay: 0s;
}
body.v3 .mobile-menu.open .mm-list a{
  transform: none; opacity: 1;
  transition-delay: calc(.28s + var(--i, 0) * .06s);
}
body.v3 .mm-num{
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: 0;
  color: var(--night-faint); min-width: 26px; transition: color .3s;
}
body.v3 .mm-text{ flex: 1; transition: transform .45s var(--ease); }
body.v3 .mm-list a svg{
  width: 22px; height: 22px; color: var(--night-faint);
  opacity: 0; transform: translate(-8px, 8px); transition: opacity .35s, transform .45s var(--ease), color .3s;
}
body.v3 .mm-list a:hover .mm-text,
body.v3 .mm-list a:focus-visible .mm-text{ transform: translateX(6px); }
body.v3 .mm-list a:hover svg,
body.v3 .mm-list a:focus-visible svg{ opacity: 1; transform: none; color: #fff; }
body.v3 .mm-list a.is-current .mm-text{
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.12em;
  background: var(--grad-light); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.v3 .mm-list a.is-current .mm-num{ color: #8aa6ff; }
body.v3 .mm-list a.is-current svg{ opacity: 1; transform: none; color: #8aa6ff; }

/* footer: WhatsApp CTA + contacts */
body.v3 .mm-foot{
  margin-top: auto; padding-top: 30px;
  opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .8s var(--ease);
}
body.v3 .mobile-menu.open .mm-foot{ opacity: 1; transform: none; transition-delay: .62s; }
body.v3 .mm-cta{
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px 20px 10px 10px; border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 15.5px;
  box-shadow: 0 20px 40px -18px rgba(111,147,255,.7);
}
body.v3 .mm-cta > span:nth-child(2){ flex: 1; }
body.v3 .mm-cta-ic{ width: 42px; height: 42px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; flex: none; }
body.v3 .mm-cta-ic svg{ width: 22px; height: 22px; }
body.v3 .mm-cta > svg{ width: 20px; height: 20px; }
body.v3 .mm-meta{
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px;
  font-size: 13.5px; color: var(--night-soft);
}
body.v3 .mobile-menu .mm-meta a{ padding: 0; border: 0; font-size: inherit; font-weight: 600; color: inherit; }
body.v3 .mm-social{ display: flex; gap: 8px; }
body.v3 .mobile-menu .mm-social a{
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--night-line); font-size: 11.5px; letter-spacing: .06em;
}
@media (max-height: 640px){
  body.v3 .mm-inner{ padding-top: 92px; }
  body.v3 .mobile-menu .mm-list a{ padding: 10px 2px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce){
  body.v3 .mobile-menu,
  body.v3 .mobile-menu.open{ transition: none; }
  body.v3 .mobile-menu .mm-list a,
  body.v3 .mm-foot,
  body.v3 .mm-word,
  body.v3 .mm-orb{ transition: none !important; animation: none !important; }
}
body.v3 .lang-btn{ border-color: rgba(255,255,255,.18); }

/* ===========================================================
   HERO — midnight, with the WebGL scene from js/hero-3d.js
=========================================================== */
body.v3 .hero-v2{
  background:
    radial-gradient(60% 70% at 78% 30%, rgba(47,92,245,.30) 0%, transparent 62%),
    radial-gradient(40% 50% at 95% 90%, rgba(19,181,209,.18) 0%, transparent 70%),
    radial-gradient(50% 60% at 0% 0%, rgba(111,147,255,.10) 0%, transparent 70%),
    var(--night);
  color: var(--night-ink);
  margin-top: -1px;
}
body.v3 .hero-v2::after{
  /* soft fade into the next dark band */
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:-1;
  background: linear-gradient(180deg, transparent, var(--night));
  pointer-events:none;
}
body.v3 .hero-glow{ display:none; }
body.v3 .hero-grid-lines{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 60% 40%, #000 15%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 65% at 60% 40%, #000 15%, transparent 75%);
}
body.v3 .hero-v2 .eyebrow-mono{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  color: var(--night-soft);
  box-shadow: none;
  font-weight: 600; letter-spacing: .12em; font-size: 11.5px;
}
body.v3 .hero-v2 h1{
  color: #fff;
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.02;
  font-size: clamp(40px, 5.2vw, 76px);
  text-wrap: balance;
}
body.v3 .hero-v2 h1 em{
  background: var(--grad-light);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 1.1em; line-height: .9;
  padding-right: .06em; /* keeps the italic's overhang from being clipped */
}
/* motion.css pans a gradient through the highlight — lighter stops for the dark hero */
body.v3.m-on .hero-v2 h1 em,
body.v3.m-on .page-hero-v2 h1 em,
body.v3.m-on .hero-v2 h1 em .m-wi,
body.v3.m-on .page-hero-v2 h1 em .m-wi{
  background-image: linear-gradient(100deg, #9bb6ff 0%, #5fd6ea 30%, #b9a8ff 55%, #9bb6ff 80%, #5fd6ea 100%);
}
body.v3 .hero-v2 p.lead{ color: var(--night-soft); max-width: 560px; }
body.v3 .hero-v2 .hero-actions{ display:flex; flex-wrap: wrap; align-items:center; }
body.v3 .hero-v2 .btn-ghost{
  background: rgba(255,255,255,.04); color: #fff; border: 1px solid rgba(255,255,255,.22);
}
body.v3 .hero-v2 .btn-ghost:hover{ border-color: rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.08); }
body.v3 .hero-note{
  display:flex; flex-wrap:wrap; gap: 6px 18px; margin-top: 18px;
  font-size: 13px; color: var(--night-faint);
}
body.v3 .hero-note span{ display:inline-flex; align-items:center; gap:7px; }
body.v3 .hero-note svg{ width: 15px; height: 15px; color: #5fd6ea; }
body.v3 .hero-v2 .hero-stats > div{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.1);
  box-shadow: none;
}
body.v3 .hero-v2 .hero-stats div strong{ color: #fff; }
body.v3 .hero-v2 .hero-stats div span{ color: var(--night-faint); }
body.v3 .hero-chip{
  background: rgba(13,20,42,.6); color: #fff;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.7);
}
/* keep the first tech chip off the floating "O" (top-left of the 3D cluster) */
@media (min-width: 901px){ body.v3 .hero-chip-1{ left: 0; top: 40%; } }
body.v3 .hero-scroll{ border-color: rgba(255,255,255,.22); }
body.v3 .hero-scroll span{ background: #6f93ff; }

/* inner-page heroes share the midnight look */
body.v3 .page-hero-v2{ padding-bottom: 8px; }
body.v3 .page-hero-v2::after{ background: linear-gradient(180deg, transparent, var(--night)); height: 80px; }
body.v3 .page-hero-v2 .eyebrow-mono::before{ background: #6f93ff; }
body.v3 .page-hero-v2 + .sec-v2,
body.v3 .page-hero-v2 + section{ padding-top: 96px; }
body.v3 .page-hero-v2 .hero-top{ padding: 72px 0 88px; }

/* ===========================================================
   Tech marquee — continues the dark band under the hero
=========================================================== */
body.v3 section.m-marquee{ background: var(--night); border: 0; padding: 22px 0 64px; }
body.v3 .m-tech:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
body.v3 .m-marquee-label{ color: var(--night-faint); }
body.v3 .m-tech{
  background: rgba(255,255,255,.04); color: var(--night-soft);
  border-color: rgba(255,255,255,.08); box-shadow: none;
}
body.v3 .m-marquee-row{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ===========================================================
   Pain points → solution
=========================================================== */
body.v3 .v3-pain{ background: var(--bg); }
body.v3 .pain-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; perspective: 1400px; }
body.v3 .pain-card{
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: 34px 30px 30px; box-shadow: var(--shadow-card);
  transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .4s, border-color .3s;
}
body.v3 .pain-card:hover{ box-shadow: var(--shadow-lift); border-color: #d5defa; }
body.v3 .pain-num{
  font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: #c6d0e6;
  display:block; margin-bottom: 22px; transform: translateZ(30px);
}
body.v3 .pain-card h3{ font-size: 20px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); transform: translateZ(20px); }
body.v3 .pain-card p{ margin-top: 12px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; transform: translateZ(10px); }
body.v3 .pain-card .pain-quote{
  display:block; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line);
  font-size: 14px; color: var(--ink-faint); font-style: italic;
}
body.v3 .pain-answer{
  margin-top: 28px; display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: 24px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(47,92,245,.35), transparent 60%),
    var(--night-2);
  color: #fff;
}
body.v3 .pain-answer p{ font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; letter-spacing: -0.015em; max-width: 720px; line-height: 1.45; }
body.v3 .pain-answer p em{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; color: #9bb6ff; }
@media (max-width: 900px){ body.v3 .pain-grid{ grid-template-columns: 1fr; } }

/* ===========================================================
   Services / projects / FAQ — small v3 touches
=========================================================== */
body.v3 .svc-v2{ background: #fff; }
body.v3 .service-acc-num{ font-family: var(--serif); font-style: italic; font-weight: 400; color: #b8c3da; }
body.v3 .portfolio-copy h3{ letter-spacing: -0.03em; }
body.v3 .pf-num{ font-family: var(--serif); font-style: italic; }
body.v3 .pf-top{ flex-wrap: wrap; }
body.v3 .pf-status{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #9a5b00; background: #fff4de; border: 1px solid #f6d9a0;
  padding: 5px 11px; border-radius: 999px;
}
body.v3 .pf-status i{ width:7px; height:7px; border-radius:50%; background:#f59e0b; animation: v3Pulse 1.8s ease-out infinite; }
@keyframes v3Pulse{ 0%{ box-shadow:0 0 0 0 rgba(245,158,11,.5); } 80%,100%{ box-shadow:0 0 0 7px rgba(245,158,11,0); } }
body.v3 .pf-status-note{
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #fffaf0; border-left: 3px solid #f5b83d;
  font-size: 14px !important; line-height: 1.6; color: #6b5a3a !important;
}
body.v3 .portfolio-card.is-wip .portfolio-visual{ filter: saturate(.85); }
body.v3 .faq-item{ border-radius: 20px; }

/* ===========================================================
   Portofolio teaser (homepage) — "vector canvas"
   One big artboard on a dotted design-tool canvas: selection
   handles, a bezier pen path with anchors, wireframe sketches.
   js/v3.js cycles the designs with a pen-sweep reveal.
=========================================================== */
body.v3 .v3-wall-sec{
  position: relative;
  background:
    radial-gradient(46% 60% at 78% 46%, rgba(47,92,245,.24), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(19,181,209,.12), transparent 70%),
    var(--night);
  color: var(--night-ink);
  overflow: hidden;
  padding: 120px 0;
}
body.v3 .v3-wall-sec::before{
  /* dotted canvas grid, fading out toward the copy */
  content:""; position:absolute; inset: 0; pointer-events:none;
  background-image: radial-gradient(rgba(207,220,255,.16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 18%, #000 62%);
}
body.v3 .v3-wall-layout{ position: relative; display:grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
body.v3 .v3-wall-sec .eyebrow{ color: #8aa6ff; }
body.v3 .v3-wall-sec .section-head{ margin-bottom: 0; }
body.v3 .v3-wall-sec .section-head h2{ color: #fff; }
body.v3 .v3-wall-sec .section-head h2 em{ color: #9bb6ff; }
body.v3 .v3-wall-sec .section-head p{ color: var(--night-soft); }
body.v3 .wall-points{ margin-top: 28px; display:grid; gap: 14px; }
body.v3 .wall-points li{ display:flex; gap: 12px; align-items:flex-start; color: var(--night-soft); font-size: 15.5px; line-height: 1.55; }
body.v3 .wall-points svg{ flex: none; width: 20px; height: 20px; margin-top: 2px; color: #5fd6ea; }
body.v3 .wall-points b{ color: #fff; font-weight: 650; }
body.v3 .wall-cta{ margin-top: 34px; display:flex; flex-wrap:wrap; gap: 12px; }

/* ---------- canvas ---------- */
body.v3 .pf-canvas{ position: relative; min-width: 0; padding: 56px 44px 0; }
body.v3 .pf-deco{ position:absolute; inset: 0 0 64px; width: 100%; height: calc(100% - 64px); pointer-events: none; }
body.v3 .pf-guides line{ stroke: rgba(95,214,234,.2); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
/* bezier pen paths hugging two corners of the artboard */
body.v3 .pf-pen-svg{ position:absolute; z-index: 0; overflow: visible; pointer-events: none; }
body.v3 .pf-pen-bl{ left: -118px; bottom: -150px; width: 220px; }
body.v3 .pf-pen-tr{ right: -96px; top: -92px; width: 160px; }
body.v3 .pf-pen{ fill: none; stroke: #6f93ff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
body.v3 .pf-ctrl line{ stroke: rgba(155,182,255,.55); stroke-width: 1; }
body.v3 .pf-ctrl circle{ fill: var(--night); stroke: #9bb6ff; stroke-width: 1.4; }
body.v3 .pf-node rect{ fill: var(--night); stroke: #9bb6ff; stroke-width: 1.4; }
body.v3 .pf-pentool path{ fill: #fff; stroke: var(--night); stroke-width: 1.4; stroke-linejoin: round; }
body.v3 .pf-pentool circle{ fill: var(--night); }
body.v3 .pf-ctrl, body.v3 .pf-node, body.v3 .pf-pentool{ opacity: 0; transition: opacity .6s .9s; }
body.v3 .pf-canvas.is-in .pf-pen{ stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1); }
body.v3 .pf-canvas.is-in .pf-ctrl, body.v3 .pf-canvas.is-in .pf-node, body.v3 .pf-canvas.is-in .pf-pentool{ opacity: 1; }

/* wireframe sketches behind the artboard */
body.v3 .pf-ghost{ position:absolute; width: 46%; pointer-events:none; }
body.v3 .pf-ghost svg{ display:block; width:100%; height:auto; overflow: visible; }
body.v3 .pf-ghost rect, body.v3 .pf-ghost circle, body.v3 .pf-ghost path{ fill: none; stroke: rgba(155,182,255,.32); stroke-width: 1.2; stroke-linecap: round; }
body.v3 .pf-ghost > svg > rect:first-child{ stroke-dasharray: 4 5; fill: rgba(11,18,38,.55); }
body.v3 .pf-ghost-a{ right: 0; top: 0; transform: rotate(6deg); }
body.v3 .pf-ghost-b{ left: -8px; top: 34%; transform: rotate(-8deg); width: 34%; }

/* ---------- the artboard ---------- */
body.v3 .pf-board{
  position: relative; z-index: 1; margin: 0 auto; max-width: 560px;
  border-radius: 14px; background: #0f1831;
  outline: 1px solid rgba(95,214,234,.75); outline-offset: 7px;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), 0 30px 70px -30px rgba(47,92,245,.45);
}
body.v3 .pf-size{
  position:absolute; left: 50%; top: -34px; transform: translateX(-50%);
  padding: 3px 8px; border-radius: 5px; background: #5fd6ea; color: #06202a;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.v3 .pf-h{ position:absolute; z-index: 3; width: 11px; height: 11px; background: #fff; border: 1.5px solid #5fd6ea; border-radius: 2px; }
body.v3 .pf-h-tl{ left: -13px; top: -13px; } body.v3 .pf-h-tr{ right: -13px; top: -13px; }
body.v3 .pf-h-bl{ left: -13px; bottom: -13px; } body.v3 .pf-h-br{ right: -13px; bottom: -13px; }
body.v3 .pf-chrome{
  display:flex; align-items:center; gap: 6px; height: 34px; padding: 0 12px;
  background: #151f3b; border-radius: 14px 14px 0 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
body.v3 .pf-chrome i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
body.v3 .pf-chrome i:first-child{ background: #ff6b6b; } body.v3 .pf-chrome i:nth-child(2){ background: #ffd166; } body.v3 .pf-chrome i:nth-child(3){ background: #06d6a0; }
body.v3 .pf-url{
  margin-left: 10px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.06);
  font-size: 12px; color: rgba(233,238,250,.55);
}
body.v3 .pf-url b{ color: #fff; font-weight: 650; }
body.v3 .pf-view{ position: relative; display:block; aspect-ratio: 4/3; overflow: hidden; border-radius: 0 0 14px 14px; background: #0b1226; }
body.v3 .pf-img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: top center; }
body.v3 .pf-next{ clip-path: inset(0 100% 0 0); visibility: hidden; }
body.v3 .pf-next.go{ visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); }
body.v3 .pf-sweep{
  position:absolute; top:0; bottom:0; left:0; width: 2px; z-index: 2; opacity: 0;
  background: #5fd6ea; box-shadow: 0 0 0 1px rgba(95,214,234,.25), 0 0 24px 4px rgba(95,214,234,.45);
}
body.v3 .pf-sweep::after{
  /* the anchor riding the sweep */
  content:""; position:absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%,-50%) rotate(45deg);
  background: #fff; border: 1.5px solid #5fd6ea;
}
body.v3 .pf-sweep.go{ opacity: 1; left: 100%; transition: left 1.1s cubic-bezier(.77,0,.18,1), opacity .2s; }
body.v3 .pf-open{
  position:absolute; right: 14px; bottom: 14px; z-index: 2;
  display:inline-flex; align-items:center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  background: #fff; color: #0b1220; font-size: 13px; font-weight: 700;
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--ease);
}
body.v3 .pf-open svg{ width: 15px; height: 15px; }
body.v3 .pf-view:hover .pf-open, body.v3 .pf-view:focus-visible .pf-open{ opacity: 1; transform: none; }
body.v3 .pf-view:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* name tag pinned to the artboard, like a layer label */
body.v3 .pf-tag{
  position:absolute; z-index: 3; left: -26px; bottom: 34px;
  display:flex; flex-direction: column; gap: 2px; padding: 10px 14px 11px; border-radius: 12px;
  background: rgba(7,11,24,.86); border: 1px solid rgba(155,182,255,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.9);
  transition: opacity .35s, transform .35s var(--ease);
}
body.v3 .pf-tag.swap{ opacity: 0; transform: translateY(6px); }
body.v3 .pf-kind{ font-size: 11.5px; font-weight: 600; color: #8aa6ff; }
body.v3 .pf-name{ font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.05; color: #fff; }

/* ---------- design picker ---------- */
body.v3 .pf-strip{
  position: relative; z-index: 1; margin: 46px -44px 0; padding: 0 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
body.v3 .pf-chips{ display:flex; gap: 8px; overflow-x: auto; padding: 4px 44px 8px; margin: 0 -44px; scrollbar-width: none; scroll-behavior: smooth; }
body.v3 .pf-chips::-webkit-scrollbar{ display:none; }
body.v3 .pf-chip{
  --p: 0; position: relative; flex: none; overflow: hidden;
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  color: rgba(233,238,250,.62); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: color .3s, border-color .3s, background .3s;
}
body.v3 .pf-chip:hover{ color: #fff; border-color: rgba(255,255,255,.28); }
body.v3 .pf-chip.is-on{ color: #fff; border-color: rgba(95,214,234,.6); background: rgba(95,214,234,.08); }
body.v3 .pf-chip::after{
  /* time left before the next design */
  content:""; position:absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: #5fd6ea; transform-origin: left; transform: scaleX(var(--p));
}
body.v3 .pf-chip:focus-visible{ outline: 2px solid #5fd6ea; outline-offset: 2px; }

@media (max-width: 1000px){
  body.v3 .v3-wall-layout{ grid-template-columns: 1fr; gap: 24px; }
  body.v3 .v3-wall-sec::before{ -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 70%); mask-image: linear-gradient(180deg, transparent 30%, #000 70%); }
}
@media (max-width: 560px){
  body.v3 .v3-wall-sec{ padding: 80px 0 56px; }
  body.v3 .pf-canvas{ padding: 48px 18px 0; }
  body.v3 .pf-ghost-b, body.v3 .pf-pen-svg{ display: none; }
  body.v3 .pf-ghost-a{ width: 58%; right: -14px; top: 6px; }
  body.v3 .pf-tag{ left: -10px; bottom: 16px; padding: 8px 11px 9px; }
  body.v3 .pf-name{ font-size: 19px; }
  body.v3 .pf-strip{ margin: 36px -18px 0; padding: 0 18px; }
  body.v3 .pf-chips{ padding: 4px 18px 8px; margin: 0 -18px; }
  body.v3 .pf-open{ opacity: 1; transform: none; padding: 7px 11px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce){
  body.v3 .pf-pen{ stroke-dashoffset: 0; }
  body.v3 .pf-ctrl, body.v3 .pf-node, body.v3 .pf-pentool{ opacity: 1; transition: none; }
  body.v3 .pf-next.go, body.v3 .pf-sweep.go, body.v3 .pf-tag{ transition: none; }
  body.v3 .pf-sweep{ display: none; }
}

/* ===========================================================
   Process timeline (homepage)
=========================================================== */
body.v3 .v3-process{ background: var(--bg); }
body.v3 .steps{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; position: relative;
  counter-reset: step;
}
body.v3 .steps::before{
  content:""; position:absolute; left: 24px; right: 24px; top: 27px; height: 1px;
  background: linear-gradient(90deg, #c7d3f5, #c7d3f5 60%, transparent);
}
body.v3 .step{ position: relative; padding-right: 8px; }
body.v3 .step-dot{
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%;
  display:grid; place-items:center;
  background: #fff; border: 1px solid #d5ddf2;
  font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--accent);
  box-shadow: 0 10px 24px -14px rgba(47,92,245,.5);
  transition: background .3s, color .3s, transform .4s var(--ease);
}
body.v3 .step:hover .step-dot{ background: var(--accent); color:#fff; transform: translateY(-3px); }
body.v3 .step h3{ margin-top: 22px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); }
body.v3 .step p{ margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 1000px){
  body.v3 .steps{ grid-template-columns: 1fr; gap: 0; }
  body.v3 .steps::before{ left: 27px; right: auto; top: 20px; bottom: 20px; width: 1px; height: auto; background: #d5ddf2; }
  body.v3 .step{ display:grid; grid-template-columns: 54px 1fr; column-gap: 20px; padding: 0 0 28px; }
  body.v3 .step h3{ margin-top: 12px; }
  body.v3 .step p{ grid-column: 2; }
}

/* ===========================================================
   Testimonials (content/testimonials.json — hidden until enabled)
=========================================================== */
body.v3 .v3-testi{ background: #fff; }
body.v3 .v3-testi[hidden]{ display:none; }
body.v3 .testi-grid{
  display:flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 2px; padding: 4px 2px 12px; margin: -4px -2px 0;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
body.v3 .testi-grid::-webkit-scrollbar{ display:none; }
body.v3 .testi-grid > .testi-card{ flex: 0 0 calc((100% - 40px) / 3); margin: 0; scroll-snap-align: start; }
body.v3 .testi-nav{ display:flex; gap: 10px; margin-top: 24px; }
body.v3 .testi-nav[hidden]{ display:none; }
body.v3 .testi-btn{
  width: 48px; height: 48px; border-radius: 50%; display:grid; place-items:center; cursor:pointer;
  background:#fff; border: 1px solid var(--line); color: var(--ink);
  transition: background .25s, color .25s, border-color .25s;
}
body.v3 .testi-btn svg{ width: 20px; height: 20px; }
body.v3 .testi-btn:hover:not(:disabled){ background: var(--accent); border-color: var(--accent); color:#fff; }
body.v3 .testi-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
body.v3 .testi-btn:disabled{ opacity: .35; cursor: default; }
body.v3 .testi-card{
  position: relative; display:flex; flex-direction:column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 24px;
  padding: 30px; transition: transform .5s var(--ease), box-shadow .4s, background .3s;
}
body.v3 .testi-card:hover{ background: #fff; box-shadow: var(--shadow-lift); }
body.v3 .testi-card.is-featured{
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(47,92,245,.35), transparent 60%),
    var(--night-2);
  border-color: transparent; color: #fff;
}
body.v3 .testi-stars{ display:flex; gap: 3px; color: #f5b83d; }
body.v3 .testi-stars svg{ width: 16px; height: 16px; }
body.v3 .testi-card blockquote{
  margin: 18px 0 0; flex: 1;
  font-size: 16.5px; line-height: 1.65; color: var(--ink); letter-spacing: -0.005em;
}
body.v3 .testi-card.is-featured blockquote{ color: #fff; font-size: 18px; }
body.v3 .testi-card blockquote::before{
  content:"\201C"; display:block; font-family: var(--serif); font-size: 64px; line-height: .6; color: var(--accent); margin-bottom: 10px;
}
body.v3 .testi-card.is-featured blockquote::before{ color: #9bb6ff; }
body.v3 .testi-who{ display:flex; align-items:center; gap: 14px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
body.v3 .testi-card.is-featured .testi-who{ border-top-color: var(--night-line); }
body.v3 .testi-avatar{
  flex:none; width: 44px; height: 44px; border-radius: 50%; overflow:hidden;
  display:grid; place-items:center; font-weight: 800; font-size: 15px; color:#fff; background: var(--grad);
}
body.v3 .testi-avatar img{ width:100%; height:100%; object-fit:cover; }
body.v3 .testi-who b{ display:block; font-size: 15px; color: var(--ink); }
body.v3 .testi-who small{ display:block; font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
body.v3 .testi-card.is-featured .testi-who b{ color:#fff; }
body.v3 .testi-card.is-featured .testi-who small{ color: var(--night-faint); }
body.v3 .testi-tag{
  align-self:flex-start; margin-top: 16px; font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 5px 10px; border-radius: 999px;
}
body.v3 .testi-card.is-featured .testi-tag{ background: rgba(255,255,255,.1); color: #cfdcff; }
body.v3 .testi-preview-note{
  margin-top: 24px; padding: 14px 18px; border-radius: 14px;
  background: #fff7e6; border: 1px solid #f7d58b; color: #7a5200; font-size: 14px;
}
@media (max-width: 1000px){ body.v3 .testi-grid > .testi-card{ flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px){ body.v3 .testi-grid > .testi-card{ flex-basis: 86%; padding: 24px; } }

/* ===========================================================
   Why us — midnight
=========================================================== */
body.v3 .why-dark{
  background:
    radial-gradient(60% 70% at 90% 10%, rgba(47,92,245,.28), transparent 60%),
    var(--night);
}
body.v3 .why-dark .eyebrow-mono{ color: #8aa6ff; }
body.v3 .why-dark .section-head h2 em{ color: #9bb6ff; }
body.v3 .why-num-item .num{ font-family: var(--serif); font-style: italic; }

/* ===========================================================
   CTA band — midnight with a glowing 3D orb
=========================================================== */
body.v3 .cta-band{
  background:
    radial-gradient(50% 90% at 100% 0%, rgba(47,92,245,.55), transparent 60%),
    radial-gradient(40% 70% at 0% 100%, rgba(19,181,209,.25), transparent 70%),
    var(--night-2);
  box-shadow: 0 50px 100px -50px rgba(11,18,38,.9);
  overflow: hidden;
}
body.v3 .cta-band::before{ display:none; }
body.v3 .cta-band::after{
  content:""; position:absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 4%, #b9caff 14%, #4f7bff 42%, #13206b 78%);
  box-shadow: inset -30px -40px 80px rgba(3,6,20,.6), 0 40px 120px -20px rgba(79,123,255,.6);
  opacity: .85; pointer-events:none;
  animation: v3Orb 10s ease-in-out infinite;
}
@keyframes v3Orb{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-16px, 14px); } }
body.v3 .cta-band > *{ position: relative; z-index: 1; }
body.v3 .cta-band h2 em{ color: #9bb6ff; font-size: 1.08em; }
body.v3 .cta-band .eyebrow{ color: #cfdcff; background: transparent !important; }
body.v3 .cta-note{ margin-top: 18px; font-size: 13.5px; color: rgba(233,238,250,.6); }
@media (max-width: 720px){ body.v3 .cta-band::after{ width: 200px; height: 200px; right: -70px; top: -70px; opacity: .6; } }

/* ===========================================================
   Footer
=========================================================== */
body.v3 .site-footer{ background: var(--night); border-top: 1px solid var(--night-line); }

/* ===========================================================
   Portofolio page (template gallery) + Proyek page
=========================================================== */
body.v3 .pf-intro{ display:flex; justify-content:space-between; align-items:end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
body.v3 .pf-intro .section-head{ margin-bottom: 0; }
body.v3 .template-filter{ margin-bottom: 36px; }
body.v3 .template-filter button{ border-radius: 999px; }
body.v3 .template-filter button.active{ background: var(--ink); border-color: var(--ink); color: #fff; }
body.v3 .template-card{ border-radius: 22px; overflow: hidden; }
body.v3 .template-thumb{ position: relative; }
body.v3 .template-thumb::before{
  content:""; display:block; height: 22px;
  background:
    radial-gradient(circle at 14px 11px, #ff6b6b 3px, transparent 3.5px),
    radial-gradient(circle at 26px 11px, #ffd166 3px, transparent 3.5px),
    radial-gradient(circle at 38px 11px, #06d6a0 3px, transparent 3.5px),
    #eef1f7;
  border-bottom: 1px solid var(--line);
}
body.v3 .template-info h3{ letter-spacing: -0.02em; }
body.v3 .pf-how{ background: #fff; }
body.v3 .pf-how .steps{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px){ body.v3 .pf-how .steps{ grid-template-columns: 1fr; } }
body.v3 .pf-disclaimer{ margin-top: 28px; font-size: 13.5px; color: var(--ink-faint); max-width: 720px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  body.v3 .cta-band::after{ animation: none; }
  body.v3 .pain-card,
  body.v3 .testi-card{ transition: none; }
}

/* ===========================================================
   Chinese (zh-CN) — CJK font fallback & type tweaks
   Plus Jakarta Sans / Instrument Serif have no Chinese glyphs, so
   Chinese text uses the visitor's system CJK font. Negative tracking
   and serif italics that suit Latin headlines crowd Chinese characters.
=========================================================== */
html[lang="zh-CN"] body{
  font-family: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
}
html[lang="zh-CN"] body.v2 h1, html[lang="zh-CN"] body.v2 h2, html[lang="zh-CN"] body.v2 h3{ letter-spacing: 0; line-height: 1.25; }
html[lang="zh-CN"] body.v2 h1 em, html[lang="zh-CN"] body.v2 h2 em{ font-style: normal; font-family: inherit; font-size: 1em; }
html[lang="zh-CN"] body.v2 p, html[lang="zh-CN"] body.v2 li{ line-height: 1.8; }
/* keep a highlighted Chinese word on one line (e.g. hero "企业") */
html[lang="zh-CN"] #heroHeadlineHighlight, html[lang="zh-CN"] body.v2 h2 em{ white-space: nowrap; }

/* ===========================================================
   Paper-collage hero (js/hero-collage.js) — replaces the WebGL scene.
   A navy veil on the text side keeps the headline readable over the collage.
=========================================================== */
body.v3 .hero-v2.has-collage .hero-3d-canvas{ z-index: -2; }
body.v3 .hero-v2.has-collage .hero-bg,
body.v3 .hero-v2.has-collage .hero-chip{ display: none; }
body.v3 .hero-v2.has-collage::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(90deg, rgba(7,11,24,.95) 0%, rgba(7,11,24,.88) 38%, rgba(7,11,24,.45) 56%, rgba(7,11,24,0) 74%);
}
/* inner pages: keep the fade-to-night band at the bottom of the hero (it was pinned to the top) */
body.v3 .page-hero-v2.has-collage::after{ top: auto; bottom: 0; }
@media (max-width: 900px){
  body.v3 .hero-v2.has-collage::before{
    background: linear-gradient(180deg, rgba(7,11,24,.92) 0%, rgba(7,11,24,.8) 55%, rgba(7,11,24,.3) 100%);
  }
  body.v3 .page-hero-v2.has-collage::before{ background: rgba(7,11,24,.8); }
}

/* ===========================================================
   Vector motion — small cut-paper-style vector scenes that echo the
   collage hero: flat Vosss colours, navy outlines, stepped (stop-motion)
   movement. They only run once their card has scrolled in (.in), and stay
   still for visitors who prefer reduced motion.
=========================================================== */
body.v3 .vx-panel{
  margin: -8px -6px 24px; height: 150px; border-radius: 18px; overflow: hidden;
  background:
    linear-gradient(rgba(47,92,245,.06) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(47,92,245,.06) 1px, transparent 1px) 0 0 / 20px 20px,
    #eef2ff;
}
body.v3 .vx{ display:block; width:100%; height:100%; overflow: visible; }
body.v3 .vx *{ transform-box: fill-box; }
body.v3 .vx-panel .vx > *{ filter: drop-shadow(0 3px 0 rgba(28,42,85,.10)); }
body.v3 .pain-card:not(.in) .vx *{ animation-play-state: paused !important; }

/* 01 — the slow, broken website */
.vx-slow .vx-snail{ animation: vxSnail 7s steps(28) infinite; }
.vx-slow .vx-load{ transform-origin: left center; animation: vxLoad 7s steps(28) infinite; }
.vx-slow .vx-sk{ animation: vxBlink 1.2s steps(2, jump-none) infinite; }
.vx-slow .vx-d1{ animation-delay: .3s; } .vx-slow .vx-d2{ animation-delay: .6s; }
.vx-slow .vx-broken{ transform-origin: 50% 100%; animation: vxWobble 2.4s steps(4) infinite; }
@keyframes vxSnail{ from{ transform: translateX(0); } to{ transform: translateX(176px); } }
@keyframes vxLoad{ from{ transform: scaleX(.04); } to{ transform: scaleX(.9); } }
@keyframes vxBlink{ 0%{ opacity: 1; } 100%{ opacity: .45; } }
@keyframes vxWobble{ 0%,100%{ transform: rotate(0); } 25%{ transform: rotate(-4deg); } 75%{ transform: rotate(3deg); } }

/* 02 — spreadsheet & chat chaos */
.vx-chaos .vx-n1{ animation: vxSwapA 1.6s steps(1) infinite; }
.vx-chaos .vx-n2{ animation: vxSwapB 1.6s steps(1) infinite; }
.vx-chaos .vx-ne{ transform-origin: center; animation: vxPop 1.6s steps(3) infinite; }
.vx-chaos .vx-b{ transform-origin: 100% 50%; animation: vxBubble 4.8s steps(3) infinite; }
.vx-chaos .vx-b2{ animation-delay: .6s; } .vx-chaos .vx-b3{ animation-delay: 1.2s; }
@keyframes vxSwapA{ 0%{ opacity: 1; } 50%{ opacity: 0; } }
@keyframes vxSwapB{ 0%{ opacity: 0; } 50%{ opacity: 1; } }
@keyframes vxPop{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.18) rotate(-8deg); } }
@keyframes vxBubble{ 0%{ transform: scale(0); opacity: 0; } 12%,80%{ transform: scale(1); opacity: 1; } 92%,100%{ transform: scale(.6); opacity: 0; } }

/* 03 — the vendor who never replies */
.vx-ghost .vx-dev{ animation: vxFade 3.2s steps(4) infinite; }
.vx-ghost .vx-m{ transform-origin: 100% 50%; animation: vxBubble 6s steps(3) infinite; }
.vx-ghost .vx-m2{ animation-delay: .9s; }
.vx-ghost .vx-typing{ transform-origin: 0 50%; animation: vxTyping 6s steps(2) infinite; }
.vx-ghost .vx-q{ transform-origin: center; animation: vxFloat 2.4s steps(4) infinite; }
@keyframes vxFade{ 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }
@keyframes vxTyping{ 0%,30%{ opacity: 0; transform: scale(.4); } 38%,62%{ opacity: 1; transform: scale(1); } 70%,100%{ opacity: 0; transform: scale(.4); } }
@keyframes vxFloat{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-6px) rotate(10deg); } }

/* CTA — a Vosss paper plane looping along a dotted trail (same plane as the hero) */
body.v3 .cta-band .vx-cta{ position: absolute; left: 0; top: 6px; width: min(42%, 440px); height: auto; z-index: 0; pointer-events: none; opacity: .9; }
@media (max-width: 720px){ body.v3 .cta-band .vx-cta{ width: 80%; top: 0; opacity: .5; } }

@media (prefers-reduced-motion: reduce){
  body.v3 .vx *{ animation: none !important; }
  body.v3 .vx-cta .vx-plane{ display: none; }
}

/* ===========================================================
   "Kenapa Vosss" — blueprint line-art that draws itself (js/why-visual.js)
   A different motion language from the cut-paper cards: glowing strokes
   on a blueprint grid, drawn in when a reason becomes active.
=========================================================== */
body.v3 .why-visual-rail{ display: none; }
@media (min-width: 1000px){
  /* Text on the left, a larger drawing panel on the right. The panel's rail
     runs next to the heading and the list, and the panel stays pinned to the
     middle of the screen while the reasons scroll past. */
  body.v3 .why-dark .container{ display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 72px); }
  body.v3 .why-dark .section-head{ grid-column: 1; grid-row: 1; }
  body.v3 .why-dark .why-num-list{ grid-column: 1; grid-row: 2; }
  body.v3 .why-dark .section-more{ grid-column: 1; grid-row: 3; }
  /* each reason gets roughly a third of the screen, so the panel stays
     pinned in the middle while you scroll through them one by one */
  body.v3 .why-num-item{ min-height: 32vh; align-content: center; padding-top: 36px; padding-bottom: 36px; }
  /* overflow:hidden on the section would stop the panel from sticking;
     clip still hides the background canvas edges but lets sticky work. */
  body.v3 .why-dark{ overflow: clip; }
  body.v3 .why-visual-rail{ display: block; grid-column: 2; grid-row: 1 / span 3; container-type: inline-size; margin-bottom: -72px; }
  body.v3 .why-visual-pin{
    /* panel width: as wide as the column allows, max 620px, and never taller
       than the screen; it sticks with its centre on the centre of the screen
       (below the 76px header). */
    --wv-w: min(100cqw, 620px, calc((100vh - 150px) * 400 / 340));
    position: sticky; top: calc(38px + 50vh - var(--wv-w) * 0.425);
    width: var(--wv-w); margin-inline: auto;
  }
  body.v3 .why-visual{
    display: block; position: relative;
    aspect-ratio: 400 / 340; width: 100%;
    border-radius: 28px; border: 1px solid rgba(138,166,255,.16);
    background:
      linear-gradient(rgba(138,166,255,.07) 1px, transparent 1px) 0 0 / 28px 28px,
      linear-gradient(90deg, rgba(138,166,255,.07) 1px, transparent 1px) 0 0 / 28px 28px,
      radial-gradient(80% 70% at 50% 40%, rgba(47,92,245,.2), transparent 70%),
      rgba(7,11,24,.55);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 40px 80px -40px rgba(0,0,0,.8);
  }
}
body.v3 .wv-count{ position: absolute; left: 24px; top: 20px; z-index: 2; font-size: 14px; color: rgba(233,238,250,.45); font-variant-numeric: tabular-nums; }
body.v3 .wv-count b{ color: #67e8f9; font-weight: 700; }
body.v3 .wv-scene{
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  opacity: 0; transition: opacity .45s ease;
  filter: drop-shadow(0 0 6px rgba(103,232,249,.35));
}
body.v3 .wv-scene.on{ opacity: 1; }
body.v3 .wv-scene .d{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) calc(var(--i, 0) * 80ms); }
body.v3 .wv-scene.on .d{ stroke-dashoffset: 0; }
/* dashed connectors fade in after the drawing */
body.v3 .wv-scene .dd{ opacity: 0; transition: opacity .8s ease .7s; }
body.v3 .wv-scene.on .dd{ opacity: .8; }
body.v3 .wv-live{ opacity: 0; transition: opacity .4s ease 1s; }
body.v3 .wv-scene.on .wv-live{ opacity: 1; }
body.v3 .wv-scene *{ transform-box: fill-box; }
/* scene loops */
body.v3 .wv-ms{ transform-origin: center; animation: wvMs 4s steps(1) infinite; animation-delay: calc(var(--k) * 1s); }
@keyframes wvMs{ 0%{ opacity: 1; transform: scale(1); } 25%,100%{ opacity: .15; transform: scale(.6); } }
body.v3 .wv-bar{ transform-origin: 50% 100%; animation: wvBar 4s cubic-bezier(.65,0,.35,1) infinite; animation-delay: calc(var(--k) * .25s); }
@keyframes wvBar{ 0%{ transform: scaleY(.1); } 45%,80%{ transform: scaleY(1); } 100%{ transform: scaleY(.1); } }
body.v3 .wv-write{ stroke-dasharray: 1; animation: wvWrite 3s linear infinite; }
@keyframes wvWrite{ 0%{ stroke-dashoffset: 1; } 70%,100%{ stroke-dashoffset: 0; } }
body.v3 .wv-shackle{ animation: wvLock 3.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes wvLock{ 0%,15%{ transform: translateY(-16px); } 35%,85%{ transform: translateY(0); } 100%{ transform: translateY(-16px); } }
body.v3 .wv-scan{ animation: wvScan 3.2s linear infinite; }
@keyframes wvScan{ 0%{ transform: translateY(150px); opacity: 0; } 20%{ opacity: .8; } 80%{ opacity: .8; } 100%{ transform: translateY(274px); opacity: 0; } }
body.v3 .wv-tile{ opacity: .08; animation: wvTile 3.6s steps(1) infinite; animation-delay: calc(var(--k) * .3s); }
@keyframes wvTile{ 0%{ opacity: .95; } 18%,100%{ opacity: .08; } }
@media (prefers-reduced-motion: reduce){
  body.v3 .wv-scene .d{ transition: none; stroke-dashoffset: 0; }
  body.v3 .wv-scene *{ animation: none !important; }
}

/* ===========================================================
   "Cara kerja" timeline — a comet runs along the line and lights each
   step as it passes (pure CSS, third motion language: kinetic Swiss)
=========================================================== */
body.v3 .v3-process .steps::after{
  content:""; position:absolute; top: 26px; left: 24px; width: 140px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(19,181,209,0), #13b5d1 60%, #2f5cf5);
  box-shadow: 0 0 14px rgba(19,181,209,.7);
  animation: vxComet 5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes vxComet{ 0%{ left: 0; opacity: 0; } 8%{ opacity: 1; } 88%{ opacity: 1; } 100%{ left: calc(100% - 140px); opacity: 0; } }
body.v3 .v3-process .step-dot{ animation: vxStepLit 5s ease-in-out infinite; }
body.v3 .v3-process .step:nth-child(2) .step-dot{ animation-delay: .95s; }
body.v3 .v3-process .step:nth-child(3) .step-dot{ animation-delay: 1.9s; }
body.v3 .v3-process .step:nth-child(4) .step-dot{ animation-delay: 2.85s; }
body.v3 .v3-process .step:nth-child(5) .step-dot{ animation-delay: 3.8s; }
body.v3 .v3-process .step:nth-child(6) .step-dot{ animation-delay: 4.6s; }
@keyframes vxStepLit{
  0%, 22%, 100%{ background: #fff; color: var(--accent); transform: none; box-shadow: 0 10px 24px -14px rgba(47,92,245,.5); }
  6%, 14%{ background: var(--accent); color: #fff; transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 6px rgba(47,92,245,.14), 0 16px 30px -12px rgba(47,92,245,.7); }
}
@media (max-width: 1000px){
  body.v3 .v3-process .steps::after{ left: 26px; top: 20px; width: 3px; height: 120px; background: linear-gradient(180deg, rgba(19,181,209,0), #13b5d1 60%, #2f5cf5); animation-name: vxCometV; }
  @keyframes vxCometV{ 0%{ top: 0; opacity: 0; } 8%{ opacity: 1; } 88%{ opacity: 1; } 100%{ top: calc(100% - 120px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce){
  body.v3 .v3-process .steps::after{ display: none; }
  body.v3 .v3-process .step-dot{ animation: none; }
}

/* ===========================================================
   Layanan — isometric build (5 slabs = 5 steps stack into a tower,
   flag goes up, then it rebuilds). Springy drops: a 4th motion language.
=========================================================== */
body.v3 .iso-build{ display: none; }
@media (min-width: 1100px){
  body.v3 #proses > .container{ position: relative; }
  body.v3 .iso-build{ display: block; position: absolute; right: 0; top: 150px; width: 300px; pointer-events: none; }
  body.v3 .iso-build svg{ display: block; width: 100%; height: auto; overflow: visible; }
}
body.v3 .iso-build *{ transform-box: fill-box; }
body.v3 .iso-slab{ animation: isoDrop 8s cubic-bezier(.34,1.45,.6,1) infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes isoDrop{
  0%{ transform: translateY(-240px); opacity: 0; }
  9%{ transform: translateY(0); opacity: 1; }
  78%{ transform: translateY(0); opacity: 1; }
  90%, 100%{ transform: translateY(0); opacity: 0; }
}
body.v3 .iso-shadow{ transform-origin: center; animation: isoShadow 8s ease-in-out infinite; }
@keyframes isoShadow{ 0%{ transform: scale(.55); opacity: .4; } 30%, 80%{ transform: scale(1); opacity: 1; } 95%, 100%{ transform: scale(.55); opacity: .4; } }
body.v3 .iso-flag{ transform-origin: 0% 100%; animation: isoFlag 8s ease infinite; }
@keyframes isoFlag{ 0%, 33%{ transform: scaleY(0); opacity: 0; } 40%{ transform: scaleY(1.12); opacity: 1; } 44%, 80%{ transform: scaleY(1); opacity: 1; } 88%, 100%{ transform: scaleY(1); opacity: 0; } }
body.v3 .iso-spark{ opacity: 0; animation: isoSpark 8s steps(1) infinite; }
@keyframes isoSpark{ 0%, 40%{ opacity: 0; } 42%, 48%{ opacity: 1; } 50%, 54%{ opacity: 0; } 56%, 62%{ opacity: 1; } 64%, 100%{ opacity: 0; } }

/* ===========================================================
   Proyek — a conveyor of everyday operations (receipts, laundry,
   boxes, trucks, QR stickers, dashboards) running under the hero:
   kinetic marquee, a 5th motion language.
=========================================================== */
body.v3 .vx-conveyor{ position: relative; overflow: hidden; padding: 34px 0 0; background: var(--bg); }
body.v3 .cv-track{ display: flex; width: max-content; animation: cvRun 36s linear infinite; }
body.v3 .cv-row{ display: flex; gap: 46px; padding-right: 46px; }
body.v3 .cv-item{ display: block; width: 78px; height: 88px; animation: cvBob 1.2s steps(2, jump-none) infinite; animation-delay: calc(var(--j) * -.3s); }
body.v3 .cv-item svg{ display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgba(28,42,85,.10)); }
body.v3 .cv-truck{ width: 94px; }
@keyframes cvRun{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes cvBob{ 0%{ transform: translateY(0) rotate(-2deg); } 100%{ transform: translateY(-5px) rotate(2deg); } }
body.v3 .cv-belt{ position: relative; height: 26px; margin-top: 4px; background: #1c2a55; box-shadow: inset 0 3px 0 rgba(255,255,255,.12); }
body.v3 .cv-rollers{ position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: center; }
body.v3 .cv-rollers i{
  width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #9db4f7; border-top-color: #13b5d1;
  animation: cvRoll .9s linear infinite;
}
@keyframes cvRoll{ to{ transform: rotate(-360deg); } }
@media (max-width: 720px){ body.v3 .cv-item{ width: 60px; height: 68px; } body.v3 .cv-truck{ width: 72px; } body.v3 .cv-row{ gap: 30px; padding-right: 30px; } }

/* ===========================================================
   Kontak — a live chat that plays over the map: message sent, the
   other side types, a reply arrives, ticks turn blue. UI micro-interaction,
   the 6th motion language. The map keeps working underneath.
=========================================================== */
body.v2 .contact-map{ position: relative; }
body.v3 .vx-chat{
  position: absolute; left: 18px; top: 18px; z-index: 2; width: min(320px, calc(100% - 36px));
  border-radius: 18px; overflow: hidden; pointer-events: none;
  background: #efeae2; box-shadow: 0 24px 50px -20px rgba(11,18,38,.45), 0 0 0 1px rgba(11,18,38,.06);
  font-size: 13.5px; line-height: 1.45;
}
body.v3 .vc-head{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #0b3d35; color: #fff; }
body.v3 .vc-av{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--grad); }
body.v3 .vc-who b{ display: block; font-size: 14px; }
body.v3 .vc-who small{ display: block; font-size: 11.5px; opacity: .75; }
body.v3 .vc-body{ position: relative; height: 150px; padding: 12px; }
body.v3 .vc-msg{ position: absolute; max-width: 78%; padding: 8px 11px; border-radius: 12px; color: #111b21; box-shadow: 0 1px 0 rgba(11,18,38,.12); }
body.v3 .vc-out{ right: 12px; top: 12px; background: #d9fdd3; border-top-right-radius: 4px; padding-right: 30px; }
body.v3 .vc-in{ left: 12px; top: 70px; background: #fff; border-top-left-radius: 4px; }
body.v3 .vc-ticks{ position: absolute; right: 9px; bottom: 8px; width: 16px; height: 9px; stroke: #8696a0; animation: vcTicks 9s steps(1) infinite; }
body.v3 .vc-typing{ position: absolute; left: 12px; top: 74px; display: flex; gap: 4px; padding: 11px 12px; background: #fff; border-radius: 12px; border-top-left-radius: 4px; }
body.v3 .vc-typing i{ width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: vcDot .9s steps(2, jump-none) infinite; }
body.v3 .vc-typing i:nth-child(2){ animation-delay: .15s; } body.v3 .vc-typing i:nth-child(3){ animation-delay: .3s; }
body.v3 .vc-out{ transform-origin: 100% 0; animation: vcOut 9s cubic-bezier(.34,1.45,.6,1) infinite; }
body.v3 .vc-typing{ animation: vcTyping 9s steps(1) infinite; }
body.v3 .vc-in{ transform-origin: 0 0; animation: vcIn 9s cubic-bezier(.34,1.45,.6,1) infinite; }
@keyframes vcOut{ 0%, 4%{ opacity: 0; transform: scale(.6) translateY(8px); } 9%, 92%{ opacity: 1; transform: none; } 97%, 100%{ opacity: 0; transform: none; } }
@keyframes vcTicks{ 0%, 24%{ stroke: #8696a0; } 25%, 100%{ stroke: #53bdeb; } }
@keyframes vcTyping{ 0%, 27%{ opacity: 0; } 28%, 51%{ opacity: 1; } 52%, 100%{ opacity: 0; } }
@keyframes vcIn{ 0%, 52%{ opacity: 0; transform: scale(.6) translateY(8px); } 57%, 92%{ opacity: 1; transform: none; } 97%, 100%{ opacity: 0; transform: none; } }
@keyframes vcDot{ 0%{ transform: translateY(0); opacity: .5; } 100%{ transform: translateY(-3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce){
  body.v3 .iso-build *, body.v3 .vx-conveyor *, body.v3 .vx-chat *{ animation: none !important; }
  body.v3 .vc-typing{ display: none; }
  body.v3 .vc-ticks{ stroke: #53bdeb; }
}

/* ===========================================================
   Portofolio — "morphing layout" wireframe (js/vx-morph.js)
   One browser; its blocks glide into a new design every 3.2s.
=========================================================== */
@media (min-width: 1000px){
  body.v3 .pf-how > .container{ display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px 64px; align-items: center; }
  body.v3 .pf-how > .container > .steps{ grid-column: 1 / -1; margin-top: 36px; }
  body.v3 .pf-how .section-head{ margin-bottom: 0; }
}
body.v3 .vx-morph{ --ease: cubic-bezier(.72,0,.18,1); width: 100%; max-width: 600px; margin: 8px auto 28px; }
body.v3 .mf-browser{ border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lift); overflow: hidden; }
body.v3 .mf-chrome{ display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
body.v3 .mf-chrome > i{ width: 9px; height: 9px; border-radius: 50%; background: #cfd6e4; }
body.v3 .mf-chrome > i:first-child{ background: #ff8a7a; } body.v3 .mf-chrome > i:nth-child(2){ background: #ffc85a; } body.v3 .mf-chrome > i:nth-child(3){ background: #5fd08a; }
body.v3 .mf-url{ margin-left: 12px; flex: 1; max-width: 260px; height: 20px; border-radius: 99px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-faint); white-space: nowrap; overflow: hidden; }
body.v3 .mf-lock{ width: 7px; height: 7px; border-radius: 2px; background: #5fd08a; flex: none; }
body.v3 .mf-screen{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f4fbfd; transition: background-color .8s var(--ease); }
body.v3 .mf-screen .m{ position: absolute; display: block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: var(--r, 4px);
  transition: left .95s var(--ease), top .95s var(--ease), width .95s var(--ease), height .95s var(--ease), border-radius .95s var(--ease), background-color .8s var(--ease), opacity .6s, box-shadow .8s;
  transition-delay: var(--d, 0s); }
body.v3 .m-img{ --d: 0s; overflow: hidden; background: #13b5d1 linear-gradient(160deg, rgba(7,11,24,.2), rgba(255,255,255,.28)); }
body.v3 .m-hills{ position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; fill: rgba(7,11,24,.28); transition: opacity .7s; }
body.v3 .m-sun{ position: absolute; right: 14%; top: 16%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 0 6px rgba(255,227,154,.25); transition: opacity .7s, transform .9s var(--ease); }
body.v3 .m-nav{ background: rgba(255,255,255,0); }
body.v3 .m-logo{ --d: .03s; background: #fff; }
body.v3 .m-links{ --d: .05s; display: flex !important; gap: 8%; align-items: center; }
body.v3 .m-links i{ flex: 1; height: 42%; border-radius: 99px; background: rgba(255,255,255,.8); transition: background-color .8s; }
body.v3 .m-h1{ --d: .07s; background: #fff; }
body.v3 .m-h2{ --d: .11s; background: rgba(255,255,255,.65); }
body.v3 .m-btn{ --d: .15s; background: #fff; box-shadow: 0 6px 14px -8px rgba(7,11,24,.5); }
body.v3 .m-c{ background: #fff; border: 1px solid rgba(11,18,32,.07); box-shadow: 0 10px 20px -16px rgba(11,18,32,.45); overflow: hidden; }
body.v3 .m-c1{ --d: .19s; } body.v3 .m-c2{ --d: .25s; } body.v3 .m-c3{ --d: .31s; }
body.v3 .m-c i{ position: absolute; left: 8%; right: 8%; top: 9%; height: var(--ci, 50%); border-radius: 3px; background: #d6f3f8; transition: height .95s var(--ease), background-color .8s; transition-delay: inherit; }
body.v3 .m-c::before, body.v3 .m-c::after{ content: ""; position: absolute; left: 8%; height: 7%; border-radius: 99px; background: #dfe4ee; transition: top .95s var(--ease), width .95s var(--ease), opacity .6s; }
body.v3 .m-c::before{ top: calc(var(--ci, 50%) + 18%); width: 70%; }
body.v3 .m-c::after{ top: calc(var(--ci, 50%) + 30%); width: 46%; }
body.v3 .m-cursor{ position: absolute; z-index: 5; width: 5.2%; left: var(--cx, 18%); top: var(--cy, 49%); transition: left 1.1s var(--ease) .35s, top 1.1s var(--ease) .35s; filter: drop-shadow(0 3px 4px rgba(7,11,24,.35)); }
body.v3 .m-cursor svg{ display: block; width: 100%; fill: var(--night); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
body.v3 .m-cursor b{ position: absolute; left: -40%; top: -40%; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
body.v3 .vx-morph.click .m-cursor b{ animation: mfClick .6s ease-out; }
body.v3 .vx-morph.click .m-cursor svg{ animation: mfPress .3s ease-out; }
@keyframes mfClick{ 0%{ transform: scale(.3); opacity: .9; } 100%{ transform: scale(1.6); opacity: 0; } }
@keyframes mfPress{ 50%{ transform: scale(.82); } }

/* L0 — Villa & Resort: full-bleed photo, text on image, 3 cards */
body.v3 .vx-morph[data-l="0"] .m-img{ --x:0%; --y:0%; --w:100%; --h:62%; --r:0px; }
body.v3 .vx-morph[data-l="0"] .m-nav{ --x:0%; --y:0%; --w:100%; --h:10%; --r:0px; }
body.v3 .vx-morph[data-l="0"] .m-logo{ --x:4%; --y:3.4%; --w:9%; --h:3.6%; }
body.v3 .vx-morph[data-l="0"] .m-links{ --x:64%; --y:3.4%; --w:31%; --h:3.6%; }
body.v3 .vx-morph[data-l="0"] .m-h1{ --x:7%; --y:22%; --w:46%; --h:7%; }
body.v3 .vx-morph[data-l="0"] .m-h2{ --x:7%; --y:33%; --w:32%; --h:4.2%; }
body.v3 .vx-morph[data-l="0"] .m-btn{ --x:7%; --y:43%; --w:17%; --h:8%; --r:5px; }
body.v3 .vx-morph[data-l="0"] .m-c1{ --x:6%; --y:69%; --w:27%; --h:25%; --r:6px; }
body.v3 .vx-morph[data-l="0"] .m-c2{ --x:36.5%; --y:69%; --w:27%; --h:25%; --r:6px; }
body.v3 .vx-morph[data-l="0"] .m-c3{ --x:67%; --y:69%; --w:27%; --h:25%; --r:6px; }
body.v3 .vx-morph[data-l="0"] .m-cursor{ --cx:19%; --cy:49%; }

/* L1 — Klinik Kecantikan: split hero, round photo, soft pills */
body.v3 .vx-morph[data-l="1"] .mf-screen{ background: #eef3ff; }
body.v3 .vx-morph[data-l="1"] .m-img{ --x:57%; --y:16%; --w:34%; --h:54.4%; --r:50%; background-color: #9bb6ff; }
body.v3 .vx-morph[data-l="1"] .m-nav{ --x:0%; --y:0%; --w:100%; --h:10%; --r:0px; background: #fff; }
body.v3 .vx-morph[data-l="1"] .m-logo{ --x:4%; --y:3.4%; --w:9%; --h:3.6%; --r:99px; background: var(--accent); }
body.v3 .vx-morph[data-l="1"] .m-links{ --x:60%; --y:3.4%; --w:34%; --h:3.6%; }
body.v3 .vx-morph[data-l="1"] .m-h1{ --x:7%; --y:24%; --w:42%; --h:7%; --r:99px; background: var(--ink); }
body.v3 .vx-morph[data-l="1"] .m-h2{ --x:7%; --y:35%; --w:34%; --h:4.2%; --r:99px; background: #b7c3db; }
body.v3 .vx-morph[data-l="1"] .m-btn{ --x:7%; --y:46%; --w:20%; --h:8%; --r:99px; background: var(--accent); }
body.v3 .vx-morph[data-l="1"] .m-c1{ --x:7%; --y:80%; --w:26%; --h:11%; --r:99px; --ci:0%; }
body.v3 .vx-morph[data-l="1"] .m-c2{ --x:37%; --y:80%; --w:26%; --h:11%; --r:99px; --ci:0%; }
body.v3 .vx-morph[data-l="1"] .m-c3{ --x:67%; --y:80%; --w:26%; --h:11%; --r:99px; --ci:0%; }
body.v3 .vx-morph[data-l="1"] .m-cursor{ --cx:21%; --cy:52%; }

/* L2 — Kantor Hukum: dark, centred and formal */
body.v3 .vx-morph[data-l="2"] .mf-screen{ background: var(--night-2); }
body.v3 .vx-morph[data-l="2"] .m-img{ --x:8%; --y:56%; --w:84%; --h:14%; --r:3px; background-color: #1d2a55; }
body.v3 .vx-morph[data-l="2"] .m-nav{ --x:0%; --y:0%; --w:100%; --h:10%; --r:0px; background: var(--night); }
body.v3 .vx-morph[data-l="2"] .m-logo{ --x:45.5%; --y:3.4%; --w:9%; --h:3.6%; --r:1px; background: #e9c46a; }
body.v3 .vx-morph[data-l="2"] .m-links{ --x:72%; --y:3.4%; --w:24%; --h:3.6%; }
body.v3 .vx-morph[data-l="2"] .m-links i{ background: rgba(255,255,255,.35); }
body.v3 .vx-morph[data-l="2"] .m-h1{ --x:18%; --y:19%; --w:64%; --h:8%; --r:1px; background: #f4f6fb; }
body.v3 .vx-morph[data-l="2"] .m-h2{ --x:28%; --y:31%; --w:44%; --h:4%; --r:1px; background: rgba(233,238,250,.4); }
body.v3 .vx-morph[data-l="2"] .m-btn{ --x:41%; --y:40%; --w:18%; --h:7.5%; --r:1px; background: #e9c46a; }
body.v3 .vx-morph[data-l="2"] .m-c{ background: var(--night-3); border-color: rgba(255,255,255,.08); }
body.v3 .vx-morph[data-l="2"] .m-c::before, body.v3 .vx-morph[data-l="2"] .m-c::after{ background: rgba(255,255,255,.18); }
body.v3 .vx-morph[data-l="2"] .m-c1{ --x:8%; --y:76%; --w:26%; --h:17%; --r:2px; --ci:0%; }
body.v3 .vx-morph[data-l="2"] .m-c2{ --x:37%; --y:76%; --w:26%; --h:17%; --r:2px; --ci:0%; }
body.v3 .vx-morph[data-l="2"] .m-c3{ --x:66%; --y:76%; --w:26%; --h:17%; --r:2px; --ci:0%; }
body.v3 .vx-morph[data-l="2"] .m-cursor{ --cx:52%; --cy:46%; }

/* L3 — Toko Online: promo banner + big product cards */
body.v3 .vx-morph[data-l="3"] .mf-screen{ background: #fff; }
body.v3 .vx-morph[data-l="3"] .m-img{ --x:5%; --y:13%; --w:90%; --h:22%; --r:8px; background-color: var(--accent); }
body.v3 .vx-morph[data-l="3"] .m-nav{ --x:0%; --y:0%; --w:100%; --h:10%; --r:0px; background: #fff; box-shadow: 0 1px 0 var(--line); }
body.v3 .vx-morph[data-l="3"] .m-logo{ --x:4%; --y:3.4%; --w:9%; --h:3.6%; background: var(--accent); }
body.v3 .vx-morph[data-l="3"] .m-links{ --x:52%; --y:3%; --w:44%; --h:4.4%; }
body.v3 .vx-morph[data-l="3"] .m-links i{ background: var(--bg-alt); }
body.v3 .vx-morph[data-l="3"] .m-h1{ --x:9%; --y:18%; --w:36%; --h:5.5%; }
body.v3 .vx-morph[data-l="3"] .m-h2{ --x:9%; --y:26%; --w:24%; --h:3.5%; }
body.v3 .vx-morph[data-l="3"] .m-btn{ --x:73%; --y:20%; --w:16%; --h:7.5%; --r:99px; }
body.v3 .vx-morph[data-l="3"] .m-c1{ --x:5%; --y:40%; --w:28.5%; --h:54%; --r:8px; --ci:58%; }
body.v3 .vx-morph[data-l="3"] .m-c2{ --x:35.75%; --y:40%; --w:28.5%; --h:54%; --r:8px; --ci:58%; }
body.v3 .vx-morph[data-l="3"] .m-c3{ --x:66.5%; --y:40%; --w:28.5%; --h:54%; --r:8px; --ci:58%; }
body.v3 .vx-morph[data-l="3"] .m-c i{ background: var(--accent-soft); }
body.v3 .vx-morph[data-l="3"] .m-cursor{ --cx:83%; --cy:25%; }
body.v3 .vx-morph:not([data-l="0"]) .m-hills{ opacity: 0; }
body.v3 .vx-morph[data-l="1"] .m-sun, body.v3 .vx-morph[data-l="2"] .m-sun{ opacity: 0; transform: translateY(40%); }
body.v3 .vx-morph[data-l="3"] .m-sun{ opacity: 0; transform: scale(.4); }
body.v3 .vx-morph[data-l="1"] .m-links i{ background: #cfd8ea; }

body.v3 .mf-meta{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 0 4px; }
body.v3 .mf-label{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--ink); }
body.v3 .mf-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(19,181,209,.18); animation: mfBlink 1.6s steps(2) infinite; }
body.v3 .mf-name{ display: inline-block; transition: opacity .25s, transform .25s; }
body.v3 .mf-name.swap{ opacity: 0; transform: translateY(6px); }
body.v3 .mf-steps{ display: inline-flex; gap: 6px; }
body.v3 .mf-steps i{ width: 18px; height: 4px; border-radius: 99px; background: var(--line); transition: background-color .4s, width .4s; }
body.v3 .mf-steps i.on{ width: 32px; background: var(--grad); }
@keyframes mfBlink{ 50%{ opacity: .35; } }
@media (prefers-reduced-motion: reduce){
  body.v3 .vx-morph *{ transition: none !important; animation: none !important; }
}

/* ===========================================================
   Blog — "typewriter" (js/vx-type.js)
   Titles are typed onto a sheet, the bell rings, the sheet rolls up.
=========================================================== */
body.v3 .vx-type{ padding: 44px 0 30px; background: var(--bg); }
body.v3 .vt-wrap{ display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 48px; align-items: center; }
body.v3 .vt-copy{ padding-top: 40px; }
body.v3 .vt-copy p{ margin-top: 14px; max-width: 380px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
body.v3 .vt-machine{ position: relative; width: 100%; max-width: 480px; justify-self: end; }
body.v3 .vt-slot{ position: relative; height: 176px; margin: 0 auto -22px; width: 100%; clip-path: inset(-400px 0 0 0); z-index: 0; }
body.v3 .vt-paper{ position: absolute; left: 13%; right: 13%; bottom: -10px; height: 196px; padding: 18px 20px 0; background: #fffdf8; border: 1px solid #ece7da; border-bottom: 0;
  box-shadow: 0 -2px 0 rgba(11,18,32,.02), 0 18px 30px -22px rgba(11,18,32,.35);
  background-image: repeating-linear-gradient(to bottom, transparent 0 25px, rgba(47,92,245,.08) 25px 26px); background-position: 0 58px;
  transition: transform .75s cubic-bezier(.6,0,.2,1), opacity .75s; transform-origin: 50% 100%; }
body.v3 .vt-paper.feed{ transform: translateY(100%); transition: none; }
body.v3 .vt-paper.up{ transform: translateY(-70%) scaleY(.35); opacity: 0; }
body.v3 .vt-meta{ display: block; font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; min-height: 11px; }
body.v3 .vt-text{ margin: 0; font: 700 16px/26px "Courier New", ui-monospace, Menlo, Consolas, monospace; color: var(--ink); letter-spacing: -.01em; max-height: 104px; overflow: hidden; }
body.v3 .vt-caret{ display: inline-block; width: 2px; height: 18px; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: vtCaret 1s steps(2) infinite; }
body.v3 .vx-type .typing .vt-caret{ animation: none; }
body.v3 .vt-rule{ display: none; }
@keyframes vtCaret{ 50%{ opacity: 0; } }
body.v3 .vt-body{ position: relative; z-index: 1; display: block; width: 100%; overflow: visible; filter: drop-shadow(0 16px 18px rgba(7,11,24,.22)); }
body.v3 .vt-roller{ fill: var(--night-3); stroke: #2a375e; stroke-width: 1; }
body.v3 .vt-knob circle{ fill: var(--accent); }
body.v3 .vt-knob path{ stroke: rgba(255,255,255,.75); stroke-width: 2.4; stroke-linecap: round; fill: none; }
body.v3 .vt-knob{ transform-box: fill-box; transform-origin: center; transition: transform .8s cubic-bezier(.6,0,.2,1); }
body.v3 .vx-type .roll .vt-knob{ transform: rotate(-180deg); }
body.v3 .vt-case{ fill: var(--night-2); stroke: #1c2748; stroke-width: 1.5; }
body.v3 .vt-stripe{ stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .7; }
body.v3 .vt-key{ fill: #e9eefb; stroke: #0b1226; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .08s, fill .08s; }
body.v3 .vt-space{ fill: #e9eefb; transform-box: fill-box; transform-origin: center; transition: transform .08s; }
body.v3 .vt-key.hit{ fill: #9bb6ff; transform: translateY(2.5px) scale(.84); }
body.v3 .vt-space.hit{ transform: translateY(2px) scaleY(.7); }
body.v3 .vt-bell path{ fill: #ffc85a; } body.v3 .vt-bell circle{ fill: #ffc85a; }
body.v3 .vt-bell{ transform-box: fill-box; transform-origin: 50% 0; }
body.v3 .vt-ding{ stroke: #ffc85a; stroke-width: 2.4; stroke-linecap: round; fill: none; opacity: 0; }
body.v3 .vx-type .ding .vt-bell{ animation: vtBell .5s ease-in-out 2; }
body.v3 .vx-type .ding .vt-ding{ animation: vtDing .9s ease-out; }
@keyframes vtBell{ 25%{ transform: rotate(14deg); } 75%{ transform: rotate(-14deg); } }
@keyframes vtDing{ 0%{ opacity: 0; transform: translateY(4px); } 30%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(-4px); } }
body.v3 .vx-type .typing .vt-slot{ animation: vtJig .12s steps(2) infinite; }
@keyframes vtJig{ 50%{ transform: translateX(-1px); } }
@media (max-width: 900px){
  body.v3 .vt-wrap{ grid-template-columns: 1fr; gap: 10px; }
  body.v3 .vt-copy{ padding-top: 0; }
  body.v3 .vt-machine{ justify-self: center; max-width: 400px; margin-top: 22px; }
  body.v3 .vt-slot{ height: 160px; }
  body.v3 .vt-paper{ height: 180px; left: 11%; right: 11%; padding: 16px 16px 0; }
  body.v3 .vt-text{ font-size: 14.5px; line-height: 24px; max-height: 96px; }
}
@media (prefers-reduced-motion: reduce){
  body.v3 .vx-type *{ animation: none !important; transition: none !important; }
}