/*! Archetype homepage shells — distinct DOM companions; colors from CSS vars only. */
.arch-shell { --arch-pad: clamp(1rem, 3vw, 2rem); }
.arch-shell a { color: inherit; }
.opd-illustration { margin: 0; width: 100%; }
.opd-illustration__svg { width: 100%; height: auto; display: block; }

/* induk */
.arch-induk { background: var(--color-surface, #f8f5f0); }
.arch-induk__batik-bg {
  background-image:
    linear-gradient(45deg, var(--color-accent,#FCA416) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-accent,#FCA416) 25%, transparent 25%);
  background-size: 18px 18px; opacity: .08; pointer-events: none;
}
.arch-induk__hero { min-height: 52vh; display:grid; place-items:end start; padding: var(--arch-pad); color:#fff;
  background: linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary))); position:relative; overflow:hidden; }
.arch-induk__grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; padding: var(--arch-pad); }
.arch-induk__portal { display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:.75rem; padding: var(--arch-pad); }
.arch-induk__portal a { border:1px solid color-mix(in srgb, var(--color-primary) 25%, #ddd); padding:.85rem; text-decoration:none; background:#fff; }

/* health — split */
.arch-health { background:#f8fafc; }
.arch-health__split { display:grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.arch-health__left { padding: clamp(1.5rem,4vw,3rem); display:flex; flex-direction:column; justify-content:center; gap:1rem; background:#fff; border-left: 8px solid var(--color-primary); }
.arch-health__clinical { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; padding: var(--arch-pad); }
.arch-health__clinical article { background:#fff; border-left:6px solid var(--color-primary); padding:1rem 1.1rem; box-shadow:0 8px 24px rgba(15,23,42,.06); }
.arch-health__pulse { position:absolute; inset:auto 0 0 0; height:80px; opacity:.25; pointer-events:none; }

/* tech — dark glass */
.arch-tech { background:#0b1220; color:#e2e8f0; }
.arch-tech__hero { padding: var(--arch-pad); min-height: 58vh; display:grid; grid-template-columns: 1.1fr .9fr; gap:1.5rem; align-items:center;
  background-image: linear-gradient(rgba(11,18,32,.7), rgba(11,18,32,.9)),
    repeating-linear-gradient(0deg, transparent, transparent 31px, color-mix(in srgb, var(--color-secondary) 30%, transparent) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, color-mix(in srgb, var(--color-secondary) 30%, transparent) 32px); }
.arch-tech__glass { backdrop-filter: blur(12px); background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:1rem; padding:1.1rem; }
.arch-tech__terminal { font-family: ui-monospace, Consolas, monospace; display:grid; gap:.65rem; padding: var(--arch-pad); }
.arch-tech__terminal article { border-left:3px solid var(--color-secondary); padding:.75rem 1rem; background: rgba(255,255,255,.05); }

/* nature — curved wave */
.arch-nature { background: #ecfeff; }
.arch-nature__hero { position:relative; padding: var(--arch-pad) var(--arch-pad) 5rem; color:#fff;
  background: linear-gradient(160deg, var(--color-primary), var(--color-secondary)); }
.arch-nature__hero svg.wave { position:absolute; left:0; right:0; bottom:-1px; width:100%; height:70px; display:block; }
.arch-nature__cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; padding: var(--arch-pad); margin-top:-2rem; }
.arch-nature__cards article { background:#fff; border-radius:1.75rem; padding:1.25rem; box-shadow:0 16px 40px rgba(8,47,73,.1); }

/* service — action first */
.arch-service { background:#f1f5f9; }
.arch-service__quick { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; padding: var(--arch-pad); }
.arch-service__quick a { display:grid; place-items:center; min-height:110px; background:var(--color-primary); color:#fff; text-decoration:none; font-weight:700; border-radius:.75rem; font-size:1.05rem; }
.arch-service__stats { display:flex; gap:1rem; padding: 0 var(--arch-pad) var(--arch-pad); flex-wrap:wrap; }
.arch-service__stats div { flex:1; min-width:140px; background:#fff; border:2px solid #0f172a; padding:1rem; }

/* education — masonry-ish */
.arch-edu { background:#fffbeb; }
.arch-edu__masonry { columns: 3 240px; column-gap:1rem; padding: var(--arch-pad); }
.arch-edu__masonry article { break-inside: avoid; margin-bottom:1rem; background:#fff; border-radius:1rem; padding:1rem; border-top: 6px solid var(--color-secondary); }
.arch-edu__hero { display:grid; grid-template-columns: .9fr 1.1fr; gap:1rem; padding: var(--arch-pad); align-items:center; }

/* infrastructure — bold structural */
.arch-infra { background:#f8fafc; }
.arch-infra__stats { display:grid; grid-template-columns: repeat(4,1fr); gap:0; border:2px solid #111; margin: var(--arch-pad); }
.arch-infra__stats div { border-right:2px solid #111; padding:1.25rem; background:#fff; }
.arch-infra__stats div:last-child { border-right:0; }
.arch-infra__grid { display:grid; grid-template-columns: 1fr 1fr; gap:0; border:2px solid #111; margin: 0 var(--arch-pad) var(--arch-pad); }
.arch-infra__grid > * { border:1px solid #111; padding:1.25rem; background:#fff; }

/* formal-batik */
.arch-formal { position:relative; background:#f8f5f0; overflow:hidden; }
.arch-formal__watermark { position:absolute; inset:0; opacity:.07; background-image:
  linear-gradient(45deg, var(--color-primary) 25%, transparent 25%),
  linear-gradient(-45deg, var(--color-primary) 25%, transparent 25%);
  background-size: 28px 28px; pointer-events:none; }
.arch-formal__frame { position:relative; margin: var(--arch-pad); border:1px solid color-mix(in srgb, var(--color-primary) 35%, #ccc); background:#fff; }
.arch-formal__frame header { background: var(--color-primary); color:#fff; padding:1rem 1.25rem; }
.arch-formal__cards { display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; padding:1.25rem; }
.arch-formal__cards article { border:1px solid #d6d3d1; padding:1rem; border-top:3px solid var(--color-accent); }

@media (max-width: 900px) {
  .arch-induk__grid, .arch-health__split, .arch-tech__hero, .arch-edu__hero, .arch-infra__grid, .arch-formal__cards { grid-template-columns: 1fr; }
  .arch-health__clinical, .arch-service__quick, .arch-infra__stats { grid-template-columns: 1fr 1fr; }
  .arch-edu__masonry { columns: 1; }
}