/* ============================================================
   global.css — LAYOUT, TYPOGRAPHY, BUTTONS
   Shared utility classes used across all sections.
   ============================================================ */

/* ── Layout ── */
/* FIX NON-SCALING LAYOUT */

.wrap {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(12px, 4vw, 28px);
    box-sizing: border-box;
}

.wrap-sm {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 clamp(12px, 4vw, 28px);
    box-sizing: border-box;
}.text-c   { text-align: center; }

/* ── Section spacing ── */
.sec    { padding: 96px 0; }
.sec-sm { padding: 72px 0; }

/* ── Scroll reveal ── */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rv.in         { opacity: 1; transform: none; }
.rv.d1         { transition-delay: 0.08s; }
.rv.d2         { transition-delay: 0.16s; }
.rv.d3         { transition-delay: 0.24s; }
.rv.d4         { transition-delay: 0.32s; }

/* ── Kicker labels ── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-bdr);
  padding: 5px 14px;
  border-radius: 100px;
}
.kicker .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

.kicker.on-dark {
  color: #a5b4fc;
  background: rgba(165, 180, 252, 0.1);
  border-color: rgba(165, 180, 252, 0.2);
}
.kicker.green {
  color: var(--emerald);
  background: var(--emerald-bg);
  border-color: var(--emerald-bdr);
}

/* ── Typography ── */
.display {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.display .hi { color: var(--accent); }

.h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.h2 .hi { color: var(--accent); }

.h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.body-lg { font-size: 18px; color: var(--muted); line-height: 1.75; }
.body-md { font-size: 16px; color: var(--muted); line-height: 1.7; }
.body-sm { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 100px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

/* Primary */
.btn-p { background: var(--accent); color: #fff; box-shadow: 0 2px 16px rgba(79,70,229,0.35); }
.btn-p:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(79,70,229,0.4); }

/* Ghost */
.btn-g { background: var(--surface); color: var(--ink); border: 1.5px solid var(--border); box-shadow: var(--sh-sm); }
.btn-g:hover { border-color: var(--accent); color: var(--accent); }

/* Dark */
.btn-dk { background: var(--ink); color: #fff; }
.btn-dk:hover { background: #1f2937; transform: translateY(-1px); }

/* White (on dark backgrounds) */
.btn-wh { background: #fff; color: var(--ink); }
.btn-wh:hover { background: #f5f5ff; }

/* Outline white (on dark backgrounds) */
.btn-ow { background: transparent; color: rgba(255,255,255,0.75); border: 1.5px solid rgba(255,255,255,0.22); }
.btn-ow:hover { border-color: rgba(255,255,255,0.55); color: #fff; }

/* Size modifier */
.btn-lg { font-size: 16px; padding: 15px 32px; }
.btn-sm { font-size: 13px; padding: 10px 20px; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .wrap, .wrap-sm {
        padding: 0 16px;
    }
}





/* to control heavy animation  */

.orbit-ring,
.web-line,
.explode-node{
  will-change: transform;
}