/* ============================================================
   NARAYA UMKM — "KINETIC TYPE" RE-SKIN  (Fase 1: marketing)
   Stark mono + 1 aksen emas. Big display type. Motion moderat.
   Loaded LAST (before </head>) so the token remap wins over inline/linked CSS.
   Structure/markup unchanged — this is a pure visual override layer.
   ============================================================ */

/* ---------- 1. TOKEN REMAP (flips the whole token-based site) ---------- */
:root{
  --paper:#FAFAF7;
  --paper-soft:#FFFFFF;
  --paper-deep:#F1F0EB;
  --paper-edge:#E3E2DC;

  --ink:#0A0A0A;
  --ink-mid:#161616;
  --ink-deep:#050505;
  --ink-soft:#242424;

  --gold:#D9A23C;
  --gold-deep:#B07F2A;
  --gold-soft:#E8C886;

  /* fold the old teal/terra accents into the single gold accent */
  --viridian:#D9A23C;
  --viridian-bright:#E8C886;
  --viridian-deep:#0A0A0A;
  --terra:#D9A23C;
  --terra-soft:#E8C886;
  --terra-deep:#B07F2A;

  --on-ink:#FAFAF7;
  --on-ink-muted:#9C9C97;
  --on-paper:#0A0A0A;
  --on-paper-muted:#6B6B66;

  --rule:rgba(10,10,10,.12);
  --rule-strong:rgba(10,10,10,.30);
  --rule-on-ink:rgba(250,250,247,.14);
  --rule-on-ink-strong:rgba(250,250,247,.30);

  --gilt:linear-gradient(135deg,#E8C886 0%,#D9A23C 55%,#B07F2A 100%);

  /* distinctive display face for the kinetic headlines, Manrope for body/UI */
  --display:"Bricolage Grotesque","Manrope",sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --mono:"Manrope",sans-serif;

  --r-sm:4px;--r:8px;--r-lg:14px;
}

/* ---------- 2. KINETIC DISPLAY TYPE ---------- */
h1.hero-title,.hero-title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(3rem,8.6vw,7.6rem);
  line-height:.9;
  letter-spacing:-.045em;
  text-wrap:balance;
}
h1.hero-title em,.hero-title em{font-style:italic;font-weight:800}

/* section folio / big section heads scale up + tighten */
.sec-folio-head,.faq-cta h3,.faq-hl h2,.b2b-cta h2,.final-cta h2{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.96;
}
.sec-folio-head{font-size:clamp(2.1rem,5vw,3.6rem)}

/* eyebrows / kickers become hard mono labels */
.eyebrow,.hero-trust,.hero-trustbar__label,.tool-tag{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.2em;
}

/* the giant ghost folio number in the hero → mono, near-invisible */
.hero-folio{color:rgba(10,10,10,.04)!important}
.band-ink .hero-folio{color:rgba(250,250,247,.05)!important}

/* ---------- 3. NEUTRALISE LEFTOVER TEAL/TERRA ACCENTS ---------- */
section.band-ink::before{
  background:
    radial-gradient(620px 320px at 90% 10%,rgba(217,162,60,.08),transparent 70%),
    radial-gradient(520px 380px at 8% 90%,rgba(217,162,60,.05),transparent 72%)!important;
}
.hero-chip{
  background:rgba(217,162,60,.10)!important;
  border-color:rgba(217,162,60,.32)!important;
  color:var(--on-ink)!important;
}
.hero-chip .dot,.hero-trust .dot{
  background:var(--gold)!important;
  box-shadow:0 0 10px rgba(217,162,60,.7)!important;
}
.hero-trust b{color:var(--gold-soft)!important}

/* ---------- 4. STARK CARD / SURFACE TREATMENT ---------- */
.tool,.faq-item,.faq-feat,.faq-hl,.price-card,.how-step{
  border-radius:var(--r-lg)!important;
}
/* tighten the warm rounded softness into crisp editorial corners */

/* ---------- 5. CHROME RE-SKIN (navbar + footer → mono) ---------- */
.nv{
  --nv-bg:rgba(10,10,10,.72);
  --nv-bg-solid:rgba(10,10,10,.94);
  --nv-text:#CFCFC9;
  --nv-strong:#FAFAF7;
  --nv-muted:#8E8E89;
  --nv-line:rgba(250,250,247,.12);
  --nv-line-2:rgba(250,250,247,.22);
  --nv-panel:#0d0d0d;
  --nv-panel-2:rgba(255,255,255,.04);
  --nv-gold:#D9A23C;
  --nv-gilt:linear-gradient(120deg,#E8C886 0%,#D9A23C 55%,#B07F2A 100%);
  --nv-glow:rgba(217,162,60,.18);
  --nv-on-gold:#140d02;
  --nv-drawer-bg:#0A0A0A;
}
[data-theme="light"] .nv{
  --nv-bg:rgba(250,250,247,.82);
  --nv-bg-solid:rgba(250,250,247,.96);
  --nv-text:#2a2a2a;
  --nv-strong:#0A0A0A;
  --nv-muted:#6B6B66;
  --nv-line:#E3E2DC;
  --nv-line-2:#D2D1CB;
  --nv-panel:#FFFFFF;
  --nv-panel-2:rgba(10,10,10,.03);
  --nv-drawer-bg:#FFFFFF;
}
.nf,.nf-cta{
  --nf-bg:#0A0A0A;
  --nf-bg-2:#0f0f0f;
  --nf-card:rgba(255,255,255,.03);
  --nf-card-brd:rgba(250,250,247,.10);
  --nf-text:#CFCFC9;
  --nf-strong:#FAFAF7;
  --nf-muted:#9C9C97;
  --nf-faint:#6E6E69;
  --nf-label:#E8C886;
  --nf-line:rgba(250,250,247,.10);
  --nf-line-2:rgba(250,250,247,.20);
  --nf-gold:#D9A23C;
  --nf-gilt:linear-gradient(120deg,#E8C886 0%,#D9A23C 55%,#B07F2A 100%);
  --nf-teal:#E8C886;
  --nf-glow:rgba(217,162,60,.18);
  --nf-on-gold:#140d02;
}
[data-theme="light"] .nf,[data-theme="light"] .nf-cta{
  --nf-bg:#FFFFFF;
  --nf-bg-2:#FAFAF7;
  --nf-card:rgba(10,10,10,.02);
  --nf-card-brd:#E3E2DC;
  --nf-text:#2a2a2a;
  --nf-strong:#0A0A0A;
  --nf-muted:#5f5f5a;
  --nf-faint:#9a9a95;
  --nf-label:#B07F2A;
  --nf-line:#E9E8E2;
  --nf-line-2:#D8D7D1;
}

/* ---------- 6. MOTION (moderate, JS-gated, reduced-motion safe) ---------- */
html.k-ready .k-reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease,transform .65s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
html.k-ready .k-reveal.k-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.k-ready .k-reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* a single kinetic flourish: the hero headline wipes up on load */
@media (prefers-reduced-motion:no-preference){
  html.k-ready .hero-title{
    animation:kHeadline 1s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes kHeadline{
    from{opacity:0;transform:translateY(28px);letter-spacing:-.02em}
    to{opacity:1;transform:none}
  }
}

/* marquee strip used by the hero trustbar (if present) stays subtle */
html.k-ready .hero-trustbar__items{will-change:transform}