/* Omniflux — ported from Claude Design handoff (Omniflux.dc.html et al).
   Editorial institutional-tech: warm paper, violet accent, Swiss grid, hairlines. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #FAF9F6; color: #1A1815;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }

/* Keyboard focus */
:focus-visible { outline: 2px solid #6D28D9; outline-offset: 3px; border-radius: 3px; }
.site-footer :focus-visible { outline-color: #C4B5FD; }

/* Skip link (keyboard users) */
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 14px; font-weight: 600;
  color: #FAF9F6; background: #1A1815; padding: 10px 18px; border-radius: 8px;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* Layout */
.ofc { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.ofc.narrow { max-width: 1160px; }
.ofsec { padding: 116px 0; }

/* Grids */
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 60px; align-items: center; }
.servis-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.keup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #DDDAD2; border: 1px solid #DDDAD2; }
.three-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.harga-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.tentang-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.ab-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; }
.lg-grid { display: grid; grid-template-columns: 290px 1fr; gap: 64px; align-items: start; }
.lg-meta { position: sticky; top: 104px; }

/* Entrance */
@keyframes ofUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fu { animation: ofUp 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) { .fu { animation: none !important; } html { scroll-behavior: auto; } }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(250,249,246,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid #DDDAD2;
}
.ofh-bar { max-width: 1240px; margin: 0 auto; padding: 0 40px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ofh-desktop { display: flex; align-items: center; gap: 32px; }
.ofh-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid #DDDAD2; border-radius: 8px; cursor: pointer; color: #1A1815; }
.ofh-menu { display: none; border-top: 1px solid #DDDAD2; padding: 12px 20px 20px; flex-direction: column; gap: 4px; background: #FAF9F6; }
.ofh-menu.open { display: flex; }
@media (max-width: 880px) {
  .ofh-desktop { display: none; }
  .ofh-burger { display: inline-flex; }
  .ofh-bar { padding: 0 20px; }
}

/* Footer */
.site-footer { position: relative; overflow: hidden; background: #19152B; color: #FAF9F6; border-top: 1px solid #DDDAD2; }
.off-pad { position: relative; max-width: 1240px; margin: 0 auto; padding: 80px 40px 44px; }
.off-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.off-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 820px) {
  .off-grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
  .off-brand { grid-column: 1 / -1; }
  .off-pad { padding: 64px 20px 40px; }
}

/* Hover states (the design used a style-hover attr; these are the real CSS equivalents) */
.h-cta { transition: background .2s, transform .2s; }
.h-cta:hover { background: #5B21B6 !important; transform: translateY(-1px); }
.h-cta-lilac { transition: background .2s, transform .2s; }
.h-cta-lilac:hover { background: #D6CBFB !important; transform: translateY(-1px); }
.h-ghost { transition: background .2s, color .2s, transform .2s; }
.h-ghost:hover { background: #1A1815 !important; color: #FAF9F6 !important; }
.h-cta:active, .h-cta-lilac:active, .h-ghost:active { transform: translateY(1px) scale(0.99); }
.h-nav { transition: color .2s; }
.h-nav:hover { color: #6D28D9 !important; }
.h-flink { transition: color .2s; }
.h-flink:hover { color: #C4B5FD !important; }
.h-uline { transition: border-color .2s; }
.h-uline:hover { border-bottom-color: #1A1815 !important; }

/* Responsive */
@media (max-width: 900px) {
  .ofc { padding: 0 20px; }
  .ofsec { padding: 74px 0; }
  .hero-grid, .harga-grid, .tentang-grid, .ab-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-grid { gap: 44px; }
  .servis-3, .keup-grid, .three-grid, .price-grid { grid-template-columns: 1fr; }
  .lg-grid { grid-template-columns: 1fr; gap: 28px; }
  .lg-meta { position: static; }
  .servis-col { border-left: none !important; border-top: 1px solid #DDDAD2; padding: 32px 0 !important; }
  .servis-col:first-child { border-top: none; padding-top: 0 !important; }
}