@media (max-width: 1199px) {
  body[data-page="index"] .homepage-services-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 720px) {
  body[data-page="index"] .homepage-services-grid {grid-template-columns: 1fr; gap: 14px;}
  body[data-page="index"] .homepage-service-card {min-height: 0;}
  body[data-page="index"] .homepage-focus-section {padding-bottom: 24px !important;}
body[data-page="index"] .homepage-services-section {padding-top: 24px !important;}
body[data-page="index"] .homepage-services-intro {margin-bottom: 28px;}
  body[data-page="index"] .homepage-services-heading {margin-bottom: 16px;}
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="index"] .homepage-service-card,
  body[data-page="index"] .homepage-focus-link {transition: none;}
}


/* DIBISI-APP-PORTFOLIO-V3-20261022: public portfolio and app development. */
.dibisi-apps-section .section-head { max-width: 920px; margin-bottom: 30px; }
.dibisi-section-intro { max-width: 870px; color: var(--muted); line-height: 1.72; margin: 10px 0 0; }
.dibisi-app-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 22px; }
.dibisi-app-card { background: rgba(255,255,255,.94); border: 1px solid rgba(15,99,255,.18); border-radius: 28px; box-shadow: 0 14px 38px rgba(8,25,54,.09); padding: clamp(24px,3vw,38px); display: flex; flex-direction: column; min-width: 0; }
.dibisi-app-header { display:flex;align-items:center;gap:16px;margin-bottom:20px; }
.dibisi-app-logo { flex: 0 0 auto; width:64px; height:64px; background:#0f63ff; color:white; display:grid;place-items:center; border-radius:18px; font-size:27px; font-weight:900; }
.dibisi-app-category { display:block; color: var(--muted); font-size:13px; font-weight:700; letter-spacing:.04em; margin-bottom:4px; }
.dibisi-app-card h3 { color:var(--text); font-size:clamp(23px,2vw,30px);line-height:1.15;margin:0; }
.dibisi-app-card > p { color:var(--muted);line-height:1.7; margin: 0 0 24px; flex:1; }
.dibisi-store-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
.dibisi-store-button { display:inline-flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 17px; background:#0f63ff; color:#fff !important; font-size:14px; line-height:1.25; font-weight:800;text-decoration:none !important;border:1px solid #0f63ff;border-radius:14px;transition: transform .16s ease,box-shadow .16s ease; }
.dibisi-store-button:hover { transform:translateY(-2px);box-shadow:0 10px 20px rgba(15,99,255,.2); }
.dibisi-store-button:focus-visible { outline:3px solid #0f63ff;outline-offset:3px; }
.dibisi-store-secondary { background:transparent;color:#0f63ff !important; }
.dibisi-store-secondary:hover { background:rgba(15,99,255,.06); }
.dibisi-store-note { margin:18px 0 0; font-size:13px; line-height:1.55;color:var(--muted); }
.dibisi-app-section-footer { margin-top:26px; }
.dibisi-apps-hero .hero-copy { max-width: 1020px; }
.dibisi-apps-hero .hero-copy h1 { max-width: 1040px; }
.dibisi-app-cap-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.dibisi-app-cap { padding:28px;background:rgba(255,255,255,.92);border-radius:24px;border:1px solid rgba(15,99,255,.15);box-shadow:0 10px 24px rgba(8,25,54,.07); }
.dibisi-app-cap h3 { margin:0 0 12px;font-size:20px;color:var(--text); }
.dibisi-app-cap p { margin:0;color:var(--muted);line-height:1.65; }
.dibisi-app-inline-panel { background:rgba(255,255,255,.94);padding:clamp(26px,4vw,46px);border:1px solid rgba(15,99,255,.16);border-radius:30px;box-shadow:0 14px 36px rgba(8,25,54,.07); }
.dibisi-app-inline-panel h2 { max-width:960px;margin:12px 0 18px; }
.dibisi-app-inline-panel > p:not(.eyebrow) { max-width:950px;color:var(--muted);line-height:1.7;margin:0 0 26px; }
.dark-theme .dibisi-app-card,.dark-theme .dibisi-app-cap,.dark-theme .dibisi-app-inline-panel {background:rgba(17,27,45,.94);border-color:rgba(255,255,255,.18);}
.dark-theme .dibisi-app-card h3,.dark-theme .dibisi-app-cap h3 {color:#fff;}
.dark-theme .dibisi-app-category,.dark-theme .dibisi-app-card > p,.dark-theme .dibisi-app-cap p,.dark-theme .dibisi-section-intro,.dark-theme .dibisi-app-inline-panel > p:not(.eyebrow),.dark-theme .dibisi-store-note{color:#dfe8f8;}
.dark-theme .dibisi-store-secondary{color:#9fc1ff !important;border-color:#9fc1ff;}
@media (max-width: 900px) {
 .dibisi-app-cap-grid{grid-template-columns:1fr;}
 .dibisi-app-cap{padding:24px;}
}
@media (max-width: 720px) {
 .dibisi-app-grid{grid-template-columns:1fr;gap:16px;}
 .dibisi-app-card{padding:24px;}
 .dibisi-app-logo{width:56px;height:56px;}
 .dibisi-store-buttons{flex-direction:column;}
 .dibisi-store-button{width:100%;box-sizing:border-box;}
 .dibisi-app-inline-panel{padding:24px;}
}
@media (prefers-reduced-motion: reduce){.dibisi-store-button{transition:none;}}

/* dibisi-v4-service-detail: clarifying context and useful links on service pages only */
.dibisi-detail-action{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--blue);font-weight:800;text-decoration:none;line-height:1.45;border-bottom:2px solid transparent}
.dibisi-detail-action:hover,.dibisi-detail-action:focus-visible{border-bottom-color:currentColor}
.dark-theme .dibisi-detail-action{color:#8bb7ff}
.dibisi-service-example{margin-top:24px;padding:26px 30px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.76);box-shadow:0 12px 35px rgba(8,17,38,.045)}
.dibisi-service-example h3{font-size:clamp(19px,2.1vw,24px);margin:8px 0 12px;line-height:1.3}
.dibisi-service-example p:last-child{color:var(--muted);line-height:1.7;margin:0}
.dark-theme .dibisi-service-example{background:rgba(17,27,45,.94);border-color:rgba(255,255,255,.16)}
.dark-theme .dibisi-service-example p:last-child{color:#dfe8f8}
@media(max-width:680px){.dibisi-service-example{padding:22px 20px;border-radius:22px}}

/* DIBISI-V5-DEDICATED-APP-SERVICE-20261022: Visible clickable app service cards; original design and colours retained. */
body[data-page="index"] .homepage-services-grid > .dibisi-app-service-feature {
  grid-column: 1 / -1;
  min-height: 210px;
  border-color: rgba(15,99,255,.30);
}
body[data-page="index"] .homepage-services-grid > .dibisi-app-service-feature > p { max-width: 980px; }
.service-grid > .dibisi-app-service-tile {
  grid-column: 1 / -1;
  border-color: rgba(15,99,255,.28);
  min-height: 0;
}
.service-grid > .dibisi-app-service-tile > p { max-width: 1020px; }
.dibisi-app-service-tile { text-decoration: none; color: var(--text); }
.dibisi-app-service-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 22px; padding-top: 14px;
  border-top: 1px solid rgba(15,99,255,.15);
  font-size: 14px; font-weight: 800; color: #0f63ff;
}
.dibisi-app-service-tile:hover,.dibisi-app-service-tile:focus-visible {
  border-color: #0f63ff; box-shadow: 0 18px 42px rgba(8,30,74,.15); transform: translateY(-2px);
}
.dibisi-app-service-tile:focus-visible { outline: 3px solid #0f63ff; outline-offset: 4px; }
.dark-theme .dibisi-app-service-action { color: #9fc1ff; border-color: rgba(255,255,255,.19); }
.dark-theme .dibisi-app-service-tile { color: #fff; border-color: rgba(255,255,255,.24); }
@media (max-width: 720px) {
  body[data-page="index"] .homepage-services-grid > .dibisi-app-service-feature { min-height: 0; grid-column: auto; }
  .service-grid > .dibisi-app-service-tile { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .dibisi-app-service-tile { transition: none; } }

/* DIBISI ABOUT SERVICE CTA FIX START */
.service-tile .dibisi-detail-action{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  height:auto !important;
  margin-top:18px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--blue) !important;
  box-shadow:none !important;
  font-weight:800 !important;
  line-height:1.45 !important;
  text-decoration:none !important;
}

.service-tile .dibisi-detail-action span{
  display:inline !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:currentColor !important;
  font-weight:inherit !important;
  box-shadow:none !important;
}

.service-tile:hover .dibisi-detail-action,
.service-tile:focus-visible .dibisi-detail-action{
  border-bottom-color:currentColor !important;
}

.dark-theme .service-tile .dibisi-detail-action{
  color:#8bb7ff !important;
}
/* DIBISI ABOUT SERVICE CTA FIX END */

/* DIBISI-V33-HEADER-COMPACT-20261027 BEGIN */
/* Final responsive header layout. */

@media (min-width: 981px) {

  .site-header .nav-wrap {
    display: grid !important;
    grid-template-columns: clamp(205px, 19vw, 275px) minmax(0, 1fr) auto !important;
    grid-template-areas: "brand nav actions" "brand nav lang" !important;
    align-items: center !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    column-gap: clamp(10px, 1.15vw, 20px) !important;
    row-gap: 3px !important;
    padding: 8px 0 !important;
    min-height: 0 !important;
  }

  .site-header .brand {
    grid-area: brand !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
  }

  .site-header .brand-image {
    width: clamp(200px, 18.4vw, 267px) !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
  }

  .site-header .brand-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .site-header .mobile-menu-toggle {
    display: none !important;
  }

  .site-header .main-nav {
    grid-area: nav !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(2px, .35vw, 7px) !important;
    margin: 0 !important;
    padding: 5px !important;
    border-radius: 999px !important;
    overflow: visible !important;
  }

  .site-header .main-nav a {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 37px !important;
    padding: 9px clamp(7px, .77vw, 12px) !important;
    font-size: clamp(12px, .93vw, 14px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  .site-header .header-actions {
    grid-area: actions !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: end !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .site-header .header-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .site-header .theme-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 16px !important;
  }

  .site-header .language-switcher {
    grid-area: lang !important;
    display: flex !important;
    width: auto !important;
    justify-self: end !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 3px !important;
    border-radius: 999px !important;
  }

  .site-header .language-switcher a {
    min-width: 31px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .hero-section {
    padding-top: clamp(44px, 5vw, 78px) !important;
  }
}

@media (max-width: 980px) {

  .site-header .nav-wrap {
    position: relative !important;
    width: min(1380px, calc(100% - 24px)) !important;
    margin: 0 auto !important;
    display: grid !important;
    align-items: center !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    min-height: 0 !important;
    row-gap: 5px !important;
    column-gap: 6px !important;
    padding: 6px 0 7px !important;
  }

  .site-header .header-actions {
    display: contents !important;
  }

  .site-header .brand {
    grid-area: brand !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .site-header .brand-image {
    width: clamp(165px, 48vw, 260px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  .site-header .brand-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  .site-header .header-cta {
    grid-area: cta !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-height: 38px !important;
    max-width: none !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .site-header .theme-toggle {
    grid-area: theme !important;
    justify-self: end !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 16px !important;
  }

  .site-header .language-switcher {
    grid-area: lang !important;
    display: inline-flex !important;
    justify-self: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    gap: 2px !important;
    padding: 3px !important;
    margin: 0 !important;
  }

  .site-header .language-switcher a {
    min-width: 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .site-header .mobile-menu-toggle {
    grid-area: menu !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .site-header .mobile-menu-toggle::after {
    content: "\2630" !important;
    margin-left: 7px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .site-header .mobile-menu-toggle[aria-expanded="true"]::after {
    content: "\00d7" !important;
    font-size: 20px !important;
  }

  .site-header .main-nav {
    grid-area: nav !important;
    position: absolute !important;
    top: calc(100% + 3px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 15 !important;
    display: none !important;
    width: min(320px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(8,17,38,.16) !important;
  }

  .site-header .main-nav.open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .site-header .main-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
    border-radius: 12px !important;
  }

  .hero-section,
  main > section:first-child.hero-section {
    padding-top: 22px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {

  .site-header .nav-wrap {
    grid-template-columns: minmax(85px, 1fr) auto 88px !important;
    grid-template-areas: "brand brand menu" "cta lang theme" !important;
  }

  .site-header .brand-image {
    width: clamp(165px, 49vw, 210px) !important;
  }
}

@media (min-width: 768px) and (max-width: 980px) {

  .site-header .nav-wrap {
    grid-template-columns: minmax(205px, 1fr) auto auto auto auto !important;
    grid-template-areas: "brand cta lang theme menu" !important;
    column-gap: clamp(7px, 1.2vw, 16px) !important;
    padding: 8px 0 !important;
  }

  .site-header .brand-image {
    width: clamp(210px, 28vw, 260px) !important;
  }
}

/* DIBISI-V33-HEADER-COMPACT-20261027 END */

/* DIBISI-V33-HEADER-320-COLLISION-FIX-20261027 BEGIN */
@media (max-width: 359px) {
  .site-header .nav-wrap {
    column-gap: 4px !important;
  }
  .site-header .header-cta {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11px !important;
  }
}
/* DIBISI-V33-HEADER-320-COLLISION-FIX-20261027 END */

/* DIBISI-V33-OVERVIEW-RECOVERY-PRO-20261027 BEGIN */
body[data-page="index"] .homepage-services-section {
  position: relative;
  isolation: isolate;
}
body[data-page="index"] .homepage-services-intro {
  position: relative;
  max-width: none;
  overflow: hidden;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid rgba(15, 99, 255, .18);
  border-radius: 30px;
  background: linear-gradient(125deg, #fff 0%, #f7faff 74%, #ecf4ff 100%);
  box-shadow: 0 20px 54px rgba(8, 25, 54, .09);
}
body[data-page="index"] .homepage-services-intro::before {
  content: "";
  position: absolute;
  top: -95px;
  right: -90px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(15, 99, 255, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(15, 99, 255, .025), 0 0 0 75px rgba(15, 99, 255, .02);
  pointer-events: none;
}
body[data-page="index"] .homepage-services-intro > * {
  position: relative;
  z-index: 1;
}
body[data-page="index"] .homepage-services-intro h2 {
  max-width: 900px;
  margin: 12px 0 20px;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.09;
  letter-spacing: -.035em;
}
body[data-page="index"] .homepage-services-intro .lead {
  max-width: 930px;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.65;
}
body[data-page="index"] .homepage-services-intro > p:last-of-type {
  max-width: 930px;
  margin-bottom: 0;
}
body[data-page="index"] .homepage-overview-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
body[data-page="index"] .homepage-overview-points > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(15, 99, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
body[data-page="index"] .homepage-overview-points > span::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0f63ff;
  box-shadow: 0 0 0 4px rgba(15, 99, 255, .12);
}
body[data-page="index"] .homepage-services-heading {
  margin-bottom: 24px;
}
body[data-page="index"] .homepage-services-heading h3 {
  font-size: clamp(24px, 2.35vw, 34px);
  line-height: 1.2;
}
body[data-page="index"] .homepage-services-grid {
  gap: clamp(14px, 1.7vw, 22px);
}
body[data-page="index"] .homepage-service-card {
  position: relative;
  overflow: hidden;
  min-height: 290px;
  padding: clamp(24px, 2.5vw, 31px);
  border: 1px solid rgba(15, 99, 255, .17);
  border-radius: 26px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .99), rgba(245, 249, 255, .98));
  box-shadow: 0 14px 32px rgba(8, 25, 54, .075);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body[data-page="index"] .homepage-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #0f63ff, #6aa2ff, transparent);
  pointer-events: none;
}
body[data-page="index"] .homepage-service-card .homepage-card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 21px;
  border-radius: 17px;
  background: linear-gradient(140deg, #0b56e5, #418fff);
  box-shadow: 0 10px 22px rgba(15, 99, 255, .19);
}
body[data-page="index"] .homepage-service-card h3 {
  font-size: clamp(21px, 1.75vw, 27px);
  line-height: 1.22;
}
body[data-page="index"] .homepage-service-card:hover,
body[data-page="index"] .homepage-service-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(15, 99, 255, .48);
  box-shadow: 0 20px 44px rgba(8, 25, 54, .14);
}
body[data-page="index"] .homepage-services-grid > .dibisi-app-service-feature {
  min-height: 225px;
}
body[data-page="index"].dark-theme .homepage-services-intro {
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(135deg, #12203a, #0d1729);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .27);
}
body[data-page="index"].dark-theme .homepage-overview-points > span {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .065);
  color: #e7f0ff;
}
body[data-page="index"].dark-theme .homepage-service-card {
  border-color: rgba(255, 255, 255, .17);
  background: linear-gradient(145deg, #182840, #101c30);
  box-shadow: 0 16px 35px rgba(0, 0, 0, .25);
}
@media (max-width: 980px) {
  body[data-page="index"] .homepage-service-card { min-height: 0; }
}
@media (max-width: 720px) {
  body[data-page="index"] .homepage-services-intro { padding: 23px; border-radius: 24px; }
  body[data-page="index"] .homepage-services-intro::before { width: 210px; height: 210px; }
  body[data-page="index"] .homepage-services-intro h2 { font-size: clamp(29px, 8.4vw, 40px); }
  body[data-page="index"] .homepage-overview-points > span { width: 100%; }
  body[data-page="index"] .homepage-service-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="index"] .homepage-service-card { transition: none; }
}
/* DIBISI-V33-OVERVIEW-RECOVERY-PRO-20261027 END */