/* ============================================================
   Base — reset, tipografi, utilities, background FX
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

h1,h2,h3,h4,h5 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-hot); border-radius: 6px; }

/* Layout helpers */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--s-8) 0; position: relative; }
.section-sm { padding: var(--s-7) 0; }
.row { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.grid { display: grid; gap: var(--s-4); }
.g2 { grid-template-columns: repeat(2,1fr); }
.g3 { grid-template-columns: repeat(3,1fr); }
.g4 { grid-template-columns: repeat(4,1fr); }
.center { text-align: center; }
.mt-1{margin-top:var(--s-2)} .mt-2{margin-top:var(--s-4)} .mt-3{margin-top:var(--s-6)}
.mb-1{margin-bottom:var(--s-2)} .mb-2{margin-bottom:var(--s-4)} .mb-3{margin-bottom:var(--s-6)}
.muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-gold { color: var(--gold); }
.flex { display:flex; } .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-1{gap:var(--s-2)} .gap-2{gap:var(--s-4)} .wrap{flex-wrap:wrap}
.hidden { display: none !important; }
.full { width: 100%; }

/* Eyebrow / tag */
.tag {
  font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.tag::before { content:''; display:block; width:24px; height:2px; background: var(--accent); }

/* Section heading + divider */
.section-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 6px; }
.section-title .a { color: var(--accent); }
.section-title .g { color: var(--gold); }
.section-sub { color: var(--muted); max-width: 64ch; margin-bottom: 8px; }
.hr { width: 50px; height: 3px; border-radius: 2px; background: var(--grad-hot); margin: 14px 0 28px; }
.hr.center { margin-left:auto; margin-right:auto; }

/* Background FX */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(249,115,22,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,.025) 1px, transparent 1px);
  background-size: 44px 44px;
}
.bg-glow {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(8px);
}
.bg-glow.o { background: radial-gradient(circle, rgba(249,115,22,.10) 0%, transparent 65%); }
.bg-glow.g { background: radial-gradient(circle, rgba(34,197,94,.07) 0%, transparent 65%); }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Responsive grids */
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .section { padding: var(--s-7) 0; }
  .container { padding: 0 18px; }
}