/* ===== ROOT & GLOBAL (SAMA DENGAN ABOUT) ===== */
:root {
  --primary-blue: #0350A2;
  --secondary-navy: #213448;

  --text-cream: #ECEFCA;
  --text-white: #FFFFFF;

  --soft-glow: rgba(236, 239, 202, 0.16);
  --soft-border: rgba(236, 239, 202, 0.35);

  --max-width: 1200px;
}

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

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, var(--primary-blue) 0, var(--secondary-navy) 55%);
  color: var(--text-cream);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

section { padding: 4rem 0; }

/* ===== BUTTONS (SAMA) ===== */

.btn { /* sama seperti about.css */ 
  display:inline-block;padding:0.75rem 1.75rem;border-radius:999px;
  font-weight:600;font-size:0.95rem;border:none;cursor:pointer;
  text-align:center;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease,
             background-color .15s ease,color .15s ease;
}
.btn::after{
  content:"";position:absolute;top:var(--y);left:var(--x);width:0;height:0;
  background:radial-gradient(circle,rgba(255,255,255,.45),transparent 60%);
  transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease;
}
.btn:hover::after{width:200px;height:200px;}
.btn-primary{
  background-color:var(--text-cream);color:var(--primary-blue);
  box-shadow:0 8px 18px rgba(0,0,0,.38);
}
.btn-primary:hover{
  transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.5);
}
.btn-outline{
  background:transparent;color:var(--text-cream);border:1px solid var(--soft-border);
}
.btn-outline:hover{background:var(--text-cream);color:var(--primary-blue);}

/* ===== FOOTER ===== */

footer{
  background:#020617;color:var(--text-cream);
  padding:1.25rem 0;font-size:.8rem;
}
.footer-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap;}
.footer-links a{opacity:.9;}

/* ===== SECTION TITLES ===== */

.section-label{
  display:inline-block;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:.35rem;color:var(--text-cream);opacity:.9;
}
.section-heading{font-size:1.7rem;margin-bottom:.75rem;color:var(--text-white);}
.section-subtitle{
  max-width:680px;font-size:.95rem;color:var(--text-cream);
  opacity:.9;margin-bottom:1.5rem;
}

/* ===== PAGE HERO (SERVICES) ===== */

.page-hero {
  background:
    radial-gradient(circle at top left, rgba(148, 180, 193, 0.5) 0, transparent 55%),
    linear-gradient(135deg, var(--primary-blue), var(--secondary-navy));
  color: var(--text-cream);
  padding: 3.5rem 0 3.5rem;
}

.page-hero h1 {
  font-size: clamp(2rem, 3vw, 2.4rem);
  color: var(--text-white);
  margin-bottom: 0.75rem;
}

.page-hero p {
  max-width: 40rem;
  color: var(--text-cream);
  opacity: 0.9;
}

/* ===== SERVICES GRID ===== */

.services {
  background: linear-gradient(180deg, rgba(3,80,162,0.15), rgba(33,52,72,0.95));
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.service-card {
  background: radial-gradient(circle at top left, rgba(236,239,202,0.18), rgba(15,23,42,0.98));
  border-radius: 18px;
  padding: 1.4rem 1.4rem 1.6rem;
  border: 1px solid var(--soft-border);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  border-color: rgba(236,239,202,0.9);
}

.service-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.7rem;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-navy));
  color: var(--text-cream);
}

.service-card h3 {
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
  color: var(--text-white);
}

.service-card p {
  font-size: 0.9rem;
  color: var(--text-cream);
  opacity: 0.95;
}

/* ===== CTA STRIP ===== */

.cta-strip {
  background: linear-gradient(135deg, var(--secondary-navy), #020617);
  color: var(--text-cream);
  padding: 2.5rem 0;
}

.cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cta-strip h2 { margin-bottom: 0.35rem; color: var(--text-white); }
.cta-strip p  { font-size: 0.95rem; opacity: 0.95; }

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .nav-menu {
    display:none;position:absolute;right:1.25rem;top:60px;
    flex-direction:column;gap:.75rem;padding:.85rem 1rem;
    border-radius:12px;background-color:rgba(3,80,162,.98);
    box-shadow:0 16px 30px rgba(0,0,0,.5);
  }
  .nav-menu.open{display:flex;}
  .nav-cta-btn{display:none;}
  .nav-toggle{display:flex;}

  .cta-strip-inner{
    flex-direction:column;align-items:flex-start;
  }
}

@media (max-width: 600px) {
  section{padding:3rem 0;}
}