:root {
      --vc-bg: #070a13;
      --vc-card: rgba(255, 255, 255, .06);
      --vc-card2: rgba(255, 255, 255, .09);
      --vc-line: rgba(255, 255, 255, .13);
      --vc-text: #f8fbff;
      --vc-muted: rgba(248, 251, 255, .76);
      --vc-soft: rgba(248, 251, 255, .58);
      --vc-orange: #ff8a3d;
      --vc-pink: #ff4fa3;
      --vc-blue: #5c7cff;
      --vc-green: #17c964;
      --vc-container: 1180px;
      --vc-radius: 28px;
      --vc-shadow: 0 24px 80px rgba(0, 0, 0, .34)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: radial-gradient(circle at 12% 6%, rgba(255, 79, 163, .17), transparent 28%), radial-gradient(circle at 86% 14%, rgba(92, 124, 255, .18), transparent 27%), linear-gradient(180deg, #070a13 0%, #090d19 48%, #060914 100%);
      color: var(--vc-text);
      font-family: Poppins, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    }

    img {
      max-width: 100%;
      display: block
    }

    a {
      color: inherit
    }

    .vc-container {
      width: min(var(--vc-container), calc(100% - 40px));
      margin-inline: auto
    }

    .vc-section {
      padding: 88px 0;
      position: relative
    }

    .vc-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      border-radius: 999px;
      background: rgba(255, 138, 61, .12);
      border: 1px solid rgba(255, 138, 61, .24);
      color: #ffd8bd;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em
    }

    .vc-h2 {
      font-size: clamp(32px, 4vw, 54px);
      line-height: 1.04;
      margin: 18px 0 14px;
      letter-spacing: -.04em
    }

    .vc-lead {
      font-size: 18px;
      line-height: 1.75;
      color: var(--vc-muted);
      max-width: 850px
    }

    .vc-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 28px
    }

    .vc-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 22px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 950;
      line-height: 1;
      color: #fff;
      transition: transform .18s ease, filter .18s ease, box-shadow .18s ease
    }

    .vc-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.06)
    }

    .vc-btn-primary {
      background: linear-gradient(135deg, var(--vc-pink), var(--vc-orange));
      box-shadow: 0 18px 40px rgba(255, 79, 163, .25)
    }

    .vc-btn-call {
      background: linear-gradient(135deg, #2563eb, #8b5cf6);
      box-shadow: 0 18px 40px rgba(99, 102, 241, .25)
    }

    .vc-btn-ghost {
      background: rgba(255, 255, 255, .08);
      border: 1px solid var(--vc-line);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08)
    }

    .hero {
      padding: 122px 0 80px;
      position: relative;
      overflow: hidden
    }

    .hero:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(7, 10, 19, .94) 0%, rgba(7, 10, 19, .82) 42%, rgba(7, 10, 19, .32) 100%);
      pointer-events: none
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      gap: 44px;
      align-items: center
    }

    .hero h1 {
      font-size: clamp(40px, 6vw, 74px);
      line-height: .97;
      letter-spacing: -.06em;
      margin: 18px 0 18px
    }

    .hero h1 span {
      background: linear-gradient(135deg, #fff 0%, #ffd0aa 48%, #ff65aa 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .hero p {
      font-size: clamp(17px, 2vw, 21px);
      line-height: 1.68;
      color: rgba(255, 255, 255, .80);
      max-width: 760px
    }

    .proof-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 28px
    }

    .proof-row div {
      padding: 14px;
      border: 1px solid var(--vc-line);
      background: rgba(255, 255, 255, .055);
      border-radius: 18px
    }

    .proof-row strong {
      display: block;
      font-size: 20px
    }

    .proof-row span {
      font-size: 12px;
      color: var(--vc-soft)
    }

    .hero-card {
      position: relative;
      border-radius: 34px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: var(--vc-shadow);
      overflow: hidden;
      padding: 18px
    }

    .hero-card img {
      border-radius: 24px
    }

    .mini-note {
      position: absolute;
      z-index: 2;
      right: 28px;
      bottom: 28px;
      max-width: 280px;
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(7, 10, 19, .78);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, .14)
    }

    .mini-note strong {
      display: block
    }

    .mini-note span {
      display: block;
      color: var(--vc-soft);
      font-size: 13px;
      margin-top: 4px
    }

    .section-head {
      margin-bottom: 28px
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px
    }

    .service-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
      border: 1px solid var(--vc-line);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 20px 48px rgba(0, 0, 0, .20)
    }

    .service-card img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      background: #0f1730
    }

    .service-body {
      padding: 24px 24px 26px
    }

    .service-body h3 {
      margin: 0 0 12px;
      font-size: 24px;
      letter-spacing: -.02em
    }

    .service-body p {
      margin: 0;
      color: var(--vc-muted);
      line-height: 1.7
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px
    }

    .portfolio-card {
      border-radius: 28px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
      border: 1px solid var(--vc-line);
      box-shadow: 0 20px 48px rgba(0, 0, 0, .20)
    }

    .portfolio-card img {
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      background: #0e1630
    }

    .portfolio-body {
      padding: 22px
    }

    .portfolio-body h3 {
      margin: 0 0 10px;
      font-size: 22px
    }

    .portfolio-body p {
      margin: 0 0 16px;
      color: var(--vc-muted);
      line-height: 1.7
    }

    .portfolio-tags {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 18px
    }

    .portfolio-tags span {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid var(--vc-line);
      font-size: 12px;
      font-weight: 800;
      color: rgba(255, 255, 255, .82)
    }



    /* Video Hasil Kerja - landscape + portrait videos */
    #portfolio .portfolio-video-main {
      margin-top: 34px;
      border-radius: 28px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
      border: 1px solid var(--vc-line);
      box-shadow: 0 20px 48px rgba(0, 0, 0, .20)
    }

    #portfolio .portfolio-video-landscape {
      width: 100%;
      aspect-ratio: 16 / 9;
      display: block;
      object-fit: cover;
      background: #0b1020
    }

    #portfolio .portfolio-main-body {
      padding: 24px
    }

    #portfolio .portfolio-main-body h3,
    #portfolio .portfolio-video-body h3 {
      margin: 0 0 10px;
      font-size: 22px;
      letter-spacing: -.02em
    }

    #portfolio .portfolio-main-body p,
    #portfolio .portfolio-video-body p {
      margin: 0;
      color: var(--vc-muted);
      line-height: 1.7
    }

    #portfolio .portfolio-video-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      margin-top: 22px
    }

    #portfolio .portfolio-video-card {
      border-radius: 28px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
      border: 1px solid var(--vc-line);
      box-shadow: 0 20px 48px rgba(0, 0, 0, .20)
    }

    #portfolio .portfolio-video-portrait {
      width: 100%;
      aspect-ratio: 9 / 16;
      display: block;
      object-fit: cover;
      background: #0b1020
    }

    #portfolio .portfolio-video-body {
      padding: 22px
    }

    #portfolio .portfolio-video-card .portfolio-tags,
    #portfolio .portfolio-video-main .portfolio-tags {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
      margin-bottom: 0
    }

    #portfolio .portfolio-video-card .portfolio-tags span,
    #portfolio .portfolio-video-main .portfolio-tags span {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid var(--vc-line);
      font-size: 12px;
      font-weight: 800;
      color: rgba(255, 255, 255, .82)
    }



    /* Custom Play Button Overlay - Video Portfolio */
    #portfolio .video-wrap {
      position: relative;
      overflow: hidden;
      background: #0b1020;
    }

    #portfolio .video-wrap video {
      cursor: pointer;
    }

    #portfolio .custom-play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 74px;
      height: 74px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .32);
      background: rgba(7, 10, 19, .72);
      color: #fff;
      cursor: pointer;
      z-index: 3;
      display: grid;
      place-items: center;
      backdrop-filter: blur(14px);
      box-shadow: 0 18px 46px rgba(0, 0, 0, .36);
      transition: transform .18s ease, background .18s ease, opacity .18s ease;
    }

    #portfolio .custom-play-btn::before {
      content: "";
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-bottom: 14px solid transparent;
      border-left: 22px solid #fff;
      margin-left: 5px;
    }

    #portfolio .custom-play-btn:hover {
      transform: translate(-50%, -50%) scale(1.06);
      background: linear-gradient(135deg, var(--vc-pink), var(--vc-orange));
    }

    #portfolio .video-wrap.is-playing .custom-play-btn {
      opacity: 0;
      pointer-events: none;
    }

    #portfolio .video-sound-note {
      margin-top: 12px;
      color: var(--vc-soft);
      font-size: 13px;
      line-height: 1.5;
    }


    /* Location / Google Map Section */
    .location-card {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 24px;
      align-items: stretch;
      padding: 18px;
      border-radius: 34px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
      border: 1px solid var(--vc-line);
      box-shadow: 0 20px 48px rgba(0, 0, 0, .20)
    }

    .map-wrap {
      overflow: hidden;
      border-radius: 24px;
      background: #0b1020;
      min-height: 360px
    }

    .map-wrap iframe {
      display: block;
      width: 100%;
      min-height: 360px
    }

    .location-info {
      padding: 24px;
      border-radius: 24px;
      background: rgba(255, 255, 255, .045);
      border: 1px solid var(--vc-line)
    }

    .location-info h3 {
      margin: 0 0 12px;
      font-size: 26px
    }

    .location-info p {
      margin: 0;
      color: var(--vc-muted);
      line-height: 1.7
    }

    @media (max-width:900px) {
      .location-card {
        grid-template-columns: 1fr
      }
    }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px
    }

    .value-card {
      padding: 22px;
      border-radius: 22px;
      background: rgba(255, 255, 255, .055);
      border: 1px solid var(--vc-line)
    }

    .value-card span {
      font-size: 28px
    }

    .value-card h3 {
      margin: 12px 0 8px;
      font-size: 18px
    }

    .value-card p {
      margin: 0;
      color: var(--vc-muted);
      line-height: 1.6;
      font-size: 14.5px
    }

    .why-grid {
      display: grid;
      grid-template-columns: .94fr 1.06fr;
      gap: 24px;
      align-items: start
    }

    .why-card {
      padding: 26px;
      border-radius: var(--vc-radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .045));
      border: 1px solid var(--vc-line)
    }

    .why-list {
      display: grid;
      gap: 14px
    }

    .why-item {
      display: flex;
      gap: 14px;
      padding: 18px;
      background: rgba(255, 255, 255, .055);
      border: 1px solid var(--vc-line);
      border-radius: 20px
    }

    .why-item b {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(255, 79, 163, .16);
      color: #ffbddc;
      flex: 0 0 34px
    }

    .why-item strong {
      display: block
    }

    .why-item p {
      margin: 5px 0 0;
      color: var(--vc-muted);
      line-height: 1.6
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px
    }

    .process-step {
      padding: 24px;
      border-radius: 24px;
      background: rgba(255, 255, 255, .055);
      border: 1px solid var(--vc-line)
    }

    .process-step span {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--vc-pink), var(--vc-orange));
      font-weight: 950
    }

    .process-step h3 {
      margin: 18px 0 8px
    }

    .process-step p {
      color: var(--vc-muted);
      line-height: 1.6;
      margin: 0
    }

    .faq-list {
      display: grid;
      gap: 14px;
      max-width: 940px;
      margin-inline: auto
    }

    .faq-list details {
      padding: 18px 20px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .055);
      border: 1px solid var(--vc-line)
    }

    .faq-list summary {
      font-weight: 900;
      cursor: pointer
    }

    .faq-list p {
      color: var(--vc-muted);
      line-height: 1.7
    }

    .cta-card {
      padding: 46px;
      border-radius: 34px;
      text-align: center;
      background: radial-gradient(circle at 50% 0%, rgba(255, 138, 61, .18), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
      border: 1px solid var(--vc-line);
      box-shadow: var(--vc-shadow)
    }

    .cta-card .vc-lead {
      margin-inline: auto
    }

    .site-footer {
      padding: 40px 0 110px
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 24px
    }

    .footer-grid h3 {
      margin: 0 0 14px;
      font-size: 18px
    }

    .footer-grid p,
    .footer-grid a {
      margin: 0 0 10px;
      color: var(--vc-muted);
      line-height: 1.7;
      text-decoration: none;
      display: block
    }

    .copyright {
      padding-top: 22px;
      color: var(--vc-soft)
    }


    .location-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 22px;
    }

    .location-list a {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 12px 10px;
      border-radius: 16px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.11);
      color: rgba(248,251,255,.78);
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      text-align: center;
      line-height: 1.25;
    }

    .location-list a:hover {
      color: #fff;
      background: rgba(255,255,255,.075);
      border-color: rgba(255,255,255,.2);
    }

    .state-list {
      max-width: 260px;
      margin-inline: auto;
      grid-template-columns: 1fr;
    }

    @media (max-width:720px) {
      .location-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .location-list a {
        min-height: 42px;
        padding: 10px 6px;
        font-size: 12px;
        font-weight: 400;
      }
      .state-list {
        grid-template-columns: 1fr;
      }
    }


    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    .footer-bottom span {
      display: inline-flex;
      align-items: center;
      color: var(--vc-soft);
    }

    .footer-bottom a {
      margin-left: auto;
      color: var(--vc-muted);
      text-decoration: none;
      font-weight: 800;
      text-align: right;
    }

    .footer-bottom a:hover {
      color: #fff;
    }

    @media (max-width:720px) {
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .footer-bottom a {
        margin-left: 0;
        text-align: left;
      }
    }


    .location-card.map-only {
      display: block;
      padding: 18px;
    }

    .location-card.map-only .map-wrap {
      width: 100%;
      min-height: 460px;
    }

    .location-card.map-only .map-wrap iframe {
      width: 100%;
      min-height: 460px;
    }

    @media (max-width:720px) {
      .location-card.map-only {
        padding: 12px;
      }

      .location-card.map-only .map-wrap,
      .location-card.map-only .map-wrap iframe {
        min-height: 360px;
      }
    }

    .sticky-cta {
      display: none;
    }

    @media (max-width:720px) {
      .sticky-cta {
        position: fixed;
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%);
        width: min(680px, calc(100% - 20px));
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        z-index: 30;
      }
    }

    .sticky-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 56px;
      border-radius: 999px;
      font-weight: 950;
      text-decoration: none;
      color: #fff;
      box-shadow: 0 18px 48px rgba(0, 0, 0, .28)
    }

    .sticky-whatsapp {
      background: linear-gradient(135deg, #20c85a, #11a84a)
    }

    .sticky-phone {
      background: linear-gradient(135deg, #2563eb, #8b5cf6)
    }

    .sticky-btn svg {
      width: 20px;
      height: 20px;
      fill: currentColor
    }



    @media (max-width:900px) {
      #portfolio .portfolio-video-grid {
        grid-template-columns: 1fr
      }
    }

    @media (max-width:1040px) {

      .hero-grid,
      .why-grid,
      .footer-grid {
        grid-template-columns: 1fr
      }

      .service-grid,
      .portfolio-grid {
        grid-template-columns: 1fr 1fr
      }

  
    /* Location / Google Map Section */
    .location-card {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 24px;
      align-items: stretch;
      padding: 18px;
      border-radius: 34px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
      border: 1px solid var(--vc-line);
      box-shadow: 0 20px 48px rgba(0, 0, 0, .20)
    }

    .map-wrap {
      overflow: hidden;
      border-radius: 24px;
      background: #0b1020;
      min-height: 360px
    }

    .map-wrap iframe {
      display: block;
      width: 100%;
      min-height: 360px
    }

    .location-info {
      padding: 24px;
      border-radius: 24px;
      background: rgba(255, 255, 255, .045);
      border: 1px solid var(--vc-line)
    }

    .location-info h3 {
      margin: 0 0 12px;
      font-size: 26px
    }

    .location-info p {
      margin: 0;
      color: var(--vc-muted);
      line-height: 1.7
    }

    @media (max-width:900px) {
      .location-card {
        grid-template-columns: 1fr
      }
    }

    .value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    @media (max-width:720px) {
      .vc-container {
        width: min(100% - 28px, var(--vc-container))
      }

      .vc-section {
        padding: 66px 0
      }

      .hero {
        padding: 104px 0 58px
      }

      .hero h1 {
        font-size: clamp(38px, 12vw, 52px)
      }

      .hero p {
        font-size: 16px
      }

      .proof-row {
        grid-template-columns: repeat(2, 1fr)
      }

      .vc-btns {
        gap: 10px
      }

      .vc-btn {
        width: 100%;
        min-height: 52px
      }

      .service-grid,
      .portfolio-grid,
      .value-grid,
      .process-grid {
        grid-template-columns: 1fr
      }

      .hero-card {
        padding: 14px;
        border-radius: 24px
      }

      .mini-note {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: none;
        margin-top: 14px
      }

      .sticky-cta {
        grid-template-columns: 1fr 1fr
      }
    }

.vc-breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

.vc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--vc-soft);
}

.vc-breadcrumb a {
  color: var(--vc-muted);
  text-decoration: none;
}

.vc-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.vc-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: rgba(247,247,251,.32);
}

.vc-breadcrumb li[aria-current="page"] {
  color: rgba(247,247,251,.9);
  font-weight: 600;
}