/* flex.css — postcard deck, notebook theater, beyond-the-desk, hero proof chips.
   Memakai token Amoy (--ink, --paper, --muted, --accent, --gutter). */
:root{--fx-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- hero proof chips ---------- */
.hero-proof{list-style:none;margin:34px 0 0;padding:0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero-proof li{padding:9px 16px;border:1px solid #ffffff2e;border-radius:14px;background:#ffffff10;backdrop-filter:blur(10px);font-size:11px;line-height:1.35;letter-spacing:.8px;color:#cfdadd;text-align:left}
.hero-proof b{display:inline-block;font-size:17px;letter-spacing:-.3px;color:var(--accent);font-weight:600;margin-bottom:2px}
@media(max-width:700px){.hero-proof{gap:7px;margin-top:26px}.hero-proof li{padding:7px 11px;font-size:9px}.hero-proof b{font-size:14px}.hero-center{padding-bottom:170px}}
@media(max-height:760px) and (min-width:701px){.hero-proof{margin-top:22px}}

/* ---------- shared heading ---------- */
.fx-pc,.fx-nb,.fx-bd{position:relative;padding-left:var(--gutter);padding-right:var(--gutter)}
.fx-pc h2,.fx-nb h2,.fx-bd h2{font-size:clamp(44px,6.2vw,96px);letter-spacing:-.045em;line-height:.98;font-weight:500}
.fx-pc h2 em,.fx-nb h2 em,.fx-bd h2 em{color:var(--muted)}
.fx-pc .eyebrow,.fx-nb .eyebrow,.fx-bd .eyebrow{color:var(--muted);margin-bottom:22px}

/* ---------- postcards ---------- */
.fx-pc{background:var(--ink)}
.fx-pc-stage{padding:70px 0 80px}
.fx-pc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin:54px 0 46px}
.fx-pc-head>p{max-width:360px;color:var(--muted);font-size:17px;line-height:1.5;padding-bottom:8px}
.fx-deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.fx-hint{display:none}
.fx-card{--bg:#c1d4dc;position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 22px 16px;border-radius:10px;background:var(--bg);color:#10222c;box-shadow:0 22px 40px -22px #000a,0 2px 0 #fff6 inset;overflow:hidden;translate:0 0;transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.fx-card:hover{translate:0 -14px;box-shadow:0 34px 50px -24px #000c}
.fx-card:before{content:'';position:absolute;inset:7px;border:1px dashed #10222c26;border-radius:6px;pointer-events:none}
.fx-card header{display:flex;justify-content:space-between;align-items:flex-start;font-size:10px;font-weight:600;letter-spacing:1.2px}
.fx-stamp{font-style:normal;display:grid;place-items:center;width:34px;height:40px;border:2px dotted #10222c80;border-radius:3px;font-size:17px;color:#10222ccc;transform:rotate(3deg)}
.fx-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:.9;margin-top:4px}
.fx-big del{font-size:clamp(26px,2.4vw,36px);color:#10222c70;text-decoration-thickness:2px}
.fx-big b{font-size:clamp(54px,5vw,78px);font-weight:600;letter-spacing:-.05em}
.fx-big small{font-size:10px;font-weight:600;letter-spacing:1.2px;align-self:flex-end;padding-bottom:6px}
.fx-card p{font-size:13.5px;line-height:1.4;color:#10222ccc;max-width:270px}
.fx-card footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px dotted #10222c55;font-size:9.5px;font-weight:600;letter-spacing:1.2px;color:#10222c99}
.fx-card footer a{color:#10222c;border-bottom:1px solid currentColor;padding-bottom:1px}
.fx-postmark{position:absolute;right:62px;top:14px;width:54px;height:54px;border:1.5px solid #10222c40;border-radius:50%;display:grid;place-items:center;text-align:center;text-decoration:none;font-size:8px;font-weight:700;letter-spacing:1px;line-height:1.2;color:#10222c55;transform:rotate(-14deg)}
.fx-card:nth-child(odd){rotate:-.6deg}.fx-card:nth-child(even){rotate:.7deg}

/* pinned fan (desktop) */
.fx-pc.is-pin .fx-pc-stage{height:100svh;min-height:660px;padding:60px 0 40px;display:flex;flex-direction:column;overflow:visible}
.fx-pc.is-pin .fx-pc-head{margin:34px 0 0}
.fx-pc.is-pin .fx-pc-head h2{font-size:clamp(44px,5.4vw,84px)}
.fx-pc.is-pin .fx-deck{position:relative;display:block;flex:1;min-height:270px;margin-top:10px}
.fx-pc.is-pin .fx-card{position:absolute;left:50%;top:50%;width:clamp(290px,23vw,340px);height:clamp(230px,36vh,270px);rotate:0deg;will-change:transform}
.fx-pc.is-pin .fx-hint{display:block;position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:10px;letter-spacing:1.6px;color:var(--muted)}
.fx-pc.is-pin .fx-hint i{font-style:normal;display:inline-block;margin-left:8px;animation:fx-bob 1.6s ease-in-out infinite}
@keyframes fx-bob{50%{transform:translateY(5px)}}
@media(max-width:700px){.fx-pc-stage{padding:55px 0 60px}.fx-pc-head{display:block;margin:38px 0 30px}.fx-pc-head>p{margin-top:22px;font-size:16px}.fx-deck{grid-template-columns:1fr}}

/* ---------- notebook theater ---------- */
.fx-nb{background:#0c2430;border-radius:0}
.fx-nb-stage{padding:70px 0 70px}
.fx-nb-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:5%;align-items:center;margin-top:60px}
.fx-nb-cap{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);min-height:210px}
.fx-nb-step{font-size:10px;letter-spacing:1.4px;color:var(--muted)}
.fx-nb-time{display:block;font-size:clamp(34px,3.6vw,54px);font-weight:500;letter-spacing:-.03em;margin:10px 0 12px;color:var(--accent)}
.fx-nb-desc{color:#bccace;font-size:17px;line-height:1.5;max-width:420px;margin-bottom:22px;font-family:FuturaLight,Arial,sans-serif}
.fx-nb-cap>*{transition:opacity .3s}.fx-nb-cap.swap>*{opacity:0}
.fx-nb-note{margin-top:30px;font-size:9.5px;letter-spacing:1.5px;color:#7f959c}
.fx-nb-win{background:#fbfbf8;color:#202124;border-radius:14px;box-shadow:0 40px 80px -30px #000c,0 0 0 1px #ffffff1a;overflow:hidden;font-family:Arial,sans-serif;min-width:0}
.nbw-bar{display:flex;align-items:center;gap:14px;padding:10px 14px 0;background:#eef0ee;border-bottom:1px solid #dadedb}
.nbw-dots{display:flex;gap:6px;padding-bottom:10px}.nbw-dots i{width:10px;height:10px;border-radius:50%;background:#c8cdca}
.nbw-tabs{display:flex;gap:4px;overflow:hidden;min-width:0}
.nbw-tab{background:transparent;border:0;border-radius:8px 8px 0 0;padding:8px 12px;font:600 11px var(--fx-mono);color:#6a7570;white-space:nowrap;cursor:pointer;display:flex;gap:7px;align-items:center}
.nbw-tab:before{content:'';width:7px;height:7px;border-radius:2px;background:#f9ab00}
.nbw-tab.on{background:#fbfbf8;color:#202124}
.nbw-tab:focus-visible{outline:2px solid #1d5873;outline-offset:-2px}
.nbw-rt{margin-left:auto;padding-bottom:10px;font-size:10px;color:#5d6b66;display:flex;gap:6px;align-items:center;white-space:nowrap}
.nbw-rt:before{content:'';width:7px;height:7px;border-radius:50%;background:#1e9e5a}
.nbw-body{padding:16px 16px 18px;display:grid;gap:12px}
.nbw-cell{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.nbw-run{width:30px;height:30px;border-radius:50%;border:0;background:#e8eae8;color:#444;display:grid;place-items:center;font-size:11px;padding:0;cursor:default}
.nbw-run.go{background:#1d5873;color:#fff}
.nbw-run.go:after{content:'';position:absolute;width:30px;height:30px;border:2px solid transparent;border-top-color:#1d5873;border-radius:50%;animation:fx-spin .8s linear infinite}
.nbw-run{position:relative}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.nbw-code{margin:0;padding:12px 14px;background:#f1f3f2;border:1px solid #e0e4e1;border-radius:8px;font:12.5px/1.6 var(--fx-mono);color:#24292d;min-height:calc(1.6em*9 + 24px);overflow:hidden;white-space:pre}
.nbw-code .k{color:#8a2f9b}.nbw-code .s{color:#0a7a45}.nbw-code .c{color:#7b8a83;font-style:italic}.nbw-code .f{color:#1d5873}.nbw-code .n{color:#b25800}
.nbw-caret{display:inline-block;width:7px;height:14px;background:#1d5873;vertical-align:-2px;margin-left:1px;animation:fx-blink 1s steps(2) infinite}
@keyframes fx-blink{50%{opacity:0}}
.nbw-out{min-height:200px}
.nbw-status{display:flex;align-items:center;gap:10px;font:600 11px var(--fx-mono);color:#5d6b66;margin-bottom:9px}
.nbw-status.ok{color:#177a47}
.nbw-prog{flex:1;height:4px;background:#e2e6e3;border-radius:4px;overflow:hidden}.nbw-prog i{display:block;height:100%;width:0;background:#1d5873}
.nbw-table{width:100%;border-collapse:collapse;font:11.5px var(--fx-mono)}
.nbw-table th{text-align:left;font-weight:600;font-size:10px;letter-spacing:.6px;color:#6a7570;padding:5px 8px;border-bottom:1px solid #d9dedb}
.nbw-table td{padding:6px 8px;border-bottom:1px solid #eceeed;color:#2b3236;white-space:nowrap}
.nbw-table tr{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}.nbw-table tr.in{opacity:1;transform:none}
.nbw-tag{display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600;background:#e4f2e9;color:#17703f}.nbw-tag.w{background:#fdf0d6;color:#8a5a00}.nbw-tag.r{background:#fbe3e0;color:#a3291f}
.nbw-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;opacity:0;transform:translateY(6px);transition:.4s}.nbw-chips.in{opacity:1;transform:none}
.nbw-chips span{padding:5px 10px;border-radius:30px;background:#10222c;color:#d8e6ab;font-size:9.5px;font-weight:700;letter-spacing:.7px}
@media(max-width:1000px){.fx-nb-grid{grid-template-columns:1fr;gap:34px;margin-top:40px}.fx-nb-cap{min-height:0}}
@media(max-width:700px){.fx-nb-stage{padding:55px 0 55px}.nbw-rt{display:none}.nbw-tab{padding:8px 9px;font-size:10px}.nbw-code{font-size:11px;padding:10px;min-height:calc(1.6em*9 + 20px)}.nbw-cell{grid-template-columns:1fr}.nbw-run{display:none}.nbw-table{font-size:10.5px}.nbw-table th,.nbw-table td{padding:5px 5px}.nbw-body{padding:12px}}
.fx-nb.is-pin .fx-nb-stage{height:100svh;min-height:680px;padding:60px 0 28px;display:flex;flex-direction:column;overflow:hidden}
.fx-nb.is-pin .fx-nb-grid{flex:1;margin-top:20px}
.fx-nb.is-pin h2{font-size:clamp(44px,5vw,78px)}

/* ---------- beyond the desk ---------- */
.fx-bd{background:var(--ink);padding-top:90px;padding-bottom:100px}
.fx-bd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin:56px 0 46px}
.fx-bd-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:0 30px}
.fx-bd-stats li{padding-left:16px;border-left:1px solid var(--line)}
.fx-bd-stats b{display:block;font-size:clamp(34px,3.6vw,54px);font-weight:500;letter-spacing:-.04em;color:var(--accent);line-height:1}
.fx-bd-stats span{display:block;margin-top:8px;max-width:130px;font-size:10px;line-height:1.4;letter-spacing:.8px;color:var(--muted)}
.fx-bd-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px;grid-template-rows:auto}
.fx-bd-grid figure{position:relative;margin:0;border-radius:12px;overflow:hidden;background:#102934;min-height:240px}
.fx-bd-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fx-bd-grid figure:hover img{transform:scale(1.05)}
.fx-bd-grid figure:after{content:'';position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,#03141bd9);pointer-events:none}
.fx-bd-grid figcaption{position:absolute;z-index:1;left:18px;right:18px;bottom:15px;display:flex;flex-direction:column;gap:4px}
.fx-bd-grid figcaption b{font-size:11px;letter-spacing:1.4px}.fx-bd-grid figcaption span{font-size:12px;color:#d0dce0}
.fx-bd-grid .bp{grid-area:1/1/2/2;aspect-ratio:16/10}
.fx-bd-grid .sp{grid-area:1/3/3/4;min-height:520px}
.fx-bd-grid .bt{grid-area:1/2/3/3;min-height:520px}
.fx-bd-grid .sg{grid-area:2/1/3/2;aspect-ratio:4/3}
.fx-bd-grid .bt img{object-position:50% 30%}.fx-bd-grid .sp img{object-position:50% 30%}
@media(max-width:1000px){.fx-bd-head{display:block}.fx-bd-stats{margin-top:34px;grid-template-columns:repeat(2,1fr);gap:24px}
.fx-bd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-bd-grid .bp{grid-area:auto;grid-column:1/3}.fx-bd-grid .sg{grid-area:auto;grid-column:1/3}.fx-bd-grid .bt,.fx-bd-grid .sp{grid-area:auto;min-height:340px}}
@media(max-width:700px){.fx-bd{padding-top:60px;padding-bottom:65px}.fx-bd-grid{grid-template-columns:minmax(0,1fr)}.fx-bd-grid .bp,.fx-bd-grid .sg{grid-column:auto}.fx-bd-grid .bt,.fx-bd-grid .sp{min-height:380px}}
@media(prefers-reduced-motion:reduce){.fx-hint i{animation:none!important}}

.fx-pc.is-pin .fx-card:hover{z-index:40!important}
.nbw-table thead tr{opacity:1;transform:none}
.fx-bd h2{font-size:clamp(40px,4.9vw,76px)}

.fx-bd-grid figure{min-width:0}
.fx-bd-grid .bp,.fx-bd-grid .sg{min-height:0}

.fx-pc.is-pin .fx-card{backface-visibility:hidden;contain:layout paint}
.fx-nb-win{contain:layout paint;transform:translateZ(0)}

/* ---------- kursor: kembalikan kursor asli saat dot custom tersembunyi (case study) atau tertutup (dialog) ---------- */
body.case-open.motion-cursor,body.case-open.motion-cursor *,body.motion-cursor dialog[open],body.motion-cursor dialog[open] *{cursor:auto}
body.case-open.motion-cursor a,body.case-open.motion-cursor button,body.case-open.motion-cursor summary,body.case-open.motion-cursor [role=button],
body.motion-cursor dialog[open] a,body.motion-cursor dialog[open] button,body.motion-cursor dialog[open] summary{cursor:pointer}
body.case-open.motion-cursor input,body.case-open.motion-cursor textarea,body.motion-cursor dialog[open] input,body.motion-cursor dialog[open] textarea{cursor:text}

/* ---------- penyesuaian responsif ---------- */
@media(min-width:601px) and (max-width:899px){.fx-deck{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-card:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 9px);justify-self:center}}
@media(max-width:700px){.hero-proof li{font-size:10px}.hero-proof b{font-size:14px}}
@media(min-width:900px) and (max-height:760px){
  .fx-pc.is-pin .fx-pc-stage{padding-top:50px}
  .fx-pc.is-pin .fx-pc-head{margin-top:22px}
  .fx-pc.is-pin .fx-pc-head h2,.fx-nb.is-pin h2{font-size:clamp(36px,4.4vw,64px)}
  .fx-pc.is-pin .eyebrow,.fx-nb.is-pin .eyebrow{margin-bottom:12px}
  .fx-pc.is-pin .fx-card{height:clamp(210px,34vh,250px)}
  .fx-nb.is-pin .fx-nb-stage{padding-top:50px}
  .fx-nb.is-pin .fx-nb-grid{margin-top:8px}
  .fx-nb.is-pin .fx-nb-cap{margin-top:20px;min-height:0}
  .fx-nb.is-pin .fx-nb-desc{font-size:15px;margin-bottom:14px}
}

/* baris atas hero di HP: satu baris rapi, tanpa wrap */
@media(max-width:700px){.hero-topline{gap:10px;font-size:8.5px;letter-spacing:.7px;white-space:nowrap}.hero-topline>span:last-child{max-width:none;text-align:right}}
@media(max-width:380px){.hero-topline{justify-content:center}.hero-topline>span:first-child{display:none}}