/* ============================================================
   FABRHANA — Home page section styles
   ============================================================ */

/* ---- Mission ---- */
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 56px; }
.mission-cta {
  margin-top: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.mission-cta span {
  font-weight: 900; font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -0.03em; line-height: 1.15;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mission-cta span:nth-child(2) { opacity: .82; }
.mission-cta span:nth-child(3) { opacity: .64; }

/* ---- Services preview (dark) ---- */
#services { overflow: hidden; }
.services-bg {
  position: absolute; inset: 0; z-index: 1; opacity: .5;
  background-image: radial-gradient(circle at 18% 12%, rgba(10,163,83,0.22), transparent 38%),
                    radial-gradient(circle at 92% 84%, rgba(0,100,58,0.30), transparent 44%);
}
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.svc-tile {
  position: relative; display: block; text-decoration: none; color: #fff; padding: 30px 26px 56px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04); overflow: hidden;
  transition: transform .5s var(--ease-out), background .35s, border-color .35s;
}
.svc-tile::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--green-bright);
  transition: width .45s var(--ease-out);
}
.svc-tile:hover { transform: translateY(-7px); background: rgba(255,255,255,0.08); border-color: rgba(10,163,83,0.5); }
.svc-tile:hover::before { width: 100%; }
.svc-num { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--green-bright); font-variant-numeric: tabular-nums; }
.svc-tile h3 { font-size: 20px; margin-top: 14px; letter-spacing: -0.01em; }
.svc-tile p { font-size: 14px; color: var(--fg-on-dark-muted); margin-top: 12px; line-height: 1.55; }
.svc-arrow { position: absolute; right: 24px; bottom: 22px; width: 20px; height: 20px; opacity: .5; transition: transform .4s var(--ease-out), opacity .3s; }
.svc-arrow::before, .svc-arrow::after { content: ""; position: absolute; background: var(--green-bright); }
.svc-arrow::before { right: 0; top: 9px; width: 16px; height: 2px; }
.svc-arrow::after { right: 0; top: 3px; width: 11px; height: 11px; border-top: 2px solid var(--green-bright); border-right: 2px solid var(--green-bright); transform: rotate(45deg); transform-origin: top right; background: none; }
.svc-tile:hover .svc-arrow { transform: translate(4px,-4px); opacity: 1; }

/* ---- Partnership ---- */
.partner-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: center; }
.partner-mark { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; max-width: 360px; margin: 0 auto; }
.partner-mark img { width: 52%; position: relative; z-index: 3; animation: floatY 8s ease-in-out infinite; filter: drop-shadow(0 24px 40px rgba(5,131,66,0.25)); }
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
.pulse-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(5,131,66,0.30); animation: pulseR 4s ease-out infinite; }
.pulse-ring.r2 { animation-delay: 2s; }
@keyframes pulseR { 0%{transform:scale(0.6);opacity:.9;} 100%{transform:scale(1.15);opacity:0;} }
.partner-pull {
  margin-top: 28px; font-weight: 800; font-size: clamp(20px,2vw,26px); line-height: 1.3; letter-spacing: -0.02em;
  color: var(--green-2); border-left: 4px solid var(--green-1); padding-left: 22px;
}

/* ---- Principal card ---- */
.principal-card {
  display: grid; grid-template-columns: 280px 1fr; gap: 0; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden;
}
.principal-mono {
  background: var(--grad-ink); color: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 92px; letter-spacing: -0.04em; position: relative; overflow: hidden;
}
.principal-mono::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(10,163,83,0.4), transparent 60%);
}
.principal-body { padding: 48px 50px; }

/* ---- CTA band ---- */
.cta-band { position: relative; background: var(--grad-ink); color: #fff; padding: clamp(90px,12vw,150px) 0; overflow: hidden; }
.cta-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 1; }
.cta-skyline svg { position: absolute; bottom: 0; width: 100%; height: 100%; }

@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-wrap { grid-template-columns: 1fr; gap: 40px; }
  .partner-mark { max-width: 220px; }
}
@media (max-width: 720px) {
  .mission-grid { grid-template-columns: 1fr; gap: 28px; }
  .svc-grid { grid-template-columns: 1fr; }
  .principal-card { grid-template-columns: 1fr; }
  .principal-mono { padding: 40px; font-size: 70px; }
  .principal-body { padding: 34px 28px; }
}