:root{
  --bg:#f7fafc;
  --bg-accent:#eef5ff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#0fc8a3;
  --card:#ffffff;
  --card-stroke:rgba(2,6,23,.08);
  --glass: rgba(255,255,255,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans;
  font-size: 1.05rem;
  color: var(--ink);
  background:
     radial-gradient(900px 520px at 80% -20%, rgba(56,189,248,.20), transparent 60%),
     radial-gradient(700px 420px at -10% 0%, rgba(15,200,163,.14), transparent 60%),
     var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{
  max-width:1080px;
  margin-inline:auto;
  padding-inline: clamp(1rem, 5vw, 4rem);
}

.maxch{ max-width: 75ch; }

h1,h2,h3,h4{line-height:1.2;margin:0 0 .6rem}
h1{font-size: clamp(2.5rem, 4.5vw, 3.4rem);}
h2{font-size: clamp(2.1rem, 4.5vw, 3rem); margin-bottom: 2rem; position: relative;}
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--brand);
  margin-top: 1rem;
  border-radius: 2px;
}
h3{font-size:1.25rem; margin-top:1.2rem}
h4{font-size:1.1rem}
p{opacity:.95}

/* Navbar */
.navbar{
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  transform: translateY(0);
  transition: transform .35s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
  background: #ffffff;
  border-bottom: 1px solid rgba(2,6,23,.08); box-shadow: 0 10px 30px rgba(2,6,23,.10);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height: 56px; }
.brand{ display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 40px; width: auto; }
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  margin-left: 1.5rem;
  opacity: 0.85;
  font-size: 0.9rem;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.nav-links a:hover { opacity: 1; color: var(--brand); }

.navbar.nav--glass{
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.navbar.nav--hidden{ transform: translateY(-110%); }

/* Hero */
.hero{
  position:relative; min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: transparent; /* Changed from solid background to transparent */
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
    url('images/hero.jpg') center/cover no-repeat;
  transform: scale(1);
  animation: heroZoom 22s ease-in-out infinite alternate;
  will-change: transform; z-index:-1;
}
@keyframes heroZoom{ to{ transform: scale(1.06); } }
.hero-inner{ text-align:center; padding-block: 120px; color: white; text-shadow: 0 4px 30px rgba(0,0,0,0.6); position: relative; z-index: 1; }
.hero h1 { color: white; margin-bottom: 1.5rem; }
.hero .lead{ color: rgba(255,255,255,0.95); margin-bottom: 2rem; max-width: 800px; margin-inline: auto; }
.cta-row{ display:flex; gap:.8rem; justify-content:center; margin-bottom: .8rem;}
.btn{
  display:inline-block; padding:.9rem 1.2rem; border-radius:12px;
  background: linear-gradient(180deg, var(--brand), #0aa888); color:white; text-decoration:none; font-weight:700;
  box-shadow: 0 10px 30px rgba(15,200,163,.35); transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 12px 38px rgba(15,200,163,.40); }
.btn.btn-outline{
  background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: none;
}
.btn.btn-outline:hover{ background: rgba(255,255,255,0.2); border-color: white; }

/* Trust row */
.trust-row{ list-style:none; padding:0; margin: .8rem 0 0; display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; color: white; font-size:1.05rem; }
.trust-row li{ background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); padding:.35rem .6rem; border-radius:999px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* Segmentation */
section {
  padding: 140px 0;
  scroll-margin-top: 70px;
  position: relative;
  border-top: 1px solid var(--card-stroke);
}
section:nth-of-type(even) { background-color: #f0f4f8; }

/* About & HSE Grid */
.grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4rem; align-items: center; }
.section-stack { display: flex; flex-direction: column; gap: 6rem; }

.prose h3 {
  margin-top: 2rem;
  border-bottom: 1px solid var(--card-stroke);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.prose p { margin-bottom: 1rem; }

.img-fluid { width: 100%; height: auto; display: block; }
.rounded { border-radius: 12px; }
.shadow-sm { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.shadow { box-shadow: 0 10px 30px rgba(2,6,23,.10); }

.about-image img, .hse-image img { 
  aspect-ratio: 4/3; 
  object-fit: cover; 
  border-radius: 20px;
}

/* Services & Team Cards */
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; margin-top: 30px; }
.services-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
#services .container { max-width: 1440px; }
.card { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
  padding: 0; 
  overflow: hidden;
  border: 1px solid var(--card-stroke);
  background: var(--card);
  border-radius:16px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(2,6,23,.08); }
.card-body { padding: 1.5rem; flex-grow: 1; }
.card-body h3 { margin-top: 0; }
.card-body p { color: var(--muted); margin: 0; }

.card-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card:hover .card-image img { transform: scale(1.05); }

.team-cards .card { text-align: center; }
.team-image {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.team-image img { width: 100%; height: 100%; object-fit: cover; }

/* Portfolio tiles */
.tile{ min-height: 240px; display:flex; flex-direction:column; justify-content:flex-end; padding: 24px; overflow:hidden; position:relative; isolation:isolate; background: transparent; }
.tile h4, .tile p { position: relative; z-index: 2; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.8); margin: 0; }
.tile h4 { margin-bottom: 0.5rem; font-size: 1.35rem; }
.tile p { font-size: 1rem; opacity: 1; }
.tile::before{ content:""; position:absolute; inset:0; z-index: -1; border-radius:14px; transition: transform .45s ease; background-size: cover; background-position: center; }
.tile:hover::before{ transform: scale(1.08); }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.8) 90%);
  z-index: 0;
  border-radius: 14px;
}

.tile-pv-bess::before { background-image: url('images/pv-bess.jpg'); }
.tile-papua::before { background-image: url('images/papua.jpg'); }
.tile-maluku::before { background-image: url('images/maluku.jpg'); }
.tile-sultra::before { background-image: url('images/sultra.jpg'); }
.tile-ampana::before { background-image: url('images/ampana.jpg'); }
.tile-abb::before { background-image: url('images/abb.jpg'); }

/* Gentle float + reveal */
.reveal{ opacity:0; transform: translateY(18px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: none; }

/* Contact */
.contact-form .grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 12px; }
.contact-form .grid .full{ grid-column: 1/-1; }
input, textarea{
  width:100%; color:var(--ink); background: rgba(2,6,23,.04);
  font-size: 1.1rem;
  border:1px solid var(--card-stroke); border-radius:12px; padding:.8rem .9rem; outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:focus, textarea:focus{ border-color: rgba(15,200,163,.6); box-shadow: 0 0 0 4px rgba(15,200,163,.15); background: white; }
.muted{ color:var(--muted); }

/* Logos */
.client-partner-section { display: flex; flex-direction: column; gap: 40px; margin-top: 3rem; }
.logo-row { display: grid; grid-template-columns: 140px 1fr; gap: 40px; align-items: start; }
.row-label { font-size: 1.25rem; font-weight: 700; color: var(--muted); margin-top: 1.5rem; }
.logo-grid{ display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.logo-item{ display:flex; align-items:center; justify-content:center; transition: all 0.3s ease; height: 100px; padding: 0.5rem; }
.logo-item img{ max-width: 100%; max-height: 85%; filter: grayscale(100%) opacity(0.6); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); object-fit: contain; }
.logo-item:hover{ transform: translateY(-4px) scale(1.05); }
.logo-item:hover img{ filter: grayscale(0%) opacity(1) drop-shadow(0 6px 12px rgba(2,6,23,.10)); }

.logo-divider { height: 1px; background: rgba(2,6,23,.08); width: 100%; }

@media (max-width: 1024px){
  .logo-row { grid-template-columns: 1fr; gap: 10px; }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
  .row-label { margin-top: 0; }
}
@media (max-width: 640px){
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Footer */
.footer{ padding: 28px 0; border-top: 1px solid rgba(2,6,23,.06); color: var(--muted); }
.footer-grid{ display:flex; flex-direction:column; gap:.5rem; }
.footer-contact{ display:flex; gap: 1rem; flex-wrap:wrap; align-items:center; }
.footer a{ color: inherit; }

/* Responsive */
@media (max-width: 1024px){
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .cards{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; gap: 2rem; }
  .nav-links a{ margin-left: .9rem; }
  .nav-inner{ height: 62px; }
}