/* ===================================================================
   KredLedger — public landing page

   Design system ported from the BERANI corporate site
   (D:\GitHub\berani-co-id-web, src/styles/global.css + src/pages/index.astro).
   Tokens, type scale, eyebrow rule, pill buttons, card hover treatment,
   reveal animation, nav and footer chrome all follow that source so the
   two sites read as one house.

   Dark is the default; `html.light` is the light variant, matching BERANI.
   No build step, no framework, no dependencies.
   =================================================================== */

/* ---------- THEME TOKENS (from berani global.css) ---------- */
:root{
  --bg:#0B0B0E; --raised:#121216; --raised2:#17171C;
  --text:#C9CDD3; --dim:#8C9097; --ti:#C9CDD3;
  --gold:#E4A92C; --grad:linear-gradient(135deg,#ECB94E,#C28A1C);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.055);
  --shadow:0 30px 70px rgba(0,0,0,.5);
}
html.light{
  --bg:#FFFFFF; --raised:#FFFFFF; --raised2:#F2F3F5;
  --text:#17171B; --dim:#6B6F76; --ti:#2C2E33;
  --gold:#BE881A; --grad:linear-gradient(135deg,#D9A431,#B5821A);
  --line:rgba(0,0,0,.11); --line2:rgba(0,0,0,.06);
  --shadow:0 24px 55px rgba(17,19,26,.13);
}
/* Light theme keeps gold as an accent only — neutralise repeated gold
   labels so the palette stays calm, exactly as the BERANI site does. */
html.light .eyebrow{color:var(--dim)}
html.light .eyebrow::before{background:var(--dim);opacity:.5}
html.light .glabel{color:var(--dim)}
html.light .hero::after{display:none}

*{box-sizing:border-box;margin:0;padding:0}
img{object-fit:contain;max-width:100%}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:#0B0B0E;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;padding:10px 16px;border-radius:8px;text-decoration:none}
.skip-link:focus{left:12px}
#main-content{outline:none}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:92px}

body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;
  -webkit-font-smoothing:antialiased;transition:background .4s ease,color .4s ease;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
a{color:inherit}

.eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}

/* ---------- NAV ---------- */
body > nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand .mark{width:41px;height:35px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;color:var(--ti)}
.brand .mark svg{width:100%;height:100%}
/* Space Grotesk tops out at 700, so the wordmark is already as heavy as
   the typeface goes; the presence comes from size. */
.brand .wordmark{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.16em;
  font-size:23px;color:var(--ti);line-height:1}
.brand .wordmark b{color:var(--gold)}
.brand .operator{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-top:4px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:13.5px;color:var(--dim);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a.current{color:var(--gold)}

.controls{display:flex;align-items:center;gap:8px}
.ctrl{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden}
.ctrl button{background:transparent;border:0;color:var(--dim);font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.1em;padding:7px 12px;cursor:pointer;transition:.2s}
.ctrl button.active{background:var(--gold);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.28)}
.theme-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--ti);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.theme-btn:hover{border-color:var(--gold);color:var(--gold)}
.theme-btn svg{width:17px;height:17px}
html.light .moon{display:none} html.dark .sun{display:none}

.hamburger{display:none;background:transparent;border:0;cursor:pointer;padding:8px;color:var(--ti);flex-direction:column;gap:5px}
.hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:.3s}
.nav-links.open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;
  background:var(--bg);border-bottom:1px solid var(--line);padding:16px 28px;gap:16px;z-index:49}

/* ---------- BUTTONS ---------- */
.btn{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;text-decoration:none;
  padding:14px 26px;border-radius:100px;transition:.25s;display:inline-flex;align-items:center;gap:9px}
.btn-primary{background:var(--gold);color:#fff;font-weight:700;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--gold) 35%,transparent)}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- REVEAL ---------- */
.reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}
}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- HERO ---------- */
.hero{position:relative;padding:104px 0 96px;overflow:hidden}
.hero::after{content:"";position:absolute;top:-10%;right:-6%;width:60%;height:130%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%);
  pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .9fr;gap:54px;align-items:center}
.h-eyebrow{margin-bottom:24px}
h1{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.01em;
  font-size:clamp(38px,6.2vw,66px);line-height:1.03;color:var(--text)}
h1 .accent{color:var(--gold)}
.hero p.lede{margin-top:24px;color:var(--dim);font-size:clamp(15px,1.7vw,17.5px);max-width:56ch}
.hero-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-proof{margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;gap:30px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:11px;color:var(--dim)}
.hero-proof b{color:var(--ti);font-weight:400}

/* ---------- TRUST EQUATION PANEL ---------- */
.equation{border:1px solid var(--line);border-radius:18px;background:var(--raised);padding:30px;
  position:relative;overflow:hidden}
.equation::before{content:"";position:absolute;top:0;left:0;width:42px;height:42px;
  background:var(--grad);clip-path:polygon(0 0,100% 0,0 100%);opacity:.9}
.eq-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:14px 0 10px}
/* The closing note carries the same divider rhythm as the list above it:
   11px of air on each side of the rule, exactly like the gaps between
   items, so nothing sits lopsided. */
.eq-note{font-size:13px;color:var(--dim);border-top:1px solid var(--line2);
  margin-top:11px;padding-top:11px}

/* ---------- SECTION FRAME ---------- */
section.block{padding:88px 0;border-top:1px solid var(--line)}
.sec-head{margin-bottom:42px;max-width:62ch}
.sec-head h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(26px,3.4vw,36px);
  margin-top:16px;letter-spacing:-.01em;color:var(--text)}
.sec-head p{color:var(--dim);margin-top:14px;font-size:15.5px}

/* ---------- CARD GRIDS ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.card{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--raised);
  transition:.25s;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;top:0;left:0;width:0;height:3px;background:var(--grad);transition:width .35s}
.card:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));transform:translateY(-4px)}
.card:hover::after{width:100%}
.card h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;margin-bottom:8px;color:var(--text)}
.card p{font-size:13.5px;color:var(--dim);line-height:1.55}
.card .tag{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;display:block}

/* ---------- CHAIN ----------
   The stages are NOT equal. Each one carries more assurance than the last,
   so the colour strengthens along the chain: raw input starts muted, and
   only the final stage — trust — is filled gold. */
.chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--line);border-radius:16px;background:var(--raised);padding:28px;margin-top:22px}
.chain-node{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:100px;padding:8px 15px;background:var(--bg);
  color:var(--dim);transition:.25s}
.chain-node.s1{color:var(--dim)}
.chain-node.s2{color:color-mix(in srgb,var(--ti) 70%,var(--dim));
  border-color:color-mix(in srgb,var(--gold) 12%,var(--line))}
.chain-node.s3{color:var(--ti);border-color:color-mix(in srgb,var(--gold) 25%,var(--line))}
.chain-node.s4{color:var(--ti);border-color:color-mix(in srgb,var(--gold) 40%,var(--line));
  background:color-mix(in srgb,var(--gold) 5%,var(--bg))}
.chain-node.s5{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 60%,var(--line));
  background:color-mix(in srgb,var(--gold) 9%,var(--bg));font-weight:700}
.chain-node.terminal{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700;
  text-shadow:0 1px 1px rgba(0,0,0,.28);box-shadow:0 8px 20px color-mix(in srgb,var(--gold) 28%,transparent)}
.chain-arrow{font-size:14px;color:var(--line)}
.chain-arrow.a1{color:color-mix(in srgb,var(--gold) 20%,var(--dim))}
.chain-arrow.a2{color:color-mix(in srgb,var(--gold) 35%,var(--dim))}
.chain-arrow.a3{color:color-mix(in srgb,var(--gold) 55%,var(--dim))}
.chain-arrow.a4{color:color-mix(in srgb,var(--gold) 75%,var(--dim))}
.chain-arrow.a5{color:var(--gold)}
.chain-note{text-align:center;font-size:12.5px;color:var(--dim);margin-top:14px}

/* ---------- HOW IT WORKS (numbered steps) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--raised);
  transition:.25s;position:relative;overflow:hidden}
.step::after{content:"";position:absolute;top:0;left:0;width:0;height:3px;background:var(--grad);transition:width .35s}
.step:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));transform:translateY(-4px)}
.step:hover::after{width:100%}
.step .no{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));border-radius:100px;
  padding:4px 11px;display:inline-block;margin-bottom:16px}
.step h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:var(--text);margin-bottom:8px}
.step p{font-size:13.5px;color:var(--dim);line-height:1.55}
.step .who{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}

/* ---------- IS / IS NOT ---------- */
.contrast{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contrast h3{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:16px;margin-bottom:18px}
.contrast .is h3{color:var(--gold)}
.contrast .isnot h3{color:var(--dim)}
.clist{list-style:none;display:flex;flex-direction:column}
.clist li{display:flex;gap:12px;font-size:13.5px;color:var(--dim);
  padding:11px 0;border-bottom:1px solid var(--line2)}
.clist li:last-child{border-bottom:0;padding-bottom:0}
.clist .m{font-family:'Space Mono',monospace;font-size:12px;flex-shrink:0}
.equation .clist .m{color:var(--gold)}
.contrast .is .m{color:var(--gold)}
.contrast .isnot .m{color:var(--dim);opacity:.6}

/* ---------- AUDIENCE ---------- */
.aud{display:flex;flex-direction:column;height:100%}
.aud ul{list-style:none;margin:16px 0 22px;display:flex;flex-direction:column;gap:0}
.aud li{font-size:13px;color:var(--dim);padding:11px 0;border-bottom:1px solid var(--line2);display:flex;gap:11px}
.aud li:last-child{border-bottom:0}
.aud li .ar{color:var(--gold);flex-shrink:0}
.aud .spacer{flex:1}

/* ---------- DISCLOSURE (legally load-bearing) ---------- */
.disclosure{margin-top:26px;border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 16px 16px 0;background:var(--raised);padding:26px 30px}
.disclosure .glabel{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.disclosure .glabel::after{content:"";flex:1;height:1px;background:var(--line2)}
.disclosure p{font-size:13.5px;color:var(--dim);line-height:1.6}
.disclosure p+p{margin-top:12px}
.disclosure b{color:var(--ti);font-weight:600}

/* ---------- FOOTER (structure identical to berani.co.id) ---------- */
footer{border-top:1px solid var(--line);padding:54px 0 40px}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex-wrap:wrap}
.foot-brand .t{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.14em;color:var(--ti);font-size:24px;line-height:1.1}
.foot-brand .t b{color:var(--gold)}
.foot-tag{color:var(--dim);font-size:13px;line-height:1.35;margin-top:9px;max-width:34ch}
.foot-reg{margin-top:12px;font-family:'Space Mono',monospace;font-size:11px;color:var(--dim);
  line-height:1.7;max-width:100%}
.foot-reg a{color:var(--ti);text-decoration:none;border-bottom:1px solid var(--line);transition:.2s}
.foot-reg a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.foot-bottom{margin-top:34px;padding-top:22px;border-top:1px solid var(--line2);
  font-family:'Space Mono',monospace;font-size:11px;color:var(--dim)}
.foot-mid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.foot-mid .foot-link{font-family:inherit;font-size:inherit;color:inherit}
.foot-mid>.sep:not(:last-child)::after{content:"|";margin:0 18px;color:var(--line2)}
.foot-row{display:flex;align-items:center}
.foot-row .foot-link::after{content:"|";margin:0 18px;color:var(--line2)}
.foot-row .foot-link:last-child::after{display:none}
.foot-row::after{content:"|";margin:0 18px;color:var(--line2)}
.foot-link{font-size:13px;color:var(--dim);text-decoration:none;transition:color .2s}
.foot-link:hover{color:var(--gold)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.c-card{border:1px solid var(--line);border-radius:18px;padding:30px;background:var(--raised)}
.c-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line2)}
.c-row:last-child{border-bottom:0;padding-bottom:0}
.c-row:first-child{padding-top:0}
.c-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line);color:var(--gold)}
.c-ic svg{width:18px;height:18px}
.c-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.c-val{font-size:14.5px;color:var(--text);margin-top:3px;text-decoration:none;display:block;line-height:1.45}
a.c-val:hover{color:var(--gold)}

/* Contact details are assembled only on interaction, so scrapers reading the
   markup find nothing. Same approach as berani.co.id. */
.reveal-link{cursor:pointer;color:var(--gold);text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb,var(--gold) 55%,transparent)}
.reveal-link:hover{border-bottom-color:var(--gold)}
.reveal-link::before{content:"\1F512  ";font-size:11px;opacity:.7}
.reveal-link.shown::before{content:""}

/* ---------- MAP (as on berani.co.id) ---------- */
.c-map{border:1px solid var(--line);border-radius:18px;background:var(--raised);overflow:hidden;
  display:flex;flex-direction:column}
.c-map .mapface{flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(color-mix(in srgb,var(--gold) 5%,transparent),transparent),
    repeating-linear-gradient(0deg,var(--line2),var(--line2) 1px,transparent 1px,transparent 30px),
    repeating-linear-gradient(90deg,var(--line2),var(--line2) 1px,transparent 1px,transparent 30px);
  position:relative}
.c-map .pin{width:46px;height:46px;background:var(--grad);border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.c-map .pin::after{content:"";width:14px;height:14px;background:var(--bg);border-radius:50%;transform:rotate(45deg)}
.c-map .maplink{padding:18px 24px;border-top:1px solid var(--line);font-family:'Space Mono',monospace;
  font-size:12px;color:var(--gold);text-decoration:none;display:flex;justify-content:space-between;align-items:center}
.c-map .maplink:hover{background:var(--raised2)}

/* ---------- CONTACT FORM (ported from berani.co.id) ---------- */
.contact-form{margin-bottom:0}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field{margin-bottom:16px;display:flex;flex-direction:column}
.cf-field label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.cf-field input,.cf-field textarea,.cf-field select{background:var(--bg);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-family:'Inter',sans-serif;font-size:14.5px;padding:12px 14px;
  width:100%;transition:border-color .2s;resize:vertical}
.cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus{outline:none;border-color:var(--gold)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:4px 0 16px}
.cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf-actions .btn{border:0;cursor:pointer}
.cf-actions .btn:disabled{opacity:.6;cursor:default}
.cf-status{font-size:13px}
.cf-status.ok{color:var(--gold)}
.cf-status.err{color:#E0463C}
.cf-note{font-size:12px;color:var(--dim);margin-top:14px}

/* ---------- LEGAL PAGES ---------- */
.page-hd{padding:72px 0 48px;border-bottom:1px solid var(--line)}
.page-hd h1{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(28px,4vw,40px);
  letter-spacing:-.01em;margin-top:16px}
.page-hd p{color:var(--dim);margin-top:12px;font-size:14.5px;max-width:70ch}
section.legal{padding:88px 0;border-bottom:1px solid var(--line)}
section.legal:last-of-type{border-bottom:0}
.legal h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(20px,2.8vw,28px);
  margin-bottom:24px;letter-spacing:-.01em}
.legal h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;margin:28px 0 10px;color:var(--gold)}
.legal p{color:var(--dim);font-size:14.5px;margin-bottom:14px;max-width:78ch}
.legal ul{padding-left:24px;margin-bottom:14px}
.legal ul li{color:var(--dim);font-size:14.5px;margin-bottom:6px;max-width:76ch}
.legal .upd{font-family:'Space Mono',monospace;font-size:11px;color:var(--dim);margin-top:32px;
  padding-top:16px;border-top:1px solid var(--line2)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
}
@media(max-width:860px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .contrast,.grid-2,.contact-grid{grid-template-columns:1fr}
  .hero{padding:72px 0 68px}
  section.block,section.legal{padding:64px 0}
  .foot-row::after,.foot-mid>.sep:not(:last-child)::after{display:none}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .nav-in{height:64px}
  .brand .mark{width:35px;height:30px}
  .brand .wordmark{font-size:19px}
  .foot-brand .t{font-size:21px}
  .nav-links.open{top:64px}
  section[id]{scroll-margin-top:78px}
  .steps{grid-template-columns:1fr}
  .card,.step,.equation,.c-card{padding:22px}
  .cf-row{grid-template-columns:1fr;gap:0}

  .page-hd{padding:56px 0 40px}
  .legal ul{padding-left:20px}
}
@media(max-width:400px){
  .wrap{padding:0 14px}
  .brand .mark{width:30px;height:25px}
  .brand .wordmark{font-size:17px}
  .foot-brand .t{font-size:19px}
  .ctrl button{padding:7px 9px}
}