/* landing-hero.css — FRANYX public landing (franyxai.com), "museum / gallery" redesign 2026-08-13.
   Apple-editorial, hitam+emas. EVERYTHING scoped to #screen-landing so it never leaks into
   the login/app screens of the SPA. Real product screenshots framed as specimens.
   Driven by landing-hero.js (vanilla: IntersectionObserver reveals, counters, marquee, mascot float). */

#screen-landing{
  --canvas:#05060d; --canvas-2:#08090f; --canvas-3:#0c0d14;
  --gold-core:#D4AF37; --gold-mid:#E8C86A; --gold-light:#F3D98B; --gold-warm:#C9962F;
  --ink:#e8e8f2; --ink-muted:#8a8aa4; --ink-dim:#54546c;
  --hairline:rgba(212,175,55,.15); --hairline-ink:rgba(232,232,242,.08);
  --radius-sm:5px; --radius-md:8px; --radius-lg:14px; --radius-frame:11px;
  --font-display:'Syne',sans-serif; --font-body:'DM Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --maxw:1440px;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}
#screen-landing::before{content:none;}        /* kill stale cinematic grid overlay */
#screen-landing *{box-sizing:border-box;}
#screen-landing img{display:block;max-width:100%;}
#screen-landing a{color:inherit;text-decoration:none;}
#screen-landing button{font-family:inherit;}

/* ── NAV ───────────────────────────────────────────── */
#screen-landing .fx-nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:64px;
  display:flex; align-items:center; gap:8px; padding:0 clamp(20px,4vw,48px);
  background:rgba(5,6,13,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  border-bottom:1px solid transparent; transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;
}
#screen-landing .fx-nav.is-scrolled{
  background:rgba(5,6,13,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--hairline);
}
#screen-landing .fx-nav-logo{
  font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:.06em; color:var(--ink); flex:1;
}
#screen-landing .fx-nav-logo span{color:var(--gold-core);}
#screen-landing .fx-nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0 24px; }
#screen-landing .fx-nav-links a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--ink-muted);
  text-transform:uppercase; transition:color .3s ease;
}
#screen-landing .fx-nav-links a:hover{color:var(--ink);}
#screen-landing .fx-nav-signin{
  background:none; border:none; cursor:pointer; padding:9px 14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted); transition:color .3s ease;
}
#screen-landing .fx-nav-signin:hover{color:var(--ink);}
#screen-landing .fx-nav-cta{
  padding:9px 20px; background:var(--gold-core); color:#05060d; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radius-sm); transition:background .3s ease,transform .15s ease; white-space:nowrap;
}
#screen-landing .fx-nav-cta:hover{background:var(--gold-light); transform:translateY(-1px);}
#screen-landing .fx-nav-cta:active{transform:translateY(0) scale(.98);}

/* ── HERO ──────────────────────────────────────────── */
#screen-landing .fx-hero{
  min-height:100dvh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:96px 10vw 72px; position:relative; overflow:hidden;
}
#screen-landing .fx-hero-backdrop{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(70% 55% at 22% 42%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(60% 50% at 82% 78%, rgba(212,175,55,.05), transparent 60%),
    linear-gradient(180deg, rgba(5,6,13,.35), rgba(5,6,13,.72) 62%, var(--canvas) 100%),
    url('assets/brand/app/landing-backdrop.png') center 28%/cover no-repeat;
  opacity:.5;
}
#screen-landing .fx-hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(5,6,13,.55) 100%);
}
#screen-landing .fx-hero > *{position:relative; z-index:2;}

#screen-landing .fx-eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-mid); margin-bottom:30px; display:inline-flex; align-items:center; gap:12px;
}
#screen-landing .fx-eyebrow::before{content:''; width:26px; height:1px; background:var(--gold-core); opacity:.7;}
#screen-landing .fx-hero-headline{
  font-family:var(--font-display); font-size:clamp(2.8rem,6vw,5.6rem); font-weight:800; line-height:1.03;
  letter-spacing:-.025em; color:var(--ink); max-width:13ch; margin-bottom:26px; position:relative;
}
#screen-landing .fx-hero-headline em{ font-style:normal; color:var(--gold-mid); }
#screen-landing .fx-hero-sub{
  font-size:clamp(1.05rem,1.5vw,1.25rem); font-weight:400; color:rgba(255,255,255,.72);
  max-width:44ch; line-height:1.75; margin-bottom:44px; position:relative;
}
#screen-landing .fx-hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

/* mascot floating in hero negative space (graft: warmth) */
#screen-landing .fx-hero-mascot{
  position:absolute; right:5vw; top:52%; transform:translateY(-50%); z-index:0; opacity:.72;
  width:min(26vw,300px); aspect-ratio:1; display:grid; place-items:center; pointer-events:none;
}
#screen-landing .fx-hero-mascot::before{
  content:''; position:absolute; inset:8%; border-radius:50%;
  border:1px solid rgba(212,175,55,.28);
  box-shadow:0 0 60px rgba(212,175,55,.14), inset 0 0 40px rgba(212,175,55,.06);
  animation:fxRing 22s linear infinite;
}
#screen-landing .fx-hero-mascot::after{
  content:''; position:absolute; inset:22%; border-radius:50%;
  border:1px dashed rgba(212,175,55,.16); animation:fxRing 30s linear infinite reverse;
}
#screen-landing .fx-hero-mascot img{
  width:56%; filter:drop-shadow(0 24px 48px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(212,175,55,.12));
  animation:fxFloat 7s ease-in-out infinite;
}
@keyframes fxRing{to{transform:rotate(360deg);}}
@keyframes fxFloat{0%,100%{transform:translateY(-6px);}50%{transform:translateY(10px);}}

/* buttons */
#screen-landing .fx-btn-primary{
  padding:15px 30px; background:var(--gold-core); color:#03040a; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radius-sm); transition:background .3s ease,transform .15s ease,box-shadow .3s ease; white-space:nowrap;
}
#screen-landing .fx-btn-primary:hover{ background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 30px rgba(212,175,55,.22); }
#screen-landing .fx-btn-primary:active{ transform:translateY(0) scale(.98); }
#screen-landing .fx-btn-ghost{
  padding:14px 26px; background:transparent; color:var(--ink); border:1px solid var(--hairline-ink); cursor:pointer;
  font-family:var(--font-mono); font-size:12px; font-weight:400; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radius-sm); transition:border-color .3s ease,color .3s ease,transform .15s ease,background .3s ease; white-space:nowrap;
}
#screen-landing .fx-btn-ghost:hover{ border-color:rgba(212,175,55,.35); background:rgba(212,175,55,.05); transform:translateY(-1px); }
#screen-landing .fx-btn-ghost:active{ transform:translateY(0) scale(.98); }

/* ── SECTION BASE ──────────────────────────────────── */
#screen-landing .fx-section{ padding:clamp(84px,12vh,132px) 0; position:relative; }
#screen-landing .fx-inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(24px,6vw,80px); }
#screen-landing .fx-sep{ height:1px; background:var(--hairline); max-width:calc(var(--maxw) - 160px); margin:0 auto; }
#screen-landing .fx-accent-line{ width:34px; height:1px; background:var(--gold-core); margin-bottom:34px; }

#screen-landing .fx-h2{
  font-family:var(--font-display); font-size:clamp(2rem,3.6vw,3.1rem); font-weight:700; line-height:1.08;
  letter-spacing:-.02em; color:var(--ink); margin-bottom:22px;
}
#screen-landing .fx-body{
  font-size:.98rem; font-weight:300; color:var(--ink-muted); line-height:1.75; max-width:40ch; margin-bottom:34px;
}
#screen-landing .fx-link{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-mid); transition:gap .3s ease,color .3s ease;
}
#screen-landing .fx-link::after{content:'→'; font-size:13px;}
#screen-landing .fx-link:hover{ gap:16px; color:var(--gold-light); }
#screen-landing .fx-text-block{ display:flex; flex-direction:column; }

/* ── SPECIMEN FRAME (museum piece) ─────────────────── */
#screen-landing .fx-specimen{ position:relative; }
#screen-landing .fx-frame{
  position:relative; border-radius:var(--radius-frame); border:1px solid rgba(212,175,55,.2);
  overflow:hidden; background:var(--canvas-3);
  box-shadow:0 0 0 1px rgba(212,175,55,.06), 0 36px 90px rgba(0,0,0,.6);
}
#screen-landing .fx-frame.has-chrome::before{
  content:''; position:absolute; top:0; left:0; right:0; height:36px;
  background:rgba(14,15,22,.96); border-bottom:1px solid rgba(255,255,255,.06); z-index:2;
}
#screen-landing .fx-frame.has-chrome::after{
  content:'● ● ●'; position:absolute; top:0; left:0; height:36px; padding:0 16px; display:flex; align-items:center;
  font-size:8px; letter-spacing:4px; color:rgba(212,175,55,.35); z-index:3; line-height:36px;
}
#screen-landing .fx-frame img{ width:100%; display:block; position:relative; }
#screen-landing .fx-frame.has-chrome img{ margin-top:36px; }
#screen-landing .fx-caption{ margin-top:18px; padding-left:2px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
#screen-landing .fx-caption-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
#screen-landing .fx-caption-accent{ width:24px; height:1px; background:var(--gold-core); opacity:.5; flex:none; }

/* price/live badge — lives in the caption row (never over the screenshot content) */
#screen-landing .fx-badge{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-light); background:rgba(212,175,55,.09); border:1px solid rgba(212,175,55,.32);
  padding:5px 12px; border-radius:99px; white-space:nowrap; flex:none;
}
#screen-landing .fx-badge.is-live::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold-mid);
  margin-right:7px; vertical-align:middle; box-shadow:0 0 8px var(--gold-mid);
}
/* muted framing for a color-hot product screenshot so it doesn't fight the gold system */
#screen-landing .fx-frame.dim-shot img{ filter:saturate(.82) brightness(.96); }
#screen-landing .fx-frame.dim-shot::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,13,.18),transparent 22%,transparent 78%,rgba(5,6,13,.3)); }

/* ── FLAGSHIP LAYOUTS ──────────────────────────────── */
#screen-landing .fx-split{ display:grid; gap:clamp(40px,6vw,80px); align-items:center; }
#screen-landing .fx-split.left-text{ grid-template-columns:2fr 3fr; }
#screen-landing .fx-split.left-asset{ grid-template-columns:3fr 2fr; }
#screen-landing .fx-split.left-asset .fx-text-block{ order:2; }
#screen-landing .fx-split.left-asset .fx-specimen{ order:1; }

/* receptionist: centered full-bleed */
#screen-landing .fx-center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
#screen-landing .fx-center .fx-h2{ max-width:20ch; margin-left:auto; margin-right:auto; }
#screen-landing .fx-center .fx-body{ max-width:52ch; margin-left:auto; margin-right:auto; margin-bottom:64px; }
#screen-landing .fx-center .fx-specimen{ width:100%; max-width:920px; }

/* panel: header split + wide shot */
#screen-landing .fx-panel-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:56px; }
#screen-landing .fx-panel-head .fx-h2{ margin-bottom:0; }
#screen-landing .fx-panel-head .fx-body{ margin-bottom:22px; max-width:42ch; }

/* custom systems: text + stacked shots */
#screen-landing .fx-custom{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
#screen-landing .fx-custom-text{ padding-top:16px; }
#screen-landing .fx-custom-stack{ display:flex; flex-direction:column; gap:20px; }

/* ── COVERFLOW / MARQUEE (graft from C) ────────────── */
#screen-landing .fx-gallery{ background:var(--canvas-2); padding:clamp(72px,10vh,110px) 0; overflow:hidden; }
#screen-landing .fx-gallery-head{ max-width:var(--maxw); margin:0 auto 44px; padding:0 clamp(24px,6vw,80px); }
#screen-landing .fx-gallery-track-wrap{ position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
#screen-landing .fx-gallery-track{ display:flex; gap:22px; width:max-content; will-change:transform; animation:fxMarquee 60s linear infinite; }
#screen-landing .fx-gallery:hover .fx-gallery-track{ animation-play-state:paused; }
#screen-landing .fx-shot{
  flex:none; width:clamp(260px,32vw,420px); border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--hairline); background:var(--canvas-3); box-shadow:0 22px 60px rgba(0,0,0,.5);
  position:relative;
}
#screen-landing .fx-shot img{ width:100%; height:230px; object-fit:cover; object-position:top center; opacity:.85; position:relative; z-index:0; transition:opacity .4s ease,transform .5s ease; }
#screen-landing .fx-shot:hover img{ opacity:.98; transform:scale(1.03); }
/* uniform dark scrim so light-UI screenshots don't blow out next to dark ones */
#screen-landing .fx-shot::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,13,.22),rgba(5,6,13,.02) 34%,rgba(5,6,13,.06) 62%,rgba(5,6,13,.55)); }
#screen-landing .fx-shot-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 16px;
  background:linear-gradient(to top,rgba(5,6,13,.94),transparent);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
@keyframes fxMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── ECOSYSTEM BENTO ───────────────────────────────── */
#screen-landing .fx-bento{
  display:grid; grid-template-columns:repeat(12,1fr); gap:2px;
  background:rgba(212,175,55,.05); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden;
}
#screen-landing .fx-cell{
  background:var(--canvas); padding:32px 30px; display:flex; flex-direction:column; gap:11px;
  position:relative; overflow:hidden; transition:background .4s ease; min-height:224px;
}
#screen-landing .fx-cell:hover{ background:var(--canvas-3); }
#screen-landing .fx-cell-ic{ width:34px; height:34px; margin-bottom:6px; color:var(--gold-mid); }
#screen-landing .fx-cell-ic svg{ width:34px; height:34px; stroke:currentColor; fill:none; stroke-width:1.4; }
#screen-landing .fx-cell-title{ font-family:var(--font-display); font-size:1.14rem; font-weight:700; color:var(--ink); line-height:1.2; }
#screen-landing .fx-cell-body{ font-size:.84rem; color:var(--ink-muted); font-weight:300; line-height:1.6; }
#screen-landing .fx-cell-link{ margin-top:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-warm); display:inline-flex; align-items:center; gap:8px; }
#screen-landing .fx-cell-link::after{ content:'→'; }
/* row1: 4+4+4  row2: 4+4+4 */
#screen-landing .bc-topup{ grid-column:span 4; }
#screen-landing .bc-wallet{ grid-column:span 4; }
#screen-landing .bc-jasa{ grid-column:span 4; }
#screen-landing .bc-website{ grid-column:span 4; padding:0; }
#screen-landing .bc-brand{ grid-column:span 4; }
#screen-landing .bc-game{ grid-column:span 4; padding:0; }
/* subtle gold sheen on text cells so none reads empty */
#screen-landing .bc-topup::after,#screen-landing .bc-wallet::after,#screen-landing .bc-jasa::after{
  content:''; position:absolute; right:-30px; top:-30px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.08), transparent 70%); pointer-events:none;
}
/* image cells — absolute-fill so a tall screenshot can't blow out the grid row height */
#screen-landing .fx-cell-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.68; transition:opacity .4s ease,transform .6s ease; }
#screen-landing .bc-website:hover .fx-cell-img,#screen-landing .bc-game:hover .fx-cell-img{ opacity:.8; transform:scale(1.03); }
#screen-landing .fx-cell-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
  gap:8px; background:linear-gradient(to top,rgba(5,6,13,.94) 0%,rgba(5,6,13,.35) 55%,transparent 100%); }
#screen-landing .bc-brand{ align-items:center; text-align:center; justify-content:center;
  background:linear-gradient(135deg,var(--canvas) 0%,rgba(12,13,20,.96) 100%); }
#screen-landing .bc-brand-mascot{ width:62px; height:62px; object-fit:contain; margin-bottom:8px;
  filter:drop-shadow(0 0 22px rgba(212,175,55,.18)); }

/* ── PROOF ─────────────────────────────────────────── */
#screen-landing .fx-proof-inner{ display:flex; flex-direction:column; gap:64px; }
#screen-landing .fx-proof-head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; }
#screen-landing .fx-proof-head .fx-h2{ margin-bottom:0; }
#screen-landing .fx-proof-head .fx-body{ margin-bottom:0; }
#screen-landing .fx-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline); padding:38px 0; }
#screen-landing .fx-stat{ padding:0 32px; border-right:1px solid var(--hairline); }
#screen-landing .fx-stat:first-child{ padding-left:0; }
#screen-landing .fx-stat:last-child{ border-right:none; }
#screen-landing .fx-stat-n{ font-family:var(--font-display); font-size:clamp(2.3rem,4vw,3.4rem); font-weight:800;
  color:var(--gold-mid); letter-spacing:-.03em; line-height:1; margin-bottom:8px; font-variant-numeric:tabular-nums; }
#screen-landing .fx-stat-l{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }

#screen-landing .fx-clients{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; border:1px solid var(--hairline);
  border-radius:var(--radius-lg); overflow:hidden; background:rgba(212,175,55,.03); }
#screen-landing .fx-client{ background:var(--canvas-2); padding:38px 34px; display:flex; flex-direction:column; gap:14px; }
#screen-landing .fx-client-metric{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--gold-warm); }
#screen-landing .fx-client-name{ font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--ink); }
#screen-landing .fx-client-desc{ font-size:.86rem; color:var(--ink-muted); font-weight:300; line-height:1.65; }
#screen-landing .fx-client-img{ padding:0; position:relative; min-height:330px; overflow:hidden; }
#screen-landing .fx-client-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; opacity:.8; }
#screen-landing .fx-client-img .ov{ position:absolute; inset:0; padding:32px; display:flex; flex-direction:column;
  justify-content:flex-end; gap:8px; background:linear-gradient(to top,rgba(5,6,13,.95) 0%,rgba(5,6,13,.4) 55%,transparent 100%); }
#screen-landing .fx-client-span2{ grid-column:span 2; }

/* ── FINAL CTA ─────────────────────────────────────── */
#screen-landing .fx-cta{ background:var(--canvas-2); }
#screen-landing .fx-cta-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; }
#screen-landing .fx-cta-h{ font-family:var(--font-display); font-size:clamp(2.4rem,4.4vw,3.8rem); font-weight:800;
  line-height:1.05; letter-spacing:-.025em; color:var(--ink); }
#screen-landing .fx-cta-right{ display:flex; flex-direction:column; gap:26px; }
#screen-landing .fx-cta-body{ font-size:.98rem; color:var(--ink-muted); font-weight:300; line-height:1.75; }

/* ── FOOTER ────────────────────────────────────────── */
#screen-landing .fx-footer{ max-width:var(--maxw); margin:0 auto; padding:44px clamp(24px,6vw,80px);
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
#screen-landing .fx-footer-logo{ font-family:var(--font-display); font-size:16px; font-weight:800; letter-spacing:.06em; color:var(--ink-dim); }
#screen-landing .fx-footer-logo span{ color:var(--gold-warm); }
#screen-landing .fx-footer-sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-dim); margin-top:8px; }
#screen-landing .fx-footer-meta{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--ink-dim); text-align:right; line-height:1.9; }

/* ── REVEAL ANIMATIONS ─────────────────────────────── */
#screen-landing .reveal{ opacity:0; transform:translateY(32px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
#screen-landing .reveal.is-visible{ opacity:1; transform:none; }
#screen-landing .reveal-slow{ opacity:0; transform:translateY(46px);
  transition:opacity 1.15s cubic-bezier(.16,1,.3,1), transform 1.15s cubic-bezier(.16,1,.3,1); }
#screen-landing .reveal-slow.is-visible{ opacity:1; transform:none; }
#screen-landing .rd-1{ transition-delay:.08s; }
#screen-landing .rd-2{ transition-delay:.18s; }
#screen-landing .rd-3{ transition-delay:.3s; }
/* hero intro (js-driven) */
#screen-landing .fx-hero .fx-intro{ opacity:0; transform:translateY(26px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1); }
#screen-landing .fx-hero.is-in .fx-intro{ opacity:1; transform:none; }
#screen-landing .fx-hero.is-in .fx-intro.d1{ transition-delay:.12s; }
#screen-landing .fx-hero.is-in .fx-intro.d2{ transition-delay:.26s; }
#screen-landing .fx-hero.is-in .fx-intro.d3{ transition-delay:.42s; }

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width:1024px) and (min-width:769px){
  #screen-landing .fx-inner{ padding:0 48px; }
  #screen-landing .fx-hero{ padding:88px 8vw 64px; }
  #screen-landing .fx-bento{ grid-template-columns:repeat(6,1fr); }
  #screen-landing .bc-topup,#screen-landing .bc-wallet,#screen-landing .bc-jasa,
  #screen-landing .bc-website,#screen-landing .bc-brand,#screen-landing .bc-game{ grid-column:span 2; }
  #screen-landing .fx-hero-mascot{ width:min(34vw,260px); opacity:.85; }
}
@media (max-width:768px){
  #screen-landing .fx-nav{ padding:0 18px; }
  #screen-landing .fx-nav-links{ display:none; }
  #screen-landing .fx-nav-signin{ padding:8px 10px; font-size:10px; }
  #screen-landing .fx-nav-cta{ padding:8px 14px; font-size:10px; }
  #screen-landing .fx-hero{ padding:100px 22px 64px; min-height:auto; }
  #screen-landing .fx-hero-headline{ font-size:clamp(2.4rem,10vw,3.6rem); max-width:none; }
  #screen-landing .fx-hero-sub{ max-width:100%; }
  #screen-landing .fx-hero-mascot{ position:static; transform:none; width:150px; margin:34px 0 0; opacity:.9; }
  #screen-landing .fx-hero-mascot img{ width:70%; }
  #screen-landing .fx-hero-actions{ width:100%; }
  #screen-landing .fx-btn-primary,#screen-landing .fx-btn-ghost{ flex:1; text-align:center; }
  #screen-landing .fx-inner{ padding:0 22px; }
  #screen-landing .fx-sep{ margin:0 22px; }
  #screen-landing .fx-split.left-text,#screen-landing .fx-split.left-asset,
  #screen-landing .fx-custom,#screen-landing .fx-cta-inner{ grid-template-columns:1fr; gap:40px; }
  #screen-landing .fx-split.left-asset .fx-text-block{ order:1; }
  #screen-landing .fx-split.left-asset .fx-specimen{ order:2; }
  #screen-landing .fx-panel-head,#screen-landing .fx-proof-head{ grid-template-columns:1fr; gap:22px; margin-bottom:36px; }
  /* keep stats 3-across on mobile (graft from A) */
  #screen-landing .fx-stats{ padding:26px 0; }
  #screen-landing .fx-stat{ padding:0 10px; }
  #screen-landing .fx-stat-n{ font-size:clamp(1.5rem,7vw,2.2rem); }
  #screen-landing .fx-stat-l{ font-size:8.5px; letter-spacing:.08em; }
  #screen-landing .fx-bento{ grid-template-columns:1fr; }
  #screen-landing .bc-topup,#screen-landing .bc-wallet,#screen-landing .bc-jasa,
  #screen-landing .bc-website,#screen-landing .bc-brand,#screen-landing .bc-game{ grid-column:span 1; }
  #screen-landing .fx-clients{ grid-template-columns:1fr; }
  #screen-landing .fx-client-span2{ grid-column:span 1; }
  #screen-landing .fx-shot{ width:76vw; }
  #screen-landing .fx-footer{ flex-direction:column; align-items:flex-start; }
  #screen-landing .fx-footer-meta{ text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  #screen-landing .reveal,#screen-landing .reveal-slow,#screen-landing .fx-hero .fx-intro{
    transition:none !important; opacity:1 !important; transform:none !important; }
  #screen-landing .fx-hero-mascot img,#screen-landing .fx-hero-mascot::before,#screen-landing .fx-hero-mascot::after,
  #screen-landing .fx-gallery-track{ animation:none !important; }
}