* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #0d1418;
  color: #ffffff;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

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

.container {
  width: min(1180px, 92%);
  margin: auto;
}

/* HEADER */
.header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  background: rgba(9, 15, 18, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 164, 76, 0.18);
}

.nav-wrapper {
  height: 82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-icon {
  width: 46px;
  height: 46px;
  border: 1px solid #d4a44c;
  display: grid;
  place-items: center;
  color: #d4a44c;
  font-size: 21px;
}

.logo h3 {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.1;
}

.logo span {
  font-size: 10px;
  color: #c7c7c7;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-menu {
  display: flex;
  gap: 30px;
}

.nav-menu a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #e6e6e6;
  transition: 0.3s;
}

.nav-menu a:hover {
  color: #d4a44c;
}

.btn-outline,
.btn-secondary {
  border: 1px solid #d4a44c;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 700;
  color: #d4a44c;
  text-transform: uppercase;
  transition: 0.3s;
}

.btn-outline:hover,
.btn-secondary:hover {
  background: #d4a44c;
  color: #0d1418;
}

/* HERO */
.hero {
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(90deg, rgba(9, 15, 18, 0.96) 0%, rgba(9, 15, 18, 0.72) 45%, rgba(9, 15, 18, 0.30) 100%),
    url('img/arthomorho_design_1a.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(120deg, transparent 0%, transparent 45%, rgba(212, 164, 76, 0.22) 45.2%, transparent 45.6%),
    linear-gradient(50deg, transparent 0%, transparent 68%, rgba(212, 164, 76, 0.18) 68.2%, transparent 68.5%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}

.hero-text {
  max-width: 760px;
}

.section-label {
  color: #d4a44c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}



.hero h1 {
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 24px;
}

.hero h1 span {
  color: #d4a44c;
}

.hero-subtitle {
  max-width: 720px;
  color: #d7d7d7;
  font-size: 18px;
  margin-bottom: 34px;
}

.hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #d4a44c, #f1cf83);
  color: #111;
  padding: 14px 25px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  border: none;
  transition: 0.3s;
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(212, 164, 76, 0.25);
}

/* STATS */
.stats {
  margin-top: -70px;
  position: relative;
  z-index: 5;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(14, 22, 27, 0.96);
  border: 1px solid rgba(212, 164, 76, 0.25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.stat-card {
  padding: 30px 22px;
  text-align: center;
  border-right: 1px solid rgba(212, 164, 76, 0.17);
}

.stat-card:last-child {
  border-right: none;
}

.stat-card i {
  color: #d4a44c;
  font-size: 24px;
  margin-bottom: 12px;
}

.stat-card h2 {
  font-size: 30px;
  line-height: 1;
}

.stat-card p {
  font-size: 12px;
  color: #cfcfcf;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* GENERAL SECTION */
.section {
  padding: 95px 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 46px;
}

.section-heading h2 {
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.section-heading p {
  color: #c9c9c9;
}

/* SERVICES */
.services {
  background: #0d1418;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(212, 164, 76, 0.18);
  border-left: 1px solid rgba(212, 164, 76, 0.18);
}

.service-card {
  min-height: 240px;
  padding: 32px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-right: 1px solid rgba(212, 164, 76, 0.18);
  border-bottom: 1px solid rgba(212, 164, 76, 0.18);
  transition: 0.3s;
}

.service-card:hover {
  transform: translateY(-8px);
  background: rgba(212, 164, 76, 0.08);
}

.service-card i {
  color: #d4a44c;
  font-size: 34px;
  margin-bottom: 22px;
}

.service-card h3 {
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.service-card p {
  color: #c7c7c7;
  font-size: 14px;
}

/* PROCESS */
.process {
  background:
    linear-gradient(rgba(9, 15, 18, 0.96), rgba(9, 15, 18, 0.96)),
	url('img/arthomorho_design_2a.png');
  background-size: cover;
  background-position: center 30%;
}

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

.process-card {
  position: relative;
  padding: 28px 20px;
  border: 1px solid rgba(212, 164, 76, 0.24);
  background: rgba(255, 255, 255, 0.035);
  transition: 0.3s;
}

.process-card:hover {
  transform: translateY(-8px);
  border-color: #d4a44c;
}

.process-card span {
  color: #d4a44c;
  font-weight: 800;
  font-size: 14px;
}

.process-card i {
  display: block;
  color: #d4a44c;
  font-size: 27px;
  margin: 18px 0;
}

.process-card h3 {
  font-size: 14px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.process-card p {
  color: #c9c9c9;
  font-size: 13px;
}

/* PROJECTS */
.projects {
  background: #0d1418;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.project-card {
  position: relative;
  height: 360px;
  overflow: hidden;
  border: 1px solid rgba(212, 164, 76, 0.2);
}

.project-card img {
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.project-card:hover img {
  transform: scale(1.08);
}

.project-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 24px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
}

.project-info h3 {
  font-size: 18px;
  text-transform: uppercase;
}

.project-info p {
  color: #d4a44c;
  font-size: 13px;
}

/* TESTIMONIAL */
.testimonial {
  background: #0d1418;
  padding: 80px 0;
}

.testimonial-box {
  max-width: 900px;
  text-align: center;
}

.quote-icon {
  color: #d4a44c;
  font-size: 42px;
  margin-bottom: 20px;
}

.testimonial-box p {
  font-size: 22px;
  color: #eeeeee;
  margin-bottom: 22px;
}

.testimonial-box h4 {
  color: #d4a44c;
  font-size: 17px;
}

.testimonial-box span {
  color: #bdbdbd;
  font-size: 13px;
}

/* Founder */
.founder {
  background: #10191e;
}

.founder-wrapper {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.founder-image {
  border: 1px solid rgba(212, 164, 76, 0.35);
  padding: 14px;
}

.founder-image img {
  height: 520px;
  object-fit: cover;
}

.founder-content h2 {
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 10px;
}

.founder-content h4 {
  color: #d4a44c;
  margin-bottom: 22px;
  font-size: 18px;
}

.founder-content p {
  color: #d0d0d0;
  margin-bottom: 30px;
  font-size: 16px;
}

/* TRUST */
.trust {
  background: #0d1418;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.trust-card {
  min-height: 110px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  border: 1px solid rgba(212, 164, 76, 0.23);
  color: #e8e8e8;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  transition: 0.3s;
}

.trust-card:hover {
  background: rgba(212, 164, 76, 0.08);
  color: #d4a44c;
}

/* FOOTER */
.footer {
  background:
    linear-gradient(90deg, rgba(9, 15, 18, 0.98), rgba(9, 15, 18, 0.96)),
	url('img/arthomorho_design_3a.png');
  background-size: cover;
  background-position: center 60%;
  border-top: 1px solid rgba(212, 164, 76, 0.22);
}

.footer-wrapper {
  padding: 80px 0;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 50px;
  align-items: center;
}

.footer h2 {
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 18px;
}

.footer p {
  color: #d0d0d0;
}

.footer-contact ul {
  list-style: none;
  margin-top: 28px;
}

.footer-contact li {
  margin-bottom: 13px;
  color: #d6d6d6;
  font-size: 14px;
}

.footer-contact i {
  color: #d4a44c;
  margin-right: 10px;
}

.copyright {
  width: 100%;
  border-top: 1px solid rgba(212, 164, 76, 0.17);
  padding: 20px 0;
  text-align: center;
  color: #b7b7b7;
  font-size: 13px;
}

.copyright p {
  margin: 0;
}

.founder-content .section-label {
  margin-bottom: 0; /* hilangkan atau perkecil jarak bawah label */
}

.founder-content h2 {
  margin-top: 0;    /* hilangkan jarak atas heading */
  /* Atau jika butuh jarak sedikit:
  margin-top: 2px; */
}

/* LOGO GAMBAR */
.logo-img {
  max-height: 80px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .logo-img {
    max-height: 60px;
  }
}

@media (max-width: 480px) {
  .logo-img {
    max-height: 50px;
  }
}


/* RESPONSIVE */
@media (max-width: 1024px) {
  .nav-menu {
    display: none;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .founder-wrapper {
    grid-template-columns: 1fr;
  }

  .founder-image img {
    height: 460px;
  }
}

@media (max-width: 768px) {
  .btn-outline {
    display: none;
  }

  .hero {
    min-height: 92vh;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .stats {
    margin-top: 0;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    border-bottom: 1px solid rgba(212, 164, 76, 0.17);
  }

  .service-grid,
  .process-grid,
  .project-grid,
  .trust-grid,
  .footer-wrapper {
    grid-template-columns: 1fr;
  }

  .project-card {
    height: 320px;
  }

  .testimonial-box p {
    font-size: 18px;
  }

  .section {
    padding: 70px 0;
  }
}

@media (max-width: 480px) {
  .nav-wrapper {
    height: 74px;
  }

  .logo h3 {
    font-size: 13px;
  }

  .logo span {
    font-size: 8px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .founder-image img {
    height: 360px;
  }
}


/* =========================================================
   HERO RESPONSIVE FIX
   Tambahkan kode ini di bagian PALING BAWAH style.css
   Desktop tetap pakai gambar lebar.
   HP otomatis pakai gambar portrait/vertical.
========================================================= */

/* DESKTOP HERO */
.hero {
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(
      90deg,
      rgba(9, 15, 18, 0.96) 0%,
      rgba(9, 15, 18, 0.72) 45%,
      rgba(9, 15, 18, 0.30) 100%
    ),
    url('img/arthomorho_design_1a.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Tambahan layer gelap supaya teks tetap kebaca */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at right center,
      rgba(212, 164, 76, 0.10),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(9, 15, 18, 0.05) 0%,
      rgba(9, 15, 18, 0.25) 55%,
      rgba(9, 15, 18, 0.78) 100%
    );
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
}

/* TABLET */
@media (max-width: 1024px) {
  .hero {
    min-height: 100vh;
    background-position: center center;
  }

  .hero-text {
    max-width: 650px;
  }

  .hero h1 {
    font-size: clamp(42px, 8vw, 70px);
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .hero {
    min-height: 100vh;

    /* Ganti arthomorho_design_1a.png dengan arthomorho_design_1b.png gambar portrait HP kamu */
    background:
      linear-gradient(
        180deg,
        rgba(9, 15, 18, 0.22) 0%,
        rgba(9, 15, 18, 0.40) 38%,
        rgba(9, 15, 18, 0.88) 78%,
        rgba(9, 15, 18, 0.98) 100%
      ),
      url('img/arthomorho_design_1b.png');

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    display: flex;
    align-items: flex-end;
    padding-bottom: 55px;
  }

  .hero::before {
    opacity: 0.45;
  }

  .hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(9, 15, 18, 0.05) 0%,
        rgba(9, 15, 18, 0.30) 42%,
        rgba(9, 15, 18, 0.92) 82%,
        rgba(9, 15, 18, 1) 100%
      );
  }

  .hero-content {
    width: 100%;
    padding-top: 120px;
    padding-bottom: 0;
  }

  .hero-text {
    max-width: 100%;
  }

  .section-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
  }
  
  .section-hero {
    font-size: 30px;
    line-height: 1;
	color: #d4a44c !important;
  }
  
  .hero .section-hero,
  section .section-hero,
  h2 .section-hero,
  .section-hero {
    color: #d4a44c !important;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: 1px;
    margin-bottom: 18px;
  }

  .hero-subtitle {
    max-width: 95%;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 26px;
    color: #eeeeee;
  }

  .hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .btn-primary,
  .btn-secondary {
    padding: 12px 18px;
    font-size: 11px;
  }

  .stats {
    margin-top: 0;
  }
}

/* MOBILE KECIL */
@media (max-width: 480px) {
  .hero {
    min-height: 100vh;
    padding-bottom: 42px;

    /*
      Kalau orangnya masih terlalu ke kanan/kiri,
      ubah center top menjadi:
      background-position: 58% top;
    */
    background-position: center top;
  }

  .hero-content {
    padding-top: 105px;
  }

  .hero h1 {
    font-size: 34px;
    line-height: 1.08;
    margin-bottom: 16px;
  }

  .hero-subtitle {
    font-size: 13px;
    line-height: 1.65;
    max-width: 100%;
    margin-bottom: 22px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .btn-primary,
  .btn-secondary {
    width: auto;
    min-width: 190px;
    justify-content: center;
  }
}

/* MOBILE SANGAT KECIL */
@media (max-width: 360px) {
  .hero h1 {
    font-size: 30px;
  }

  .hero-subtitle {
    font-size: 12.5px;
  }

  .btn-primary,
  .btn-secondary {
    min-width: 170px;
    padding: 11px 16px;
    font-size: 10.5px;
  }
}

/* TESTIMONIAL SLIDER */
.testimonial-slider {
  overflow: hidden;
}

.testimonial-viewport {
  width: 100%;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 0.7s ease-in-out;
  will-change: transform;
}

.testimonial-slide {
  min-width: 100%;
  padding: 0 18px;
}

.testimonial-slide p {
  min-height: 95px;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.testimonial-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(212, 164, 76, 0.35);
  transition: 0.3s;
}

.testimonial-dots span.active {
  width: 26px;
  border-radius: 18px;
  background: #d4a44c;
}

@media (max-width: 768px) {
  .testimonial-slide {
    padding: 0 8px;
  }

  .testimonial-slide p {
    min-height: 130px;
  }
}

@media (max-width: 480px) {
  .testimonial-slide p {
    min-height: 165px;
  }
}




/* =========================================================
   PROJECT QUESTION FORM - GOLD PLAQUE UI
   Form dibuat seperti lempengan emas bertekstur, tetapi efek
   shining slider dan rotating shining border tetap dipertahankan.
========================================================= */
.project-question-section {
  position: relative;
  padding: 96px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(212, 164, 76, 0.18), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(241, 207, 131, 0.10), transparent 32%),
    linear-gradient(135deg, #0a1115 0%, #0d1418 48%, #111c22 100%);
}

.project-question-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212, 164, 76, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 164, 76, 0.045) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0%, transparent 46%, rgba(241, 207, 131, 0.10) 49%, transparent 52%, transparent 100%);
  background-size: 56px 56px, 56px 56px, 220% 220%;
  opacity: 0.55;
  pointer-events: none;
  animation: arthomorhoConsultGridMove 18s linear infinite;
}

.project-question-section::after {
  content: "";
  position: absolute;
  top: 12%;
  right: -90px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(212, 164, 76, 0.20);
  border-radius: 50%;
  box-shadow:
    0 0 70px rgba(212, 164, 76, 0.12),
    inset 0 0 40px rgba(212, 164, 76, 0.08);
  pointer-events: none;
}

.project-question-container {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 46px;
  align-items: center;
}

.project-question-text {
  position: relative;
}

.project-question-text h2 {
  margin-bottom: 18px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
  color: #ffffff;
  letter-spacing: 0.4px;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.project-question-text p:not(.section-label) {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.86);
}

.project-question-form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 36px;
  border: 1px solid rgba(255, 238, 168, 0.52);
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.68) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 22%, rgba(255, 255, 255, 0.32) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 78%, rgba(115, 67, 8, 0.20) 0 2px, transparent 3px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0 2px, transparent 2px 11px),
    linear-gradient(145deg, #6f430e 0%, #b9781c 18%, #f6d27a 40%, #d7a23c 58%, #8a5614 78%, #4d2c08 100%);
  background-size: auto, auto, auto, 24px 24px, auto;
  color: #271802;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.54),
    0 0 46px rgba(212, 164, 76, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -22px 44px rgba(91, 51, 4, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  animation: arthomorhoGoldPulse 4.8s ease-in-out infinite;
}

.project-question-form:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 247, 196, 0.85);
  box-shadow:
    0 38px 98px rgba(0, 0, 0, 0.58),
    0 0 58px rgba(241, 207, 131, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -24px 48px rgba(83, 45, 3, 0.32);
}

.project-question-form::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  border-radius: inherit;
  opacity: 0.45;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 164, 76, 0.10) 42deg,
    rgba(241, 207, 131, 0.96) 76deg,
    rgba(255, 255, 255, 0.64) 102deg,
    rgba(157, 111, 43, 0.84) 132deg,
    transparent 172deg,
    transparent 248deg,
    rgba(255, 219, 118, 0.36) 292deg,
    transparent 360deg
  );
  pointer-events: none;
  animation: goldGlow 6s ease-in-out infinite;
}

.project-question-form::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  border-radius: 27px;
  background:
    linear-gradient(115deg, transparent 0%, transparent 34%, rgba(255, 255, 255, 0.58) 45%, rgba(255, 236, 155, 0.28) 49%, transparent 61%, transparent 100%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.42), transparent 26%),
    radial-gradient(circle at 88% 92%, rgba(109, 64, 9, 0.28), transparent 30%),
    repeating-linear-gradient(72deg, rgba(74, 42, 4, 0.10) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, rgba(255, 225, 134, 0.56), rgba(183, 113, 22, 0.20) 48%, rgba(81, 46, 7, 0.30));
  background-size: 230% 230%, auto, auto, 19px 19px, auto;
  pointer-events: none;
  animation: arthomorhoFormLightSweep 12s ease-in-out infinite;
}

.project-question-form > * {
  position: relative;
  z-index: 2;
}

.project-question-form input,
.project-question-form select,
.project-question-form textarea {
  width: 100%;
  margin-bottom: 16px;
  padding: 15px 17px;
  border: 1px solid rgba(96, 55, 7, 0.30);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 250, 223, 0.92), rgba(255, 223, 148, 0.82));
  color: #2a1802;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -6px 14px rgba(110, 64, 7, 0.10),
    0 10px 24px rgba(60, 34, 4, 0.16);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.project-question-form input::placeholder,
.project-question-form textarea::placeholder {
  color: rgba(59, 35, 4, 0.62);
}

.project-question-form input:hover,
.project-question-form select:hover,
.project-question-form textarea:hover {
  border-color: rgba(255, 248, 191, 0.74);
  background:
    linear-gradient(145deg, rgba(255, 255, 239, 0.96), rgba(255, 226, 154, 0.88));
}

.project-question-form input:focus,
.project-question-form select:focus,
.project-question-form textarea:focus {
  border-color: #fff0a8;
  background:
    linear-gradient(145deg, rgba(255, 255, 245, 0.98), rgba(255, 232, 170, 0.94));
  box-shadow:
    0 0 0 4px rgba(255, 243, 180, 0.30),
    0 0 28px rgba(255, 226, 132, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}

.project-question-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  cursor: pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23562f05' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(145deg, rgba(255, 250, 223, 0.92), rgba(255, 223, 148, 0.82));
  background-repeat: no-repeat, no-repeat;
  background-position: right 17px center, center;
  background-size: 15px, 100%;
}

.project-question-form select option {
  color: #211304;
  background: #fff4c7;
}

.project-question-form textarea {
  min-height: 116px;
  resize: vertical;
}

.project-question-form input:-webkit-autofill,
.project-question-form input:-webkit-autofill:hover,
.project-question-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #2a1802;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 238, 178, 0.96) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.form-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 2px 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(96, 55, 7, 0.26);
  border-radius: 14px;
  background: rgba(255, 244, 196, 0.68);
  color: rgba(44, 26, 2, 0.84);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.form-check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: #9b6720;
  cursor: pointer;
}

.form-check-text {
  display: inline-block;
}

.project-question-form button {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 16px 22px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 14px;
  background: linear-gradient(135deg, #6f430e 0%, #ba7b21 30%, #f4d37a 58%, #8b5614 100%);
  color: #1f1302;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow:
    0 18px 36px rgba(87, 51, 7, 0.34),
    0 0 24px rgba(255, 223, 122, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.project-question-form button::before {
  content: "";
  position: absolute;
  inset: -60% -35%;
  background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.70) 48%, transparent 58%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform 0.55s ease;
}

.project-question-form button:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow:
    0 22px 48px rgba(91, 52, 5, 0.40),
    0 0 34px rgba(255, 227, 130, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

.project-question-form button:hover::before {
  transform: translateX(120%) skewX(-12deg);
}

.project-question-form button:active {
  transform: translateY(-1px);
}
@keyframes luxurySweep {
  0%{
    background-position:-250% 0;
  }

  100%{
    background-position:250% 0;
  }
}

@keyframes goldGlow {
  0%, 100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.45;
  }
}

@keyframes arthomorhoFormBorderSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes arthomorhoFormLightSweep {
  0%, 100% {
    background-position: -120% 0, center, center, 0 0, center;
  }
  50% {
    background-position: 120% 0, center, center, 12px 12px, center;
  }
}

@keyframes arthomorhoConsultGridMove {
  0% {
    background-position: 0 0, 0 0, -120% 0;
  }
  100% {
    background-position: 56px 56px, 56px 56px, 120% 0;
  }
}

@keyframes arthomorhoGoldPulse {
  0%, 100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.12) brightness(1.06);
  }
}

@media (max-width: 768px) {
  .project-question-section {
    padding: 72px 18px;
  }

  .project-question-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .project-question-text h2 {
    font-size: 30px;
  }

  .project-question-text p:not(.section-label) {
    font-size: 14px;
    line-height: 1.75;
  }

  .project-question-form {
    padding: 24px;
    border-radius: 24px;
  }

  .project-question-form::after {
    border-radius: 21px;
  }
}

@media (max-width: 480px) {
  .project-question-section {
    padding: 64px 14px;
  }

  .project-question-form {
    padding: 20px;
  }

  .project-question-form input,
  .project-question-form select,
  .project-question-form textarea {
    margin-bottom: 13px;
    padding: 13px 14px;
    font-size: 13px;
  }

  .project-question-form select {
    padding-right: 42px;
  }

  .form-check {
    padding: 12px;
    font-size: 12.5px;
  }

  .project-question-form button {
    padding: 15px 18px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-question-section::before,
  .project-question-form,
  .project-question-form::before,
  .project-question-form::after,
  .project-question-form button::before {
    animation: none !important;
    transition: none !important;
  }
}
.follow-us {
  list-style: none;
  margin-top: 15px;
}

.follow-us h4 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.social-icons a {
  color: #9b9b9b;
  font-size: 22px;
  text-decoration: none;
  transition: 0.3s ease;
}

.social-icons a:hover {
  color: #d4a44c;
}

/* MOBILE - PROCESS & FOOTER */
@media (max-width: 768px) {
  .process {
    background:
      linear-gradient(rgba(0,0,0,.94), rgba(0,0,0,.94)),
      url('img/arthomorho_design_2b.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .footer {
    background:
      linear-gradient(rgba(0,0,0,.94), rgba(0,0,0,.94)),
      url('img/arthomorho_design_3b.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* MOBILE KECIL - jika posisi gambar perlu disesuaikan */
@media (max-width: 480px) {
  .process {
    background-position: center top;
  }

  .footer {
    background-position: center top;
  }
}


    .project-card img {
      cursor: zoom-in;
    }

    .project-lightbox {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(0, 0, 0, 0.88);
      z-index: 99999;
    }

    .project-lightbox.active {
      display: flex;
    }

    .project-lightbox-content {
      position: relative;
      width: min(1100px, 95vw);
      max-height: 92vh;
      text-align: center;
      animation: projectZoomIn 0.22s ease;
    }

    .project-lightbox-main {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .project-lightbox-main-image {
      max-width: 100%;
      max-height: 68vh;
      border-radius: 16px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
      background: #000000;
      object-fit: contain;
    }

    .project-lightbox-nav {
      position: absolute;
      top: 50%;
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 50%;
      background: rgba(212, 164, 76, 0.95);
      color: #1e2a32;
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      transform: translateY(-50%);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .project-lightbox-nav:hover,
    .project-lightbox-nav:focus {
      background: #ffffff;
      outline: none;
      transform: translateY(-50%) scale(1.04);
    }

    .project-lightbox-prev {
      left: 18px;
    }

    .project-lightbox-next {
      right: 18px;
    }

    .project-lightbox-caption {
      margin-top: 14px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
    }

    .project-lightbox-counter {
      margin-top: 6px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 13px;
      font-weight: 600;
    }

    .project-lightbox-gallery {
      display: grid;
      grid-template-columns: repeat(5, minmax(74px, 1fr));
      gap: 10px;
      margin-top: 16px;
      width: min(760px, 100%);
      margin-left: auto;
      margin-right: auto;
    }

    .project-lightbox-thumb {
      padding: 0;
      border: 2px solid transparent;
      border-radius: 12px;
      background: transparent;
      cursor: pointer;
      opacity: 0.68;
      overflow: hidden;
      transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .project-lightbox-thumb:hover,
    .project-lightbox-thumb:focus,
    .project-lightbox-thumb.active {
      opacity: 1;
      border-color: #d4a44c;
      outline: none;
      transform: translateY(-2px);
    }

    .project-lightbox-thumb img {
      display: block;
      width: 100%;
      height: 82px;
      object-fit: cover;
      border-radius: 10px;
      background: #ffffff;
    }

    .project-lightbox-close {
      position: absolute;
      top: -18px !important;
      right: -18px !important;
      z-index: 100001;
      display: inline-grid;
      place-items: center;
      width: 54px !important;
      height: 54px !important;
      padding: 0 !important;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 999px !important;
      background:
        linear-gradient(135deg, rgba(212, 164, 76, 0.98), rgba(255, 226, 155, 0.96)) !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 1 !important;
      cursor: pointer;
      box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transform: none !important;
      transition:
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
    }

    .project-lightbox-close::before,
    .project-lightbox-close::after {
      content: '';
      position: absolute !important;
      width: 22px !important;
      height: 3px !important;
      border-radius: 999px !important;
      background: #1e2a32;
      transition: background 0.2s ease, transform 0.2s ease !important;
    }

    .project-lightbox-close::before {
      transform: rotate(45deg) !important;
    }

    .project-lightbox-close::after {
      transform: rotate(-45deg) !important;
    }

    .project-lightbox-close:hover,
    .project-lightbox-close:focus-visible {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: rgba(212, 164, 76, 0.9);
      outline: none;
      transform: none !important;
      box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.5),
        0 0 0 4px rgba(212, 164, 76, 0.22);
    }

    .project-lightbox-close:active {
      transform: none !important;
    }

    @keyframes projectZoomIn {
      from {
        opacity: 0;
        transform: scale(0.94);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @media (max-width: 768px) {
      .project-lightbox {
        padding: 16px;
      }

      .project-lightbox-main-image {
        max-height: 58vh;
        border-radius: 12px;
      }

      .project-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 19px;
      }

      .project-lightbox-prev {
        left: 8px;
      }

      .project-lightbox-next {
        right: 8px;
      }

      .project-lightbox-close {
        top: -10px !important;
        right: -6px !important;
        width: 46px !important;
        height: 46px !important;
      }

      .project-lightbox-close::before,
      .project-lightbox-close::after {
        width: 19px !important;
        height: 2.5px !important;
      }

      .project-lightbox-caption {
        font-size: 14px !important;
      }

      .project-lightbox-gallery {
        grid-template-columns: repeat(5, minmax(52px, 1fr));
        gap: 7px !important;
        margin-top: 12px !important;
      }

      .project-lightbox-thumb img {
        height: 54px !important;
        border-radius: 8px !important;
      }
    }


    /* Language Dropdown */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
    }

    .language-dropdown {
      position: relative;
      z-index: 9999;
    }

    .language-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px 13px;
      border: 1px solid rgba(212, 164, 76, 0.8);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.96);
      color: #1e2a32;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .language-toggle:hover,
    .language-toggle:focus {
      background: #d4a44c;
      color: #1e2a32;
      outline: none;
      transform: translateY(-1px);
    }

    .language-flag {
      font-size: 18px;
      line-height: 1;
    }
    .language-flag-img,
    .language-option-flag {
      display: inline-block;
      width: 24px;
      height: 18px;
      object-fit: cover;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(30, 42, 50, 0.16);
      flex: 0 0 auto;
    }

    .language-option-flag {
      width: 22px;
      height: 16px;
    }

    .language-menu {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      min-width: 170px;
      padding: 8px;
      border: 1px solid rgba(212, 164, 76, 0.35);
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
      display: none;
    }

    .language-dropdown.open .language-menu {
      display: block;
      animation: languageMenuFade 0.16s ease;
    }

    .language-option {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 11px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #1e2a32;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }

    .language-option:hover,
    .language-option.active {
      background: rgba(212, 164, 76, 0.16);
    }

    .language-option span:first-child {
      font-size: 18px;
      line-height: 1;
    }

    @keyframes languageMenuFade {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 900px) {
      .nav-actions {
        gap: 8px;
      }

      .language-toggle {
        min-height: 38px;
        padding: 9px 11px;
        font-size: 12px;
      }
    }

    @media (max-width: 768px) {
      .nav-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 10px;
      }

      .language-menu {
        right: auto;
        left: 0;
      }
    }

    /* Mobile Header Dropdown Menu */
    .mobile-menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      border: 1px solid rgba(212, 164, 76, 0.8);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.96);
      color: #1e2a32;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.2s ease;
      flex: 0 0 auto;
    }

    .mobile-menu-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 999px;
      background: #1e2a32;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
      background: #d4a44c;
      outline: none;
      transform: translateY(-1px);
    }

    .mobile-menu-toggle.active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    @media (max-width: 768px) {
      .header {
        z-index: 10000;
      }

      .nav-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
      }

      .logo {
        flex: 0 1 auto;
        min-width: 0;
      }

      .logo-img {
        max-width: 150px;
        height: auto;
      }

      .nav-actions {
        width: auto;
        margin-top: 0;
        margin-left: auto;
        justify-content: flex-end;
        gap: 8px;
        flex: 0 0 auto;
      }

      .nav-actions .btn-outline {
        display: none;
      }

      .mobile-menu-toggle {
        display: inline-flex;
      }

      .language-menu {
        right: 0;
        left: auto;
      }

      .nav-menu {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        display: none !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid rgba(212, 164, 76, 0.35);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
        z-index: 9999;
      }

      .nav-menu.mobile-open {
        display: flex !important;
        animation: languageMenuFade 0.16s ease;
      }

      .nav-menu a {
        display: block;
        width: 100%;
        padding: 13px 14px;
        border-radius: 12px;
        color: #1e2a32;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
      }

      .nav-menu a:hover,
      .nav-menu a:focus {
        background: rgba(212, 164, 76, 0.16);
        color: #1e2a32;
        outline: none;
      }
    }

    @media (max-width: 430px) {
      .logo-img {
        max-width: 125px;
      }

      .language-toggle {
        min-height: 36px;
        padding: 8px 9px;
        gap: 6px;
        font-size: 11px;
      }

      .language-flag-img {
        width: 22px;
        height: 16px;
      }

      .mobile-menu-toggle {
        width: 38px;
        height: 38px;
      }
    }


    /* Clients Section */
    .clients {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at top left, rgba(212, 164, 76, 0.18), transparent 34%),
        linear-gradient(135deg, #10191e 0%, #17242b 50%, #10191e 100%);
    }

    .clients .section-heading .section-label {
      color: #d4a44c !important;
    }

    .clients .section-heading h2,
    .clients .section-heading > p:not(.section-label) {
      color: #ffffff;
    }

    .clients .section-heading > p:not(.section-label) {
      max-width: 790px;
      margin-left: auto;
      margin-right: auto;
      color: rgba(255, 255, 255, 0.78);
    }

    .client-carousel {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 38px;
    }

    .client-logo-viewport {
      width: 1080px; /* 5 logo desktop: 5x200 + 4x20 */
      max-width: 100%;
      overflow: hidden;
      padding: 8px 0 18px;
      flex: 0 0 auto;
    }

    .client-logo-track {
      display: flex;
      align-items: center;
      gap: 20px;
      will-change: transform;
      transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .client-logo-card {
      position: relative;
      display: block;
      flex: 0 0 200px;
      width: 200px;
      height: 164px;
      overflow: hidden;
      border: 1px solid rgba(212, 164, 76, 0.34);
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
      text-decoration: none;
      outline: none;
      transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    }

    .client-logo-card:hover,
    .client-logo-card:focus-visible {
      transform: translateY(-6px);
      border-color: rgba(212, 164, 76, 0.92);
      box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32), 0 0 0 4px rgba(212, 164, 76, 0.16);
    }

    .client-logo-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #ffffff;
    }

    .client-carousel-control {
      position: absolute;
      top: 50%;
      z-index: 4;
      display: inline-grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(212, 164, 76, 0.55);
      border-radius: 50%;
      background: linear-gradient(135deg, #d4a44c, #f4d38a);
      color: #10191e;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
      transform: translateY(-50%);
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .client-carousel-prev {
      left: 0;
    }

    .client-carousel-next {
      right: 0;
    }

    .client-carousel-control:hover,
    .client-carousel-control:focus-visible {
      background: #ffffff;
      outline: none;
      transform: translateY(-50%) scale(1.04);
      box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34), 0 0 0 4px rgba(212, 164, 76, 0.18);
    }

    .client-carousel-helper {
      margin-top: 4px;
      color: rgba(255, 255, 255, 0.58);
      font-size: 13px;
      font-weight: 600;
      text-align: center;
    }

    @media (max-width: 1180px) {
      .client-logo-viewport {
        width: 640px; /* 3 logo tablet: 3x200 + 2x20 */
        max-width: calc(100% - 96px);
      }
    }

    @media (max-width: 760px) {
      .client-logo-viewport {
        width: 420px; /* 2 logo layar sedang: 2x200 + 1x20 */
        max-width: calc(100% - 88px);
      }

      .client-carousel-control {
        width: 42px;
        height: 42px;
        font-size: 16px;
      }
    }

    @media (max-width: 520px) {
      .client-logo-viewport {
        width: calc(100% - 84px); /* tetap 2 logo di browser HP */
        min-width: 220px;
        max-width: 340px;
      }

      .client-logo-track {
        gap: 10px;
      }

      .client-logo-card {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        height: auto;
        aspect-ratio: 200 / 164;
        border-radius: 16px;
      }

      .client-carousel-control {
        width: 36px;
        height: 36px;
        font-size: 14px;
      }

      .client-carousel-helper {
        font-size: 12px;
      }
    }
/* =========================================================
   FIX HERO MOBILE LEFT SPACING
   Menjaga tulisan hero dan tombol tidak menempel ke sisi kiri layar.
   Diletakkan paling bawah agar override semua rule sebelumnya.
========================================================= */
@media (max-width: 768px) {
  .hero .hero-content {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .hero .hero-text,
  .hero .hero-subtitle,
  .hero .hero-buttons {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero .hero-content {
    width: calc(100% - 36px);
  }
}

@media (max-width: 360px) {
  .hero .hero-content {
    width: calc(100% - 28px);
  }
}

/* =========================================================
   FIX CLIENT LOGO LABEL & SERVICE HOVER EFFECT
   Revisi: nama klien ditulis manual di HTML/PHP, bukan menjadi bagian gambar.
========================================================= */

/* CLIENT LOGO CARD - logo bersih + nama manual seperti Contoh_1 */
.clients .client-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 8px;
  height: 164px;
  background: #ffffff;
  border: 2px solid rgba(212, 164, 76, 0.72);
  border-radius: 22px;
  overflow: hidden;
}

.clients .client-logo-image-wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px 8px;
  background: #ffffff;
}

.clients .client-logo-card .client-logo-image-wrap img {
  width: 100%;
  height: 100%;
  max-height: 104px;
  object-fit: contain;
  background: #ffffff;
}

.clients .client-logo-name {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 2px solid rgba(212, 164, 76, 0.72);
  border-radius: 999px;
  background: #ffffff;
  color: #1e2a32;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.2px;
  text-align: center;
  white-space: normal;
  box-shadow: inset 0 0 0 1px rgba(212, 164, 76, 0.08);
}

/* SERVICES CARD - shadow, scale, dan rotating glowing border */
.services .service-grid {
  gap: 22px;
  border-top: 0;
  border-left: 0;
}

.services .service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(212, 164, 76, 0.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(20, 25, 34, 0.88), rgba(29, 40, 48, 0.82));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.42s ease,
              border-color 0.42s ease,
              background 0.42s ease;
  cursor: pointer;
}

.services .service-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 70deg,
    rgba(212, 164, 76, 0.15) 95deg,
    rgba(241, 207, 131, 0.95) 125deg,
    rgba(157, 111, 43, 0.95) 155deg,
    transparent 190deg,
    transparent 360deg
  );
  opacity: 0;
  transform: rotate(0deg);
  animation: serviceGoldBorderSpin 4.8s linear infinite;
  transition: opacity 0.45s ease;
  z-index: 0;
}

.services .service-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(15, 24, 30, 0.96), rgba(27, 38, 46, 0.96));
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.services .service-card > * {
  position: relative;
  z-index: 2;
}

.services .service-card:hover {
  transform: translateY(-12px) scale(1.035);
  border-color: transparent;
  background: linear-gradient(135deg, rgba(20, 25, 34, 0.96), rgba(35, 45, 55, 0.94));
  box-shadow:
    0 0 22px rgba(212, 164, 76, 0.28),
    0 22px 48px rgba(0, 0, 0, 0.48);
}

.services .service-card:hover::before {
  opacity: 0.9;
}

.services .service-card:hover::after {
  opacity: 1;
}

.services .service-card:hover i,
.services .service-card:hover h3 {
  color: #f1cf83;
}

@keyframes serviceGoldBorderSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 520px) {
  .clients .client-logo-card {
    padding: 8px 7px 7px;
	height: 124px;
  }

  .clients .client-logo-image-wrap {
    padding: 2px 4px 5px;
  }

  .clients .client-logo-card .client-logo-image-wrap img {
    max-height: 80px;
  }

  .clients .client-logo-name {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 10px;
    line-height: 1.05;
  }

  .services .service-grid {
    gap: 18px;
  }
}

/* =========================================================
   MATCH SERVICE CARD HOVER EFFECT
   Menerapkan efek service-card ke process-card, stat-card, dan project-card.
   Project lightbox tetap berjalan karena overlay tidak menangkap klik.
========================================================= */
.process .process-grid,
.projects .project-grid {
  gap: 22px;
}

.stats .stats-grid {
  gap: 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.process .process-card,
.stats .stat-card,
.projects .project-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(212, 164, 76, 0.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(20, 25, 34, 0.88), rgba(29, 40, 48, 0.82));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.42s ease,
              border-color 0.42s ease,
              background 0.42s ease;
  cursor: pointer;
}

.stats .stat-card {
  border-right: 1px solid rgba(212, 164, 76, 0.22);
  border-bottom: 1px solid rgba(212, 164, 76, 0.22);
}

.stats .stat-card:last-child {
  border-right: 1px solid rgba(212, 164, 76, 0.22);
}

.process .process-card::before,
.stats .stat-card::before,
.projects .project-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 70deg,
    rgba(212, 164, 76, 0.15) 95deg,
    rgba(241, 207, 131, 0.95) 125deg,
    rgba(157, 111, 43, 0.95) 155deg,
    transparent 190deg,
    transparent 360deg
  );
  opacity: 0;
  transform: rotate(0deg);
  animation: serviceGoldBorderSpin 4.8s linear infinite;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 0;
}

.process .process-card::after,
.stats .stat-card::after,
.projects .project-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(15, 24, 30, 0.96), rgba(27, 38, 46, 0.96));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.process .process-card > *,
.stats .stat-card > * {
  position: relative;
  z-index: 2;
}

.projects .project-card img {
  position: relative;
  z-index: 1;
}

.projects .project-info {
  z-index: 3;
}

.projects .project-card::before {
  z-index: 2;
}

.projects .project-card::after {
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.26), transparent 34%),
    linear-gradient(180deg, rgba(9, 15, 18, 0.06) 0%, rgba(9, 15, 18, 0.34) 50%, rgba(9, 15, 18, 0.78) 100%);
  z-index: 2;
}

.process .process-card:hover,
.stats .stat-card:hover,
.projects .project-card:hover {
  transform: translateY(-12px) scale(1.035);
  border-color: transparent;
  background: linear-gradient(135deg, rgba(20, 25, 34, 0.96), rgba(35, 45, 55, 0.94));
  box-shadow:
    0 0 22px rgba(212, 164, 76, 0.28),
    0 22px 48px rgba(0, 0, 0, 0.48);
}

.process .process-card:hover::before,
.stats .stat-card:hover::before,
.projects .project-card:hover::before {
  opacity: 0.9;
}

.process .process-card:hover::after,
.stats .stat-card:hover::after,
.projects .project-card:hover::after {
  opacity: 1;
}

.process .process-card:hover i,
.process .process-card:hover h3,
.process .process-card:hover span,
.stats .stat-card:hover i,
.stats .stat-card:hover h2,
.projects .project-card:hover h3,
.projects .project-card:hover .project-info p {
  color: #f1cf83;
}

.projects .project-card:hover img {
  transform: scale(1.08);
}

@media (max-width: 768px) {
  .stats .stats-grid,
  .process .process-grid,
  .projects .project-grid {
    gap: 18px;
  }

  .stats .stat-card {
    border-right: 1px solid rgba(212, 164, 76, 0.22);
    border-bottom: 1px solid rgba(212, 164, 76, 0.22);
  }
}

/* =========================================================
   REQUESTED UPDATE: PROJECT CARD LIGHT SWEEP + FOUNDER BORDER
   - Project card: remove inner rotating effect and use diagonal moving light.
   - Founder image: futuristic rotating border.
========================================================= */
.projects .project-card {
  border-color: rgba(212, 164, 76, 0.28);
}

.projects .project-card::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 34%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(241, 207, 131, 0.68) 48%,
    rgba(255, 255, 255, 0.24) 54%,
    transparent 64%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-145%) skewX(-10deg);
  animation: none;
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
}

.projects .project-card:hover::before {
  opacity: 1;
  animation: projectDiagonalLightSweep 1.45s ease-in-out infinite;
}

.projects .project-card::after {
  background:
    linear-gradient(180deg, rgba(9, 15, 18, 0.03) 0%, rgba(9, 15, 18, 0.24) 52%, rgba(9, 15, 18, 0.82) 100%);
  opacity: 0;
  z-index: 2;
}

.projects .project-card:hover::after {
  opacity: 1;
}

.projects .project-info {
  z-index: 5;
}

@keyframes projectDiagonalLightSweep {
  0% {
    transform: translateX(-145%) skewX(-10deg);
  }
  100% {
    transform: translateX(145%) skewX(-10deg);
  }
}

.founder-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(212, 164, 76, 0.28);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(14, 22, 27, 0.94), rgba(25, 38, 46, 0.92));
  box-shadow:
    0 0 0 1px rgba(212, 164, 76, 0.12),
    0 24px 65px rgba(0, 0, 0, 0.38),
    0 0 32px rgba(212, 164, 76, 0.12);
}

.founder-image::before {
  content: "";
  position: absolute;
  inset: -48%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 164, 76, 0.18) 38deg,
    rgba(241, 207, 131, 0.96) 70deg,
    rgba(255, 255, 255, 0.58) 92deg,
    rgba(157, 111, 43, 0.82) 118deg,
    transparent 152deg,
    transparent 232deg,
    rgba(212, 164, 76, 0.20) 274deg,
    transparent 326deg,
    transparent 360deg
  );
  animation: founderFuturisticBorderSpin 6.5s linear infinite;
  z-index: 0;
}

.founder-image::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.12), transparent 40%),
    linear-gradient(135deg, #10191e, #0d1418);
  z-index: 1;
}

.founder-image img {
  position: relative;
  z-index: 2;
  border-radius: 18px;
  box-shadow: 0 0 26px rgba(212, 164, 76, 0.14);
}

@keyframes founderFuturisticBorderSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects .project-card:hover::before,
  .founder-image::before {
    animation: none;
  }
}


/* =========================================================
   REQUESTED UPDATE: FUTURISTIC ROTATING BORDER FOR STAT CARD
   - Hanya rotating border pada 4 kotak stat-card.
   - Setiap kotak memakai durasi animasi berbeda.
   - Diletakkan di paling bawah agar override efek lama stat-card.
========================================================= */
.stats .stats-grid {
  overflow: visible;
}

.stats .stat-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(212, 164, 76, 0.30) !important;
  border-radius: 22px;
  background:
    radial-gradient(circle at top center, rgba(212, 164, 76, 0.10), transparent 42%),
    linear-gradient(135deg, rgba(14, 22, 27, 0.96), rgba(25, 38, 46, 0.92)) !important;
  box-shadow:
    0 0 0 1px rgba(212, 164, 76, 0.10),
    0 18px 46px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: default;
  transform: none !important;
}

.stats .stat-card::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 24deg,
    rgba(212, 164, 76, 0.20) 48deg,
    rgba(241, 207, 131, 0.98) 72deg,
    rgba(255, 255, 255, 0.58) 94deg,
    rgba(157, 111, 43, 0.86) 122deg,
    transparent 156deg,
    transparent 238deg,
    rgba(212, 164, 76, 0.24) 278deg,
    transparent 324deg,
    transparent 360deg
  );
  opacity: 0.95 !important;
  animation: statFuturisticBorderSpin 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.stats .stat-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 19px;
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.12), transparent 38%),
    linear-gradient(135deg, #10191e, #0d1418 58%, #111b21);
  opacity: 1 !important;
  pointer-events: none;
  z-index: 1;
}

.stats .stat-card > * {
  position: relative;
  z-index: 2;
}

.stats .stat-card:nth-child(1)::before {
  animation-duration: 5.4s;
}

.stats .stat-card:nth-child(2)::before {
  animation-duration: 6.8s;
}

.stats .stat-card:nth-child(3)::before {
  animation-duration: 8.2s;
}

.stats .stat-card:nth-child(4)::before {
  animation-duration: 9.6s;
}

.stats .stat-card:hover {
  transform: none !important;
  border-color: rgba(212, 164, 76, 0.30) !important;
  background:
    radial-gradient(circle at top center, rgba(212, 164, 76, 0.10), transparent 42%),
    linear-gradient(135deg, rgba(14, 22, 27, 0.96), rgba(25, 38, 46, 0.92)) !important;
  box-shadow:
    0 0 0 1px rgba(212, 164, 76, 0.14),
    0 18px 46px rgba(0, 0, 0, 0.30),
    0 0 30px rgba(212, 164, 76, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.stats .stat-card:hover i,
.stats .stat-card:hover h2 {
  color: #d4a44c;
}

@keyframes statFuturisticBorderSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats .stat-card::before {
    animation: none;
  }
}

/* =========================================================
   FINAL UPDATE: FUTURISTIC ROTATING BORDER ONLY
   - 8 service-card: rotating border dengan durasi berbeda.
   - 6 process-card: rotating border dengan durasi berbeda.
   - Efek hover lama seperti scale, overlay glow, dan perubahan warna
     dioverride agar yang aktif hanya rotating border.
========================================================= */
.services .service-grid,
.process .process-grid {
  overflow: visible;
}

.services .service-card,
.process .process-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(212, 164, 76, 0.30);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(14, 22, 27, 0.96), rgba(25, 38, 46, 0.92));
  box-shadow:
    0 0 0 1px rgba(212, 164, 76, 0.10),
    0 18px 46px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: default;
  transform: none !important;
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
}

.services .service-card::before,
.process .process-card::before {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 24deg,
    rgba(212, 164, 76, 0.20) 48deg,
    rgba(241, 207, 131, 0.98) 72deg,
    rgba(255, 255, 255, 0.58) 94deg,
    rgba(157, 111, 43, 0.86) 122deg,
    transparent 156deg,
    transparent 238deg,
    rgba(212, 164, 76, 0.24) 278deg,
    transparent 324deg,
    transparent 360deg
  );
  opacity: 0.95;
  transform: rotate(0deg);
  animation: arthomorhoFuturisticCardBorderSpin var(--card-border-duration, 6s) linear infinite;
  pointer-events: none;
  z-index: 0;
}

.services .service-card::after,
.process .process-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 19px;
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.12), transparent 38%),
    linear-gradient(135deg, #10191e, #0d1418 58%, #111b21);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.services .service-card > *,
.process .process-card > * {
  position: relative;
  z-index: 2;
}

.services .service-card:hover,
.process .process-card:hover {
  transform: none !important;
  border-color: rgba(212, 164, 76, 0.30);
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(14, 22, 27, 0.96), rgba(25, 38, 46, 0.92));
  box-shadow:
    0 0 0 1px rgba(212, 164, 76, 0.14),
    0 18px 46px rgba(0, 0, 0, 0.30),
    0 0 30px rgba(212, 164, 76, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.services .service-card:hover::before,
.process .process-card:hover::before,
.services .service-card:hover::after,
.process .process-card:hover::after {
  opacity: inherit;
}

.services .service-card i,
.services .service-card:hover i,
.process .process-card i,
.process .process-card span,
.process .process-card:hover i,
.process .process-card:hover span {
  color: #d4a44c;
}

.services .service-card h3,
.services .service-card:hover h3,
.process .process-card h3,
.process .process-card:hover h3 {
  color: #ffffff;
}

/* Durasi berbeda untuk 8 service-card */
.services .service-card:nth-child(1) { --card-border-duration: 5.2s; }
.services .service-card:nth-child(2) { --card-border-duration: 6.4s; }
.services .service-card:nth-child(3) { --card-border-duration: 7.6s; }
.services .service-card:nth-child(4) { --card-border-duration: 8.8s; }
.services .service-card:nth-child(5) { --card-border-duration: 10s; }
.services .service-card:nth-child(6) { --card-border-duration: 11.2s; }
.services .service-card:nth-child(7) { --card-border-duration: 12.4s; }
.services .service-card:nth-child(8) { --card-border-duration: 13.6s; }

/* Durasi berbeda untuk 6 process-card */
.process .process-card:nth-child(1) { --card-border-duration: 5.8s; }
.process .process-card:nth-child(2) { --card-border-duration: 7.1s; }
.process .process-card:nth-child(3) { --card-border-duration: 8.4s; }
.process .process-card:nth-child(4) { --card-border-duration: 9.7s; }
.process .process-card:nth-child(5) { --card-border-duration: 11s; }
.process .process-card:nth-child(6) { --card-border-duration: 12.3s; }

@keyframes arthomorhoFuturisticCardBorderSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .services .service-card::before,
  .process .process-card::before {
    animation: none;
  }
}


/* =========================================================
   FINAL REQUESTED UPDATE: PROJECT CARD FUTURISTIC ROTATING BORDER
   - 8 project-card memakai rotating border seperti process-card.
   - Fungsi klik/lightbox tetap aman karena pseudo-element tidak menangkap klik.
   - Diletakkan paling bawah untuk override efek diagonal light sweep sebelumnya.
========================================================= */
@property --arthomorho-project-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.projects .project-grid {
  overflow: visible;
}

.projects .project-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(212, 164, 76, 0.30) !important;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(14, 22, 27, 0.96), rgba(25, 38, 46, 0.92)) !important;
  box-shadow:
    0 0 0 1px rgba(212, 164, 76, 0.10),
    0 18px 46px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transform: none !important;
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
}

.projects .project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--arthomorho-project-border-angle),
    transparent 0deg,
    transparent 24deg,
    rgba(212, 164, 76, 0.20) 48deg,
    rgba(241, 207, 131, 0.98) 72deg,
    rgba(255, 255, 255, 0.58) 94deg,
    rgba(157, 111, 43, 0.86) 122deg,
    transparent 156deg,
    transparent 238deg,
    rgba(212, 164, 76, 0.24) 278deg,
    transparent 324deg,
    transparent 360deg
  );
  opacity: 0.98 !important;
  transform: none !important;
  animation: arthomorhoProjectCardBorderSpin var(--project-card-border-duration, 6s) linear infinite !important;
  transition: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none;
  z-index: 6;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.projects .project-card::after {
  display: none !important;
}

.projects .project-card img {
  position: relative;
  z-index: 2;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  cursor: zoom-in;
  transition: transform 0.5s ease;
}

.projects .project-info {
  z-index: 5;
  pointer-events: none;
  border-radius: 0 0 20px 20px;
}

.projects .project-card:hover,
.projects .project-card:focus-visible {
  transform: none !important;
  border-color: rgba(212, 164, 76, 0.30) !important;
  background:
    radial-gradient(circle at top left, rgba(212, 164, 76, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(14, 22, 27, 0.96), rgba(25, 38, 46, 0.92)) !important;
  box-shadow:
    0 0 0 1px rgba(212, 164, 76, 0.14),
    0 18px 46px rgba(0, 0, 0, 0.30),
    0 0 30px rgba(212, 164, 76, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.projects .project-card:hover::before,
.projects .project-card:focus-visible::before {
  opacity: 0.98 !important;
  animation: arthomorhoProjectCardBorderSpin var(--project-card-border-duration, 6s) linear infinite !important;
}

.projects .project-card:hover img,
.projects .project-card:focus-visible img {
  transform: scale(1.08);
}

.projects .project-card:hover h3,
.projects .project-card:hover .project-info p,
.projects .project-card:focus-visible h3,
.projects .project-card:focus-visible .project-info p {
  color: #f1cf83;
}

/* Durasi berbeda untuk 8 project-card agar animasi terlihat lebih hidup */
.projects .project-card:nth-child(1) { --project-card-border-duration: 5.4s; }
.projects .project-card:nth-child(2) { --project-card-border-duration: 6.7s; }
.projects .project-card:nth-child(3) { --project-card-border-duration: 8s; }
.projects .project-card:nth-child(4) { --project-card-border-duration: 9.3s; }
.projects .project-card:nth-child(5) { --project-card-border-duration: 10.6s; }
.projects .project-card:nth-child(6) { --project-card-border-duration: 11.9s; }
.projects .project-card:nth-child(7) { --project-card-border-duration: 13.2s; }
.projects .project-card:nth-child(8) { --project-card-border-duration: 14.5s; }

@keyframes arthomorhoProjectCardBorderSpin {
  0% {
    --arthomorho-project-border-angle: 0deg;
  }
  100% {
    --arthomorho-project-border-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects .project-card::before {
    animation: none !important;
  }
}

/* =========================================================
   REVISION: KEEP DIAGONAL LIGHT SWEEP ON PROJECT CARD
   - ::before tetap untuk rotating border.
   - ::after dipakai kembali untuk diagonal light sweep.
   - pointer-events tetap none agar klik gambar/lightbox tidak terganggu.
========================================================= */
.projects .project-card::after {
  content: "";
  position: absolute;
  inset: -35%;
  display: block !important;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(241, 207, 131, 0.68) 49%,
    rgba(255, 255, 255, 0.24) 54%,
    transparent 62%,
    transparent 100%
  ) !important;
  opacity: 0;
  transform: translateX(-145%) skewX(-10deg);
  animation: none;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.25s ease;
}

.projects .project-card:hover::after,
.projects .project-card:focus-visible::after {
  opacity: 1;
  animation: projectDiagonalLightSweep 1.45s ease-in-out infinite;
}

/* Pastikan rotating border tetap paling atas di area garis tepi */
.projects .project-card::before {
  z-index: 6;
}

/* Pastikan caption tetap terbaca di atas light sweep */
.projects .project-info {
  position: absolute;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .projects .project-card::after {
    animation: none !important;
    opacity: 0.28;
    transform: none;
  }
}

/* =========================================================
   MOVED FROM INDEX.PHP: helper classes, toast, and hero rain
========================================================= */
.text-gold,
.section-hero,
.footer-features .gold-check {
  color: #d4a44c !important;
}

.footer-brand-label {
  color: #d4a44c !important;
  font-size: 17px !important;
}

.honeypot-field {
  display: none !important;
}

.toast-message {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(350px, calc(100vw - 32px));
  padding: 16px 24px;
  border-left: 5px solid #d4a44c;
  border-radius: 12px;
  background: rgba(30, 42, 50, 0.92);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, border-color 0.3s ease;
}

.toast-message.toast-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.toast-message.toast-hiding {
  opacity: 0;
  transform: translateY(14px);
}

.toast-message.toast-error {
  border-left-color: #e74c3c;
}

.toast-icon {
  color: #d4a44c;
  font-size: 22px;
}

.toast-message.toast-error .toast-icon {
  color: #e74c3c;
}

.toast-close {
  margin-left: auto;
  border: none;
  background: none;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 480px) {
  .toast-message {
    right: 16px;
    bottom: 18px;
    padding: 14px 16px;
  }
}

.hero {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .arthomorho-digital-rain {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
      opacity: 0.55;
      mix-blend-mode: screen;
    }

    .hero-content {
      position: relative;
      z-index: 3;
    }

    @media (max-width: 768px) {
      .arthomorho-digital-rain {
        opacity: 0.38;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .arthomorho-digital-rain {
        display: none;
      }
    }


/* =========================================================
   UPDATE PROJECT QUESTION FORM - SAMPLE GOLD CONSTRUCTION UI
   Scope hanya untuk section/form konsultasi proyek.
   Input, select, textarea, checkbox, dan button tetap mengikuti HTML lama.
========================================================= */
.project-question-section {
  position: relative;
  padding: 110px 20px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 7, 3, 0.42), rgba(10, 7, 3, 0.88)),
    radial-gradient(circle at 50% 7%, rgba(255, 210, 103, 0.22), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(255, 183, 63, 0.16), transparent 24%),
    radial-gradient(circle at 88% 86%, rgba(255, 183, 63, 0.13), transparent 25%),
    url('img/arthomorho_design_4a.png');
  background-size: cover, auto, auto, auto, cover;
  background-position: center, center, center, center, center;
  background-repeat: no-repeat;
}

.project-question-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 4, 2, 0.75), transparent 26%, transparent 74%, rgba(6, 4, 2, 0.75)),
    linear-gradient(180deg, rgba(7, 5, 2, 0.20), rgba(7, 5, 2, 0.58)),
    radial-gradient(circle at 50% 95%, rgba(255, 198, 91, 0.22), transparent 32%);
  opacity: 1;
  animation: none;
}

.project-question-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 14% 74%, rgba(255, 212, 116, 0.95) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 86%, rgba(255, 190, 71, 0.76) 0 1px, transparent 2px),
    radial-gradient(circle at 53% 91%, rgba(255, 224, 145, 0.90) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 82%, rgba(255, 184, 65, 0.70) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 70%, rgba(255, 222, 136, 0.80) 0 1px, transparent 2px);
  box-shadow: none;
}

.project-question-container {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr minmax(420px, 620px);
  gap: 48px;
  align-items: center;
}

.project-question-text .section-label {
  color: #f3cf7a;
  text-shadow: 0 0 18px rgba(255, 196, 77, 0.36);
}

.project-question-text h2 {
  color: #fff4c8;
  text-shadow:
    0 2px 0 rgba(83, 45, 4, 0.74),
    0 18px 42px rgba(0, 0, 0, 0.74),
    0 0 26px rgba(255, 200, 91, 0.22);
}

.project-question-text p:not(.section-label) {
  color: rgba(255, 235, 190, 0.88);
}

.project-question-form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 34px 36px;
  border: 1px solid rgba(255, 214, 113, 0.72);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 211, 113, 0.22), transparent 25%),
    radial-gradient(circle at 12% 18%, rgba(255, 244, 198, 0.10), transparent 18%),
    radial-gradient(circle at 88% 88%, rgba(120, 64, 8, 0.46), transparent 25%),
    linear-gradient(145deg, rgba(60, 32, 6, 0.96), rgba(35, 20, 5, 0.96) 44%, rgba(17, 11, 4, 0.98));
  color: #fff0c1;
  box-shadow:
    0 36px 92px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(255, 240, 176, 0.15),
    0 0 42px rgba(255, 177, 58, 0.22),
    inset 0 1px 0 rgba(255, 239, 170, 0.34),
    inset 0 -30px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: arthomorhoGoldPulse 5.2s ease-in-out infinite;
}

.project-question-form:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 232, 151, 0.98);
  box-shadow:
    0 42px 102px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 244, 193, 0.20),
    0 0 62px rgba(255, 194, 78, 0.30),
    inset 0 1px 0 rgba(255, 244, 193, 0.46),
    inset 0 -32px 66px rgba(0, 0, 0, 0.36);
}

.project-question-form::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  border-radius: 26px;
  border: 1px solid rgba(255, 199, 82, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(116, 64, 10, 0.58),
    inset 0 0 34px rgba(255, 192, 73, 0.10),
    0 0 26px rgba(255, 197, 83, 0.16);
  opacity: 1;
  background:
    linear-gradient(90deg, transparent, rgba(255, 224, 144, 0.12), transparent);
  pointer-events: none;
  animation: none;
}

.project-question-form::after {
  content: "";
  position: absolute;
  inset: -38%;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255, 242, 190, 0.20) 47%, rgba(255, 200, 85, 0.14) 51%, transparent 61%, transparent 100%);
  background-size: 220% 220%;
  opacity: 0.80;
  animation: arthomorhoFormLightSweep 11s ease-in-out infinite;
}

.project-question-form > * {
  position: relative;
  z-index: 2;
}

.project-question-form-brand {
  width: 132px;
  margin: 0 auto 10px;
  filter:
    sepia(1)
    saturate(1.85)
    hue-rotate(344deg)
    brightness(1.16)
    contrast(1.08)
    drop-shadow(0 0 16px rgba(255, 204, 98, 0.34));
}

.project-question-form-brand img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.project-question-form-title {
  margin: 0 0 12px;
  color: #ffe39a;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1.6px;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(88, 45, 5, 0.88),
    0 0 20px rgba(255, 203, 91, 0.28);
}

.project-question-form-divider {
  width: min(100%, 440px);
  height: 22px;
  margin: 0 auto 22px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 199, 82, 0.78), transparent);
  mask-image: linear-gradient(#000, #000);
  position: relative;
}

.project-question-form-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 226, 148, 0.88);
  background: #8e5316;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 16px rgba(255, 198, 75, 0.65);
}

.project-question-form input,
.project-question-form select,
.project-question-form textarea {
  width: 100%;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 197, 82, 0.58);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(95, 51, 11, 0.86), rgba(45, 26, 7, 0.92));
  color: #fff0c2;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 158, 0.14),
    inset 0 -8px 20px rgba(0, 0, 0, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.18);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.project-question-form input::placeholder,
.project-question-form textarea::placeholder {
  color: rgba(255, 232, 180, 0.74);
}

.project-question-form input:hover,
.project-question-form select:hover,
.project-question-form textarea:hover {
  border-color: rgba(255, 224, 141, 0.88);
  background:
    linear-gradient(145deg, rgba(112, 61, 14, 0.90), rgba(50, 29, 8, 0.94));
}

.project-question-form input:focus,
.project-question-form select:focus,
.project-question-form textarea:focus {
  border-color: #ffe199;
  background:
    linear-gradient(145deg, rgba(125, 70, 17, 0.96), rgba(55, 32, 9, 0.98));
  box-shadow:
    0 0 0 4px rgba(255, 211, 112, 0.16),
    0 0 30px rgba(255, 197, 82, 0.24),
    inset 0 1px 0 rgba(255, 235, 174, 0.20);
  transform: translateY(-1px);
}

.project-question-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffdf96' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(145deg, rgba(95, 51, 11, 0.86), rgba(45, 26, 7, 0.92));
  background-repeat: no-repeat, no-repeat;
  background-position: right 18px center, center;
  background-size: 16px, 100%;
}

.project-question-form select option {
  color: #201205;
  background: #fff0be;
}

.project-question-form textarea {
  min-height: 132px;
  resize: vertical;
}

.project-question-form input:-webkit-autofill,
.project-question-form input:-webkit-autofill:hover,
.project-question-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff0c2;
  -webkit-box-shadow: 0 0 0 1000px rgba(73, 41, 10, 0.98) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.project-question-form .form-check {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 2px 0 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 236, 194, 0.90);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
  box-shadow: none;
}

.project-question-form .form-check input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  accent-color: #e7b957;
  cursor: pointer;
}

.project-question-form button {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 17px 22px;
  border: 1px solid rgba(255, 230, 159, 0.82);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 207, 104, 0.18), transparent),
    linear-gradient(135deg, #7a3c09 0%, #c5771e 38%, #f5c66d 56%, #8b4310 100%);
  color: #fff2c9;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.45px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(75, 34, 4, 0.70);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.38),
    0 0 25px rgba(255, 198, 84, 0.24),
    inset 0 1px 0 rgba(255, 238, 181, 0.52),
    inset 0 -10px 18px rgba(84, 35, 5, 0.24);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.project-question-form button::before {
  content: "";
  position: absolute;
  inset: -60% -35%;
  background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.70) 48%, transparent 58%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform 0.55s ease;
}

.project-question-form button::after {
  content: "\f1d8";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 10px;
}

.project-question-form button:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.46),
    0 0 38px rgba(255, 206, 100, 0.34),
    inset 0 1px 0 rgba(255, 243, 196, 0.70);
}

.project-question-form button:hover::before {
  transform: translateX(120%) skewX(-12deg);
}

.project-question-form button:active {
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .project-question-container {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .project-question-text {
    text-align: center;
  }

  .project-question-text p:not(.section-label) {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .project-question-section {
    padding: 88px 16px;
  }

  .project-question-form {
    padding: 30px 22px 28px;
    border-radius: 28px;
  }

  .project-question-form::before {
    inset: 7px;
    border-radius: 22px;
  }

  .project-question-form-brand {
    width: 112px;
  }

  .project-question-form-title {
    font-size: 25px;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .project-question-section {
    padding: 78px 12px;
  }

  .project-question-form {
    padding: 28px 18px 24px;
  }

  .project-question-form input,
  .project-question-form select,
  .project-question-form textarea {
    font-size: 13px;
    padding: 14px 15px;
  }

  .project-question-form .form-check {
    font-size: 12.5px;
  }
}

/* FOOTER MAP LOKASI KANTOR */
.footer-map {
  margin-top: 18px;
}

.footer-map-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.footer-map-title i {
  margin-right: 0;
}

.footer-map-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 220px;
  border: 1px solid rgba(212, 164, 76, 0.35);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.footer-map-frame iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  filter: saturate(0.9) contrast(1.02);
}

.footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #d4a44c;
  font-size: 13px;
  font-weight: 700;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-map-link:hover {
  color: #f1cf83;
  transform: translateY(-2px);
}

.footer-map-link i {
  margin-right: 0;
  font-size: 12px;
}

@media (max-width: 768px) {
  .footer-map-frame,
  .footer-map-frame iframe {
    height: 210px;
    min-height: 210px;
  }
}