/* ── gf-landing.css — the public landing (GF6). Tokens from gf.css. ──
   The page is complete without JS: the hero arrives on CSS keyframes, below-the-fold
   reveals hide only under html.js and only while off-screen. Movement is transform/opacity. */

/* ── nav over the stage ── */
.lp-nav{position:fixed;inset-inline:0;top:0}
.lp-nav .gf-top-in{min-height:64px;flex-wrap:nowrap;gap:8px 12px}
.lp-nav.on-dark{background:transparent;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.lp-nav.on-dark.scrolled{background:var(--stage-glass);border-bottom-color:var(--stage-border);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.lp-nav.on-dark .gf-brand,.lp-nav.on-dark .gf-by b{color:var(--white)}
.lp-nav.on-dark .gf-by{color:var(--stage-text2)}
.lp-nav.on-dark .gf-langs{background:var(--stage-card);border-color:var(--stage-border2)}
.lp-nav.on-dark .gf-langs button{color:var(--stage-text2)}
.lp-nav.on-dark .gf-langs button[aria-pressed="true"]{background:var(--white);color:var(--navy)}
.lp-links{display:none}
.lp-signin{font-size:13px;font-weight:600;color:var(--text2);text-decoration:none;white-space:nowrap;transition:color var(--t-ui) var(--ease-out)}
.lp-nav.on-dark .lp-signin{color:var(--stage-text2)}
.lp-signin:hover,.lp-nav.on-dark .lp-signin:hover{color:var(--accent-bright)}
.lp-cta{min-height:40px}
@media (max-width:1499px){.lp-nav .gf-by{display:none}}
@media (max-width:1180px){.lp-signin{display:none}}
@media (max-width:560px){.lp-cta{display:none}}
@media (max-width:400px){.lp-nav .gf-langs button{padding:0 7px;font-size:11.5px}}
@media (min-width:1100px){
  .lp-links{display:flex;gap:22px}
  .lp-links a{position:relative;overflow:hidden;padding-bottom:6px;margin-bottom:-6px;font-size:13.5px;white-space:nowrap;font-weight:600;color:var(--text2);text-decoration:none;transition:color var(--t-ui) var(--ease-out)}
  .lp-links a::after{content:"";position:absolute;inset-inline:0;bottom:1px;height:1.5px;background:var(--accent-bright);transform:translateX(-101%);transition:transform var(--t-panel) var(--ease-out)}
  .lp-links a:hover::after{transform:none}
  .lp-nav.on-dark .lp-links a{color:var(--stage-text2)}
  .lp-links a:hover,.lp-nav.on-dark .lp-links a:hover{color:var(--white)}
  .lp-links a:hover{color:var(--text)}
}

/* ── stage sections ── */
.stage{background:var(--stage-bg);color:var(--stage-text)}
.stage .gf-eyebrow{color:var(--stage-accent)}
.stage .gf-eyebrow::before{background:var(--stage-accent)}
.stage .gf-lead{color:var(--stage-text2)}
.stage .gf-quiet{color:var(--stage-muted)}

/* ── hero ── */
.lp-hero{position:relative;overflow:clip;padding:calc(64px + clamp(40px,8vw,96px)) 0 clamp(48px,7vw,88px);background:radial-gradient(120% 90% at 85% 10%,var(--stage-bg2),var(--stage-bg) 55%,var(--stage-deep))}
.lp-aura{position:absolute;inset:0;pointer-events:none}
.lp-aura i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9;animation:lp-drift var(--t-drift) var(--ease-in-out) infinite alternate}
.lp-aura .a1{width:52vw;height:52vw;max-width:720px;max-height:720px;inset-inline-end:-10vw;top:-18vw;background:radial-gradient(circle,var(--stage-aura),transparent 60%)}
.lp-aura .a2{width:38vw;height:38vw;max-width:520px;max-height:520px;inset-inline-start:-12vw;bottom:-16vw;background:radial-gradient(circle,var(--stage-aura-2),transparent 60%);animation-delay:-9s}
@keyframes lp-drift{to{transform:translate3d(4vw,3vw,0) scale(1.08)}}
.lp-songket{position:absolute;inset:0;width:100%;height:100%;color:var(--stage-grid);pointer-events:none;mask-image:linear-gradient(180deg,var(--mask-ink),transparent 70%);-webkit-mask-image:linear-gradient(180deg,var(--mask-ink),transparent 70%)}
.lp-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.lp-h1{font-size:clamp(2.1rem,1.3rem + 4.2vw,4rem);line-height:1.02;letter-spacing:-.03em;color:var(--white);margin:18px 0 0}
.lp-h1 em{font-style:normal;color:var(--stage-gold)}
.lp-lead{margin:20px 0 0;max-width:36em;font-size:clamp(1.0625rem,1rem + .4vw,1.2rem);line-height:1.6;color:var(--stage-text2)}
.lp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.lp-proof{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--stage-text2)}
.lp-proof li{display:inline-flex;align-items:center;gap:8px}
.lp-proof .dot{width:6px;height:6px;border-radius:50%;background:var(--stage-gold);flex:none}
/* arrival: the lines rise in order (CSS only, so the hero reads without JS) */
.lp-line{animation:lp-rise var(--t-hero) var(--ease-rise) both}
.lp-h1 .lp-line{display:block}
.lp-h1 .lp-line:nth-child(2){animation-delay:var(--t-rise-step)}
.lp-lead.lp-line{animation-delay:calc(2.2*var(--t-rise-step))}
.lp-ctas.lp-line{animation-delay:calc(3.2*var(--t-rise-step))}
.lp-proof.lp-line{animation-delay:calc(4.2*var(--t-rise-step))}
@keyframes lp-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* decode: the eyebrow's glyphs settle (JS); without JS it simply shows */
.lp-decode{min-height:1.5em}

/* the stage art: the bunga behind, the matcher card in front */
.lp-stage-art{position:relative;min-height:420px;display:grid;place-items:end center;padding-top:120px}
.lp-bunga{position:absolute;width:min(70vw,460px);height:auto;inset-inline-start:50%;top:-4%;translate:-62% 0;opacity:.95;filter:drop-shadow(0 30px 60px var(--art-shadow));animation:lp-turn var(--t-turn) linear infinite}
@keyframes lp-turn{to{transform:rotate(360deg)}}
.lp-bunga .bunga-petals path{transform-origin:50% 50%;transform-box:view-box;animation:lp-bloom var(--t-bloom) var(--ease-expo) both}
.lp-bunga .bunga-petals>:nth-child(2) path{animation-delay:calc(1*var(--t-bloom-step))}.lp-bunga .bunga-petals>:nth-child(3) path{animation-delay:calc(2*var(--t-bloom-step))}.lp-bunga .bunga-petals>:nth-child(4) path{animation-delay:calc(3*var(--t-bloom-step))}.lp-bunga .bunga-petals>:nth-child(5) path{animation-delay:calc(4*var(--t-bloom-step))}
@keyframes lp-bloom{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.lp-bunga .bunga-veins,.lp-bunga .bunga-pollen,.lp-bunga .bunga-stamen{animation:lp-fade var(--t-art-fade) var(--ease-out) var(--t-art-wait) both}
@keyframes lp-fade{from{opacity:0}to{opacity:1}}
.lp-matcher{position:relative;width:min(100%,400px);background:var(--matcher-bg);color:var(--text);border-radius:var(--r-xl);padding:18px 18px 14px;box-shadow:var(--shadow-lg),0 0 0 1px var(--matcher-line);animation:lp-rise var(--t-hero) var(--ease-rise) var(--t-matcher-wait) both}
.lp-m-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lp-m-live{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.lp-m-live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:lp-pulse var(--t-pulse) var(--ease-in-out) infinite}
@keyframes lp-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.lp-m-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lp-m-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:var(--r-full);border:1px solid var(--border2);font-size:12.5px;font-weight:600;color:var(--text2);transition:background-color var(--t-panel) var(--ease-out),color var(--t-panel) var(--ease-out),border-color var(--t-panel) var(--ease-out),transform var(--t-panel) var(--ease-out)}
.lp-m-chip.on{background:var(--navy);border-color:var(--navy);color:var(--white)}
.lp-m-count{display:flex;align-items:baseline;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.lp-m-count b{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums;min-width:1.2em}
.lp-m-count span{font-size:13px;color:var(--text2)}
.lp-m-rows{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lp-m-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);background:var(--bg);font-size:13px;opacity:0;transform:translateY(8px);transition:opacity var(--t-reveal) var(--ease-rise),transform var(--t-reveal) var(--ease-rise)}
.lp-m-rows li.in{opacity:1;transform:none}
html:not(.js) .lp-m-rows li{opacity:1;transform:none}
.lp-m-fit{font:700 12px/1 var(--font-mono);padding:5px 7px;border-radius:var(--r-xs);background:var(--green-wash);color:var(--green)}
.lp-m-fit.mid{background:var(--bg2);color:var(--text2)}
.lp-m-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-m-dl{font-size:12px;color:var(--muted);white-space:nowrap}
.lp-m-dl.soon{color:var(--amber);font-weight:600}
.lp-m-foot{margin:12px 0 0;font-size:11.5px;color:var(--muted)}
@media (min-width:900px){
  .lp-hero{padding-top:calc(66px + clamp(56px,9vw,120px))}
  .lp-hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}
  .lp-stage-art{min-height:560px;justify-items:end;padding-top:150px}
  .lp-bunga{width:min(40vw,520px);inset-inline-start:-6%;top:-10%;translate:none}
  .lp-matcher{margin-inline-end:2%}
}

/* ── numbers band ── */
.lp-band{background:var(--card);border-bottom:1px solid var(--border)}
.lp-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;padding-block:28px}
.lp-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-stat b{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.lp-stat span{font-size:13px;color:var(--text2)}
@media (min-width:720px){.lp-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── sections ── */
.lp-sec{padding-block:clamp(64px,8.5vw,112px)}
.lp-sec-band{background:var(--bg2);border-block:1px solid var(--border)}
.lp-h2{margin:18px 0 0;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem);line-height:1.06;letter-spacing:-.025em}

/* how it works */
.lp-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.lp-step{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px 24px 24px;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column;gap:10px;transition:box-shadow var(--t-panel) var(--ease-out),translate var(--t-panel) var(--ease-out)}
.lp-step-n{font:500 12px/1 var(--font-mono);letter-spacing:.2em;color:var(--accent-ink)}
.lp-step h3{font-size:1.25rem}
.lp-step p{margin:0;color:var(--text2);line-height:1.55}
.lp-step-art{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lp-step-art .gf-chip{pointer-events:none}
.lp-step-fit{gap:14px}
.lp-step-fit .gf-quiet{margin:6px 0 0}
.lp-wa{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-lg);background:var(--green-wash);color:var(--wa-ink);font-weight:600;font-size:13.5px}
@media (min-width:860px){.lp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (hover:hover) and (pointer:fine){.lp-step:hover{box-shadow:var(--shadow-lg);translate:0 -3px}}

/* types */
.lp-types{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-types li{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.lp-types svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.lp-types b{font-size:1rem}
.lp-types span{font-size:13px;color:var(--text2);line-height:1.5}
@media (min-width:720px){.lp-types{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── the guide ── */
.lp-guide{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr);background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:clip}
.lp-g-side{padding:22px;background:var(--bg2);border-bottom:1px solid var(--border);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;align-items:center}
.lp-g-ring{width:64px;height:64px}
.lp-g-ready{margin:0;font-weight:700;font-size:15px;line-height:1.35}
.lp-g-tabs{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.lp-g-tabs::-webkit-scrollbar{display:none}
.lp-g-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:var(--r-full);border:1px solid transparent;background:transparent;color:var(--text2);font-weight:600;font-size:13.5px;white-space:nowrap;transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.lp-g-tabs .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface);font:600 11px/1 var(--font-mono);color:var(--text)}
.lp-g-tabs button[aria-selected="true"]{background:var(--card);border-color:var(--border2);color:var(--text)}
.lp-g-tabs button[aria-selected="true"] .n{background:var(--navy);color:var(--white)}
.lp-g-tabs button.done .n{background:var(--green);color:var(--white)}
.lp-g-main{padding:24px}
.lp-g-main h3{font-size:1.25rem;margin-bottom:6px}
.lp-g-main>section>p{margin:0 0 14px;color:var(--text2);line-height:1.55}
.lp-g-main [role="tabpanel"]{animation:lp-panel var(--t-panel) var(--ease-out)}
@keyframes lp-panel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lp-g-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lp-g-checks label{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);cursor:pointer;transition:border-color var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
.lp-g-checks label:has(input:checked){border-color:var(--green);background:var(--green-wash)}
.lp-g-checks input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--green)}
.lp-g-checks span{font-size:14.5px;line-height:1.45}
.lp-g-tip{margin:16px 0 0;padding:12px 14px;border-inline-start:3px solid var(--gold);background:var(--gold-wash);border-radius:var(--r-sm);font-size:13.5px;color:var(--gold-ink);line-height:1.5}
.lp-g-tip b{margin-inline-end:4px}
.lp-g-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.lp-g-nav .gf-quiet{margin-inline-start:auto}
.gf-btn-navy-s{background:var(--navy);border-color:var(--navy);color:var(--white)}
.gf-btn-navy-s:hover{background:var(--navy-2);color:var(--white)}
.lp-g-after{margin:22px 0 0;color:var(--text2)}
.lp-g-after a{font-weight:700}
@media (min-width:860px){
  .lp-guide{grid-template-columns:300px minmax(0,1fr)}
  .lp-g-side{border-bottom:0;border-inline-end:1px solid var(--border);align-content:start;padding:26px 22px}
  .lp-g-tabs{flex-direction:column;overflow:visible;margin-top:14px}
  .lp-g-tabs button{width:100%;justify-content:flex-start;white-space:normal;text-align:start;border-radius:var(--r-md);min-height:44px}
  .lp-g-main{padding:30px 32px}
}

/* ── plans ── */
.lp-plans{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:880px}
.lp-plan{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;min-width:0}
.lp-plan h3{font-size:1.375rem}
.lp-plan-sub{margin:0;color:var(--text2)}
.lp-plan-price{margin:10px 0 6px;font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--navy)}
.lp-plan-soon{font-size:1rem;font-weight:700;color:var(--accent-ink);letter-spacing:0}
.lp-plan ul{list-style:none;margin:6px 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.lp-plan li{position:relative;padding-inline-start:24px;font-size:14.5px;line-height:1.45}
.lp-plan li::before{content:"";position:absolute;inset-inline-start:2px;top:.45em;width:12px;height:7px;border-inline-start:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.lp-plan .gf-btn{margin-top:auto;align-self:flex-start}
.lp-plan-pro{border-color:var(--accent-dim);box-shadow:var(--shadow-lg);background:linear-gradient(180deg,var(--card),var(--accent-wash))}
@media (min-width:760px){.lp-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── trust (stage) ── */
.lp-trust{background:radial-gradient(90% 70% at 10% 100%,var(--stage-bg2),var(--stage-bg) 60%,var(--stage-deep))}
.lp-trust-in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.lp-trust .lp-h2{color:var(--white)}
.lp-tr-list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.lp-tr-list li{display:flex;flex-direction:column;gap:3px;padding-inline-start:18px;border-inline-start:2px solid var(--stage-accent)}
.lp-tr-list b{color:var(--white);font-size:1rem}
.lp-tr-list span{color:var(--stage-text2);font-size:14px;line-height:1.55}
.lp-tr-art{position:relative;display:grid;gap:12px}
.lp-tr-card{background:var(--card);color:var(--text);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-lg)}
.lp-tr-card-2{margin-inline-start:min(10%,40px);background:var(--stage-card);color:var(--stage-text2);border:1px solid var(--stage-border);box-shadow:none;backdrop-filter:blur(8px)}
.lp-tr-card-2 .gf-label-m{color:var(--stage-muted)}
.lp-tr-card-2 ul{list-style:none;margin:8px 0 0;padding:0;font:400 12.5px/1.8 var(--font-mono)}
.lp-tr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.lp-tr-ver{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.lp-tr-ver i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.lp-tr-diff{display:flex;align-items:baseline;gap:12px;margin-top:12px;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.lp-tr-diff s{color:var(--muted2);font-weight:600;font-size:1.1rem}
.lp-tr-diff b{color:var(--navy)}
.lp-tr-quote{margin:10px 0 0;padding:8px 12px;border-inline-start:3px solid var(--border2);background:var(--bg);font-size:13px;color:var(--text2)}
.lp-tr-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.lp-tr-actions span{font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--border2);color:var(--text2)}
.lp-tr-actions .ok{background:var(--navy);border-color:var(--navy);color:var(--white)}
@media (min-width:900px){.lp-trust-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}}

/* ── close ── */
.lp-close{position:relative;overflow:clip;padding-block:clamp(72px,10vw,128px);text-align:center;background:var(--bg)}
.lp-close-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.lp-close-in .gf-lead{margin:0;text-align:center}
.lp-close-mark{width:min(44vw,220px);height:auto;margin-bottom:-12px;opacity:.95;animation:lp-turn var(--t-turn-slow) linear infinite reverse}
.lp-close .lp-h2{margin-top:0}
.lp-close .lp-ctas{justify-content:center;margin-top:8px}

/* ── reduced motion: nothing drifts, turns, blooms or rises; everything is simply there ── */
@media (prefers-reduced-motion:reduce){
  .lp-aura i,.lp-bunga,.lp-close-mark,.lp-m-live i{animation:none}
  .lp-bunga .bunga-petals path,.lp-bunga .bunga-veins,.lp-bunga .bunga-pollen,.lp-bunga .bunga-stamen{animation:none}
  .lp-line,.lp-matcher{animation:lp-fade var(--t-panel) var(--ease-out) both}
  .lp-m-rows li{transform:none;transition-duration:var(--t-panel)}
  .lp-step:hover{translate:none}
  .lp-g-main [role="tabpanel"]{animation:none}
}