/* Tify — design tokens dan seluruh komponen halaman.
 * Dibagi ke semua halaman. Sumbernya berkas ini; jangan salin balik
 * ke dalam <style> halaman mana pun. */
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* ink */
  --fin-ink-900:#050A18;
  --fin-ink-800:#0A1428;
  --fin-ink-700:#10203E;
  --fin-ink-600:#16294B;
  /* accent — hue diambil dari sampel piksel badan gelombang video asli
     (~H206° S100% L20%, lihat PRD §17), dinaikkan ke L46% supaya teks label
     kecil (JetBrains Mono ~12px) tetap lolos WCAG AA 4.5:1 di atas --fin-ink-900.
     Diverifikasi: 5.12:1 vs bg halaman, 4.95:1 vs teks tombol gelap. */
  --fin-cyan:#1286D9;
  --fin-cyan-hi:#7FE3FF;
  --fin-blue:#2E7BE8;
  /* Dipakai HANYA oleh .grad-text. Aturannya beda dari --fin-cyan di atas:
     kata aksen harus menang lawan video yang bergerak (luminance puncak
     gelombang bisa ~248/255), bukan cuma lawan bg statis #050A18. Diukur
     langsung dari kanvas: --fin-cyan (L46%) di titik ini cuma 1,39× lebih
     terang dari rata-rata video di baliknya — turun dari 2,1× sebelum
     digelapkan. Token ini menahan nilai lama supaya .grad-text tidak ikut
     redup saat --fin-cyan digelapkan untuk kebutuhan UI lain. */
  --fin-cyan-legible:#4FC3F7;
  /* text */
  --fin-bone:#E8F0FA;
  --fin-bone-dim:rgba(232,240,250,.62);
  --fin-bone-faint:rgba(232,240,250,.38);
  /* status */
  --fin-signal:#34D399;
  /* structure */
  --fin-line:rgba(120,170,255,.14);
  --fin-line-hi:rgba(127,227,255,.42);
  --fin-glow:rgba(79,195,247,.35);

  /* type */
  --ff-display:'Fraunces',Georgia,serif;
  --ff-body:'Inter Tight',system-ui,-apple-system,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-display:clamp(2.6rem,6.4vw,5.2rem);
  --fs-h2:clamp(1.9rem,3.6vw,3rem);
  --fs-h3:1.25rem;
  --fs-body:1rem;
  --fs-meta:.78rem;

  /* layout */
  --container:1280px;
  --gutter:24px;
  --section-y:clamp(80px,10vw,140px);
  --radius:14px;
  --radius-lg:22px;

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.22s;
  --t-mid:.42s;
  --t-slow:.9s;

  /* live, written by JS */
  --wave-energy:0;
  --px:0;
  --py:0;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fin-ink-900);
  color:var(--fin-bone);
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:400;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
::selection{background:var(--fin-cyan);color:var(--fin-ink-900)}

/* ============================================================
   LIVE STAGE — fixed video behind everything
   ============================================================ */
#stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--fin-ink-900)}
/* Kept as tight as the parallax travel allows. Every extra percent here is
   magnification applied to a 1080p source, i.e. softness for free. */
#stage-wrap{
  position:absolute;inset:-2.5%;
  will-change:transform;
  transform:translate3d(calc(var(--px)*1px),calc(var(--py)*1px),0) scale(1.02);
}
#stage-video{
  width:100%;height:100%;object-fit:cover;
  /* LQIP shows instantly, video paints over it */
  background:center/cover no-repeat;
}
/* No darkening layers over the video at all — no veil, no vignette.
   The only thing left is a scroll-energy glow, which adds light, never removes it. */
#stage-veil{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 42%,
    rgba(79,195,247,calc(var(--wave-energy)*.10)) 0%, transparent 62%);
}
#stage-vignette{display:none}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
main,header,footer{position:relative;z-index:1}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
/* Every section is transparent — the wave runs the full height of the page and
   nothing is laid over it to dim it. Legibility now rests entirely on the
   surfaces that carry text (cards, the dashboard) and on text-shadow, neither
   of which darkens the video itself. */
.section{background:transparent}

/* Text sitting straight on the wave keeps its own edge. This is the only
   remaining shadow on the page, and it hugs the glyphs instead of covering
   the frame. */
.section :is(h1,h2,h3,h4,p,span,li,blockquote,cite,strong,em){
  text-shadow:0 1px 16px rgba(5,10,24,.95), 0 0 5px rgba(5,10,24,.8), 0 0 2px rgba(5,10,24,.7);
}
/* …except inside surfaces that already carry their own ground */
.card :is(h1,h2,h3,h4,p,span,li,blockquote,cite,strong,em),
.dash :is(h2,h3,h4,p,span,li,b,u){text-shadow:none}
/* Must out-specify `.section :is(…,em)` above (0,1,1) — a plain `.grad-text`
   rule loses to it, the shadow stays on, and since the glyphs are transparent
   the shadow shows straight through them as dark mud. */
.section .grad-text,
.hero h1 em.grad-text{text-shadow:none}

.eyebrow{
  font-family:var(--ff-mono);font-size:var(--fs-meta);
  letter-spacing:.22em;text-transform:uppercase;color:var(--fin-cyan);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:'';width:22px;height:1px;background:var(--fin-cyan);opacity:.7;
}
.eyebrow.has-dot::before{
  width:7px;height:7px;border-radius:50%;background:var(--fin-signal);
  box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
.h2{font-size:var(--fs-h2);max-width:20ch}
.lead{color:var(--fin-bone-dim);max-width:56ch;font-size:1.06rem}
.section-head{display:grid;gap:18px;margin-bottom:clamp(38px,5vw,64px)}
@media(min-width:900px){
  .section-head.is-split{grid-template-columns:1.05fr .95fr;align-items:end;gap:48px}
  .section-head.is-split .lead{justify-self:end}
}
.mono{font-family:var(--ff-mono);font-size:var(--fs-meta);letter-spacing:.08em;color:var(--fin-bone-faint)}
.grad-text{
  /* Runs bone → cyan, not cyan → blue. Against a cyan wave the accent has to be
     *lighter* than the background; a mid-cyan word simply disappears into it,
     and no amount of shadow fixes a contrast problem.
     Tail stop is --fin-cyan-legible, NOT the general --fin-cyan token — the
     two diverged once --fin-cyan was darkened for UI mood. Measured on canvas:
     plain --fin-cyan here would land at only 1.39× the video's luminance
     behind this element (was 2.1× before darkening); -legible keeps the old,
     verified-safe value. Don't repoint this at --fin-cyan again. */
  background:linear-gradient(105deg,var(--fin-bone) 0%,var(--fin-cyan-hi) 44%,var(--fin-cyan-legible) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* text-shadow paints *behind* background-clip text and just leaks around it,
     so this needs drop-shadow, which follows the glyph alpha instead. */
  /* No filter and no text-shadow here. Applying either to an element that uses
     -webkit-background-clip:text makes Chrome paint the glyphs dark instead of
     showing the gradient through them. Contrast is carried by the gradient
     being lighter than the wave, not by a shadow. */
  text-shadow:none;
}

/* ============================================================
   REVEAL — the core entrance transition
   ============================================================ */
.reveal{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1;transform:none}
.reveal-mask{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.reveal-mask.is-in{clip-path:inset(0 0 0 0)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 32px;border-radius:100px;
  font-weight:600;font-size:1rem;letter-spacing:.005em;line-height:1;
  border:1px solid transparent;position:relative;overflow:hidden;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out),
             box-shadow var(--t-mid) var(--ease-out),
             border-color var(--t-fast) linear,
             background-color var(--t-fast) linear,
             color var(--t-fast) linear;
}
.btn:focus-visible{outline:2px solid var(--fin-cyan-hi);outline-offset:3px}

/* PRIMARY — solid, bright, lifted. Reads as the one thing to press. */
.btn-primary{
  background:linear-gradient(100deg,var(--fin-cyan-hi),var(--fin-cyan) 48%,var(--fin-blue));
  color:#03101F;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(3,16,31,.18),
    0 10px 26px -10px rgba(79,195,247,.75),
    0 2px 6px -2px rgba(3,16,31,.6);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(3,16,31,.18),
    0 20px 42px -12px rgba(79,195,247,.85),
    0 3px 8px -3px rgba(3,16,31,.6);
}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(3,16,31,.35),0 3px 10px -6px rgba(79,195,247,.7);
}
/* shine sweep */
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .75s var(--ease-out)}

/* SECONDARY — a real surface, not a hairline. Clearly a second button. */
.btn-ghost{
  background:rgba(232,240,250,.09);
  border-color:rgba(232,240,250,.28);
  color:var(--fin-bone);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 10px -6px rgba(3,16,31,.8);
}
.btn-ghost:hover{
  transform:translateY(-3px);
  background:rgba(127,227,255,.16);
  border-color:var(--fin-cyan);
  color:var(--fin-cyan-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 30px -14px rgba(79,195,247,.5);
}
.btn-ghost:active{transform:translateY(0);background:rgba(127,227,255,.1)}

.btn .arr{transition:transform var(--t-mid) var(--ease-out)}
.btn:hover .arr{transform:translateX(5px)}
/* nav button stays compact but keeps a comfortable target */
.nav-cta .btn{min-height:44px;padding:0 22px;font-size:.92rem}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background-color var(--t-mid) linear,
             border-color var(--t-mid) linear,
             backdrop-filter var(--t-mid) linear,
             transform var(--t-mid) var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,10,24,.72);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--fin-line);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav-inner{display:flex;align-items:center;gap:28px;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--ff-display);font-size:1.22rem;letter-spacing:.01em}
.logo-mark{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  background:linear-gradient(140deg,var(--fin-cyan-hi),var(--fin-blue));
  display:grid;place-items:center;
  box-shadow:0 4px 18px -6px var(--fin-glow);
}
.logo-mark svg{width:17px;height:17px}
.nav-links{display:none;gap:26px;margin-left:auto}
@media(min-width:980px){.nav-links{display:flex}}
.nav-links a{
  font-size:.9rem;color:var(--fin-bone-dim);position:relative;padding-block:6px;
  transition:color var(--t-fast) linear;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--fin-cyan);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease-out);
}
.nav-links a:hover,.nav-links a.is-active{color:var(--fin-bone)}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-cta{margin-left:auto}
@media(min-width:980px){.nav-cta{margin-left:0}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding-block:140px 90px;position:relative;
}
/* no scrim — the hero shows the wave undimmed, text relies on text-shadow */
.hero-grid{display:grid;gap:34px;max-width:64ch}
.hero h1{font-size:var(--fs-display);font-weight:300}
.hero h1 em{font-style:normal;font-weight:500}
.hero .lead{font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:50ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.trust{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px 26px;
  margin-top:14px;padding-top:26px;border-top:1px solid var(--fin-line);
}
@media(min-width:760px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust div span{display:block;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fin-bone-faint);margin-bottom:5px}
.trust div strong{font-family:var(--ff-display);font-weight:400;font-size:1.16rem;color:var(--fin-bone)}
.scroll-cue{
  position:absolute;left:var(--gutter);bottom:34px;
  display:flex;align-items:center;gap:12px;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fin-bone-faint);
}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--fin-cyan),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;inset:0;background:var(--fin-cyan-hi);animation:trickle 2.2s var(--ease-io) infinite}
@keyframes trickle{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============================================================
   WAVE DIVIDER — draws itself as you scroll
   ============================================================ */
.wave-div{display:block;width:100%;height:70px;overflow:visible}
.wave-div path{
  fill:none;stroke:var(--fin-cyan);stroke-width:1.2;opacity:.5;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.wave-div path.b{stroke:var(--fin-blue);opacity:.34;transform:translateY(9px)}
.wave-div path.c{stroke:var(--fin-cyan-hi);opacity:.2;transform:translateY(-8px)}

/* ============================================================
   METRICS
   ============================================================ */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--fin-line)}
@media(min-width:900px){.metrics{grid-template-columns:repeat(4,1fr)}}
.metric{
  background:transparent;
  padding:34px 26px;transition:background-color var(--t-mid) linear;
}
.metric:hover{background:rgba(79,195,247,.07)}
.metric b{display:block;font-family:var(--ff-display);font-weight:400;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;letter-spacing:-.03em}
.metric b .u{font-size:.44em;color:var(--fin-cyan);margin-left:3px;letter-spacing:0}
.metric span{display:block;margin-top:12px;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fin-bone-faint)}
.metric p{margin-top:8px;font-size:.86rem;color:var(--fin-bone-dim);line-height:1.5}

/* ============================================================
   CARDS
   ============================================================ */
/* No backdrop-filter here. Blurring a live, scrubbing, full-screen video behind
   ~20 cards collapses the frame rate and the wave falls seconds behind the
   scroll. Translucency alone carries the glass look at zero compositing cost. */
.card{
  background:linear-gradient(180deg,rgba(20,38,70,.86),rgba(13,26,50,.78));
  border:1px solid var(--fin-line);border-radius:var(--radius);
  padding:28px 26px;position:relative;overflow:hidden;
  transition:transform var(--t-mid) var(--ease-out),
             border-color var(--t-mid) linear,
             box-shadow var(--t-mid) var(--ease-out),
             background-color var(--t-mid) linear;
}
.card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%,rgba(79,195,247,.16),transparent 70%);
  opacity:0;transition:opacity var(--t-mid) linear;
}
.card:hover{transform:translateY(-6px);border-color:var(--fin-line-hi);box-shadow:0 22px 50px -26px rgba(0,0,0,.9),0 0 0 1px rgba(127,227,255,.08)}
.card:hover::before{opacity:1}
.card .idx{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;color:var(--fin-cyan);opacity:.8}
.card h3{font-size:var(--fs-h3);margin-block:14px 10px}
.card p{color:var(--fin-bone-dim);font-size:.93rem;line-height:1.62}
.card .more{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fin-cyan);
}
.card .more .arr{transition:transform var(--t-mid) var(--ease-out)}
.card:hover .more .arr{transform:translateX(5px)}

.grid-2{display:grid;gap:18px}
.grid-3{display:grid;gap:18px}
.grid-4{display:grid;gap:18px}
@media(min-width:700px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* problem cards */
.pain{border-left:2px solid var(--fin-cyan)}
.pain .idx{font-size:1.9rem;font-family:var(--ff-display);letter-spacing:-.02em;color:rgba(79,195,247,.32);line-height:1}

/* service icon */
.svc-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(79,195,247,.1);border:1px solid var(--fin-line);
  transition:background-color var(--t-mid) linear,transform var(--t-mid) var(--ease-out);
}
.card:hover .svc-ico{background:rgba(79,195,247,.2);transform:scale(1.06) rotate(-4deg)}
.svc-ico svg{width:20px;height:20px;stroke:var(--fin-cyan);fill:none;stroke-width:1.6}

/* ============================================================
   PLATFORM — mock dashboard
   ============================================================ */
.platform-grid{display:grid;gap:44px;align-items:center}
@media(min-width:1000px){.platform-grid{grid-template-columns:.9fr 1.1fr;gap:60px}}
.feat-row{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding-block:18px;border-bottom:1px solid var(--fin-line);
  transition:transform var(--t-mid) var(--ease-out);
}
.feat-row:hover{transform:translateX(8px)}
.feat-row .n{font-family:var(--ff-mono);font-size:.72rem;color:var(--fin-cyan);padding-top:4px}
.feat-row h3{font-family:var(--ff-body);font-weight:500;font-size:1rem;margin:0 0 4px}
.feat-row p{font-size:.89rem;color:var(--fin-bone-dim);line-height:1.55}

.dash{
  border:1px solid var(--fin-line);border-radius:var(--radius-lg);
  background:linear-gradient(165deg,rgba(16,32,62,.9),rgba(10,20,40,.86));
  backdrop-filter:blur(14px);overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,1),0 0 0 1px rgba(127,227,255,.05);
  transition:transform var(--t-slow) var(--ease-out);
}
.dash:hover{transform:translateY(-5px)}
.dash-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--fin-line)}
.dash-bar i{width:9px;height:9px;border-radius:50%;background:var(--fin-line);display:block}
.dash-bar .t{margin-left:8px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;color:var(--fin-bone-faint)}
.dash-bar .live{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fin-signal);
}
.dash-bar .live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--fin-signal);animation:pulse 2.4s var(--ease-io) infinite}
.dash-body{padding:20px 18px 22px;display:grid;gap:18px}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{border:1px solid var(--fin-line);border-radius:10px;padding:13px 14px;background:rgba(5,10,24,.5)}
.kpi span{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fin-bone-faint)}
.kpi b{display:block;margin-top:7px;font-family:var(--ff-display);font-weight:400;font-size:1.3rem;letter-spacing:-.02em}
.kpi u{display:block;margin-top:3px;text-decoration:none;font-family:var(--ff-mono);font-size:.66rem;color:var(--fin-signal)}
.kpi u.dn{color:#F87171}
.chart{border:1px solid var(--fin-line);border-radius:10px;padding:16px 14px 10px;background:rgba(5,10,24,.5)}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.chart-head b{font-family:var(--ff-body);font-weight:500;font-size:.85rem}
.chart-head span{font-family:var(--ff-mono);font-size:.66rem;color:var(--fin-bone-faint)}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:96px}
.bars i{
  display:block;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--fin-cyan),rgba(46,123,232,.35));
  height:var(--h);transform-origin:bottom;transform:scaleY(0);
  transition:transform .8s var(--ease-out) var(--d,0ms),filter var(--t-fast) linear;
}
.dash.is-in .bars i{transform:scaleY(1)}
.bars i:nth-child(11),.bars i:nth-child(12){background:linear-gradient(180deg,var(--fin-cyan-hi),rgba(79,195,247,.4))}
.spark{margin-top:2px}
.spark path{fill:none;stroke:var(--fin-cyan-hi);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out) .35s}
.dash.is-in .spark path{stroke-dashoffset:0}
.spark .fill{fill:url(#sparkgrad);stroke:none;opacity:0;transition:opacity .7s linear .9s}
.dash.is-in .spark .fill{opacity:.5}
.tbl{border:1px solid var(--fin-line);border-radius:10px;overflow:hidden;background:rgba(5,10,24,.5)}
.tbl div{display:grid;grid-template-columns:1.6fr 1fr .8fr;gap:10px;padding:10px 14px;font-size:.79rem;border-bottom:1px solid var(--fin-line)}
.tbl div:last-child{border-bottom:0}
.tbl div.hd{font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fin-bone-faint)}
.tbl div:not(.hd){transition:background-color var(--t-fast) linear}
.tbl div:not(.hd):hover{background:rgba(79,195,247,.06)}
.tbl b{font-weight:500;font-family:var(--ff-mono);font-size:.76rem}
.tbl .up{color:var(--fin-signal)}
.tbl .dn{color:#F87171}

/* ============================================================
   TIMELINE
   ============================================================ */
.steps{position:relative;display:grid;gap:0}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:24px}}
.steps::before{
  content:'';position:absolute;left:11px;top:6px;bottom:6px;width:1px;
  background:var(--fin-line);
}
@media(min-width:900px){
  .steps::before{left:0;right:0;top:11px;bottom:auto;width:auto;height:1px}
}
.steps .line{
  /* Laid out at FULL track length always (bottom:6px mirrors ::before, not
     height:0) — progress is drawn with transform:scaleY, not by animating
     height. Animating height/width forces layout on every scroll-driven
     frame; scaleY/scaleX is compositor-only. */
  position:absolute;left:11px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--fin-cyan),var(--fin-blue));
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.2s var(--ease-out);
}
@media(min-width:900px){
  .steps .line{left:0;right:0;top:11px;bottom:auto;height:1px;width:auto;
    background:linear-gradient(90deg,var(--fin-cyan),var(--fin-blue));
    transform:scaleX(0);transform-origin:left;
    transition:transform 1.2s var(--ease-out);}
}
.step{padding:0 0 34px 42px;position:relative}
@media(min-width:900px){.step{padding:38px 18px 0 0}}
.step .dot{
  position:absolute;left:4px;top:4px;width:15px;height:15px;border-radius:50%;
  background:var(--fin-ink-900);border:1px solid var(--fin-line);
  display:grid;place-items:center;
  transition:border-color var(--t-mid) linear,box-shadow var(--t-mid) linear;
}
@media(min-width:900px){.step .dot{left:-3px;top:4px}}
.step .dot::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--fin-line);transition:background-color var(--t-mid) linear}
.step.is-in .dot{border-color:var(--fin-cyan);box-shadow:0 0 0 5px rgba(79,195,247,.1)}
.step.is-in .dot::after{background:var(--fin-cyan)}
.step .n{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;color:var(--fin-cyan)}
.step h3{font-size:1.08rem;font-family:var(--ff-body);font-weight:500;margin-block:9px 8px}
.step p{font-size:.89rem;color:var(--fin-bone-dim);line-height:1.6}

/* ============================================================
   AKADEMI
   ============================================================ */
.prog{display:flex;flex-direction:column}
.prog .tag{
  align-self:flex-start;font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;border:1px solid var(--fin-line);color:var(--fin-cyan);
}
.prog ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.prog li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:.87rem;color:var(--fin-bone-dim)}
.prog li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--fin-cyan);margin-top:8px}
.prog .meta{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--fin-line);
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;color:var(--fin-bone-faint);
}
.prog .meta b{color:var(--fin-bone);font-size:.95rem;letter-spacing:0}

/* ============================================================
   CASES
   ============================================================ */
.case .res{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(2.1rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.03em;
}
.case .res .u{font-size:.4em;color:var(--fin-cyan);margin-left:4px}
.case .sect{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fin-bone-faint);margin-bottom:16px;display:block}
.case blockquote{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--fin-line);
  font-size:.9rem;color:var(--fin-bone-dim);font-style:italic;line-height:1.62;
}
.case cite{
  display:block;margin-top:12px;font-style:normal;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;color:var(--fin-bone-faint);
}

/* ============================================================
   TEAM
   ============================================================ */
.person{text-align:left}
.avatar{
  width:60px;height:60px;border-radius:16px;display:grid;place-items:center;
  font-family:var(--ff-display);font-size:1.3rem;letter-spacing:.02em;
  background:linear-gradient(150deg,rgba(79,195,247,.22),rgba(46,123,232,.12));
  border:1px solid var(--fin-line);color:var(--fin-cyan-hi);
  transition:transform var(--t-mid) var(--ease-out),border-color var(--t-mid) linear;
}
.card:hover .avatar{transform:translateY(-3px) scale(1.04);border-color:var(--fin-line-hi)}
.person h3{font-family:var(--ff-body);font-weight:500;font-size:1rem;margin-block:16px 3px}
.person .role{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fin-cyan);display:block}
.person p{margin-top:12px;font-size:.86rem}

/* ============================================================
   INSIGHTS
   ============================================================ */
.post .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.post .cat{font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fin-cyan);padding:4px 10px;border:1px solid var(--fin-line);border-radius:100px}
.post .rt{font-family:var(--ff-mono);font-size:.68rem;color:var(--fin-bone-faint)}
.post h3{font-size:1.08rem;font-family:var(--ff-body);font-weight:500;line-height:1.4;margin-block:18px 10px}

/* ============================================================
   PRICING
   ============================================================ */
.tier{display:flex;flex-direction:column}
.tier.is-featured{
  border-color:var(--fin-line-hi);
  background:linear-gradient(180deg,rgba(79,195,247,.13),rgba(16,32,62,.4));
}
.tier .badge{
  position:absolute;top:0;right:22px;
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--fin-cyan-hi),var(--fin-cyan));color:var(--fin-ink-900);
  padding:5px 12px;border-radius:0 0 8px 8px;font-weight:500;
}
.tier .price{display:flex;align-items:baseline;gap:6px;margin-block:18px 6px}
.tier .price b{font-family:var(--ff-display);font-weight:400;font-size:2.2rem;letter-spacing:-.03em}
.tier .price span{font-family:var(--ff-mono);font-size:.72rem;color:var(--fin-bone-faint)}
.tier ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.tier li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:.88rem;color:var(--fin-bone-dim);line-height:1.5}
.tier li svg{width:15px;height:15px;stroke:var(--fin-cyan);fill:none;stroke-width:2;margin-top:4px}
.tier .btn{margin-top:26px;width:100%;justify-content:center}
.tier-foot{margin-top:auto;padding-top:8px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--fin-line)}
.faq-item{border-bottom:1px solid var(--fin-line)}
.faq-q{
  width:100%;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:24px 0;text-align:left;font-size:1.02rem;font-weight:400;
  transition:color var(--t-fast) linear;
}
.faq-q:hover{color:var(--fin-cyan-hi)}
.faq-q .ic{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  border:1px solid var(--fin-line);display:grid;place-items:center;position:relative;
  transition:border-color var(--t-mid) linear,transform var(--t-mid) var(--ease-out),background-color var(--t-mid) linear;
}
.faq-q .ic::before,.faq-q .ic::after{
  content:'';position:absolute;background:var(--fin-cyan);
  transition:transform var(--t-mid) var(--ease-out),opacity var(--t-mid) linear;
}
.faq-q .ic::before{width:11px;height:1px}
.faq-q .ic::after{width:1px;height:11px}
.faq-item.is-open .faq-q .ic{border-color:var(--fin-line-hi);background:rgba(79,195,247,.1);transform:rotate(180deg)}
.faq-item.is-open .faq-q .ic::after{transform:scaleY(0);opacity:0}
/* the smooth height transition */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mid) var(--ease-io)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{
  padding-bottom:26px;max-width:74ch;color:var(--fin-bone-dim);font-size:.94rem;
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--t-mid) linear,transform var(--t-mid) var(--ease-out);
}
.faq-item.is-open .faq-a p{opacity:1;transform:none;transition-delay:.1s}

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
/* ============================================================
   PENANDA ZONA PRODUK
   Halaman menjual tiga hal yang berbeda, bukan satu hal dengan tiga
   harga. Penanda ini yang memberi tahu pembaca di zona mana ia berada.
   ============================================================ */
.zone-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fin-cyan);
  padding:7px 14px;border:1px solid var(--fin-line-hi);border-radius:100px;
  background:rgba(79,195,247,.07);
}
.illus-note{
  margin-top:12px;max-width:56ch;
  font-family:var(--ff-mono);font-size:.7rem;line-height:1.7;
  letter-spacing:.04em;color:var(--fin-bone-faint);
  padding-left:12px;border-left:2px solid var(--fin-line-hi);
}

/* ============================================================
   PENAWARAN NON-LANGGANAN (jasa aplikasi, sewa tools)
   Sengaja BUKAN .tier. Kartu berkolom sejajar memaksa pembaca
   membandingkan; produk ini tidak sebanding dengan paket kelas.
   ============================================================ */
.offer{display:grid;gap:32px;margin-top:8px}
@media(min-width:940px){.offer{grid-template-columns:1.35fr .65fr;gap:52px;align-items:start}}
.offer-side{
  border:1px solid var(--fin-line-hi);border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(20,38,70,.9),rgba(13,26,50,.8));
  padding:28px 26px;display:grid;gap:14px;align-content:start;
}
.offer-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.offer-price b{font-family:var(--ff-display);font-weight:400;font-size:1.9rem;letter-spacing:-.03em}
.offer-price span{font-family:var(--ff-mono);font-size:.68rem;color:var(--fin-bone-faint)}
.offer-note{font-size:.87rem;color:var(--fin-bone-dim);line-height:1.62}
.offer-note b{color:var(--fin-bone);font-weight:500}

/* ============================================================
   SESI BULANAN + COUNTDOWN
   ============================================================ */
.session-card{
  display:grid;gap:34px;
  border:1px solid var(--fin-line-hi);border-radius:var(--radius-lg);
  background:linear-gradient(140deg,rgba(20,38,70,.9),rgba(13,26,50,.82));
  padding:clamp(28px,4vw,48px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,1);
}
@media(min-width:940px){.session-card{grid-template-columns:1.25fr .75fr;gap:52px;align-items:center}}
.session-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.session-list li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:.9rem;color:var(--fin-bone-dim)}
.session-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--fin-cyan);margin-top:8px}
.session-side{
  display:grid;gap:16px;align-content:start;
  border-left:0;border-top:1px solid var(--fin-line);padding-top:26px;
}
@media(min-width:940px){.session-side{border-top:0;border-left:1px solid var(--fin-line);padding:0 0 0 40px}}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.cd-unit{
  text-align:center;padding:12px 4px;border-radius:12px;
  background:rgba(5,10,24,.62);border:1px solid var(--fin-line);
}
.cd-unit b{
  display:block;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cd-unit span{
  display:block;margin-top:6px;font-family:var(--ff-mono);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fin-bone-faint);
}
.session-date{font-size:.7rem;letter-spacing:.1em;color:var(--fin-bone-faint)}
.session-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.session-price b{font-family:var(--ff-display);font-weight:400;font-size:2.4rem;letter-spacing:-.03em}
.session-price b .u{font-size:.42em;color:var(--fin-cyan);margin-left:2px}
.session-price span{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;color:var(--fin-bone-faint)}
.reg-form{display:grid;gap:10px;margin-top:4px}
.reg-form .tify-input{padding:11px 14px;font-size:.9rem}
.reg-form .btn{margin-top:4px}
.reg-form .lead-status{text-align:left;font-size:.82rem;margin-top:2px}
/* social proof — hidden until the count actually loads, so a failed fetch
   never leaves a bare "0 orang sudah mengikuti" on the page */
.joined{
  display:flex;align-items:center;gap:12px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--fin-line);
}
.joined[hidden]{display:none}
.joined-dots{display:flex}
.joined-dots i{
  width:26px;height:26px;border-radius:50%;margin-left:-8px;
  background:linear-gradient(140deg,var(--fin-cyan-hi),var(--fin-blue));
  border:2px solid var(--fin-ink-900);
}
.joined-dots i:first-child{margin-left:0}
.joined p{font-size:.86rem;color:var(--fin-bone-dim)}
.joined p b{
  font-family:var(--ff-display);font-weight:400;font-size:1.25rem;
  color:var(--fin-bone);letter-spacing:-.02em;
}

/* ============================================================
   CHAT WIDGET
   ============================================================ */
.chat-launcher{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border-radius:100px;cursor:pointer;
  font-weight:600;font-size:.92rem;color:#03101F;
  background:linear-gradient(100deg,var(--fin-cyan-hi),var(--fin-cyan) 52%,var(--fin-blue));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 28px -10px rgba(79,195,247,.8);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-mid) var(--ease-out);
}
.chat-launcher:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 40px -12px rgba(79,195,247,.9)}
.chat-launcher svg{width:18px;height:18px}
.chat-launcher[aria-expanded="true"]{opacity:0;pointer-events:none}

.chat-panel{
  position:fixed;right:22px;bottom:22px;z-index:71;
  width:min(380px,calc(100vw - 32px));
  display:flex;flex-direction:column;
  max-height:min(560px,calc(100vh - 44px));
  background:rgba(10,20,40,.94);
  border:1px solid var(--fin-line-hi);border-radius:var(--radius-lg);
  box-shadow:0 40px 90px -40px rgba(0,0,0,1);
  overflow:hidden;
}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--fin-line)}
.chat-title{font-family:var(--ff-display);font-size:1.02rem}
.chat-live{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fin-signal);display:inline-flex;align-items:center;gap:6px;
}
.chat-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--fin-signal)}
.chat-close{margin-left:auto;font-size:1.5rem;line-height:1;color:var(--fin-bone-dim);cursor:pointer;padding:0 4px}
.chat-close:hover{color:var(--fin-bone)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:grid;gap:12px;align-content:start}
.chat-msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:.9rem;line-height:1.55;white-space:pre-wrap}
.chat-msg.is-user{justify-self:end;background:linear-gradient(100deg,var(--fin-cyan),var(--fin-blue));color:#03101F;font-weight:500}
.chat-msg.is-bot{justify-self:start;background:rgba(22,41,75,.9);border:1px solid var(--fin-line);color:var(--fin-bone)}
.chat-msg.is-err{justify-self:start;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#FCA5A5}
.chat-typing{justify-self:start;display:inline-flex;gap:4px;padding:13px 14px}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--fin-cyan);animation:blink 1.2s var(--ease-io) infinite}
.chat-typing i:nth-child(2){animation-delay:.18s}
.chat-typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chat-input-row{display:flex;gap:9px;padding:12px 14px 6px;border-top:1px solid var(--fin-line)}
.chat-input-row .btn{min-height:44px;padding:0 17px;flex:0 0 auto}
.chat-disclaimer{
  padding:0 14px 12px;text-align:center;
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.08em;color:var(--fin-bone-faint);
}
@media (prefers-reduced-motion:reduce){.chat-typing i{animation:none;opacity:.6}}

/* ============================================================
   LEAD FORM
   ============================================================ */
.lead-form{max-width:680px;margin:34px auto 0;display:grid;gap:16px;text-align:left}
.lead-row{display:grid;gap:16px}
@media(min-width:680px){.lead-row{grid-template-columns:1fr 1fr}}
.lead-field{display:grid;gap:7px}
.lead-field>span{
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fin-bone-faint);
}
.lead-field>span i{font-style:normal;opacity:.7;text-transform:none;letter-spacing:.04em}
.tify-input{
  width:100%;font:inherit;font-size:.95rem;color:var(--fin-bone);
  background:rgba(5,10,24,.72);
  border:1px solid var(--fin-line);border-radius:12px;
  padding:13px 15px;resize:vertical;
  transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear;
}
.tify-input::placeholder{color:var(--fin-bone-faint)}
.tify-input:focus{
  outline:none;border-color:var(--fin-cyan);
  background:rgba(5,10,24,.86);
  box-shadow:0 0 0 3px rgba(79,195,247,.16);
}
.tify-input[aria-invalid="true"]{border-color:#F87171}
/* off-screen rather than display:none — some bots skip hidden inputs */
.lead-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:6px}
.lead-form.is-sending .btn-primary{opacity:.65;pointer-events:none}
.lead-status{
  min-height:1.3em;text-align:center;font-size:.9rem;margin-top:4px;
  color:var(--fin-bone-dim);
}
.lead-status.is-ok{color:var(--fin-signal)}
.lead-status.is-err{color:#F87171}

.final{text-align:center}
.final h2{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:300;max-width:16ch;margin-inline:auto}
.final .lead{margin-inline:auto;text-align:center}
.final-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.final .scrim{display:none}
.final .container{position:relative}

.footer{background:transparent;border-top:1px solid var(--fin-line);padding-block:56px 30px}
.foot-grid{display:grid;gap:34px}
@media(min-width:840px){.foot-grid{grid-template-columns:1.4fr repeat(3,1fr);gap:44px}}
.foot-col h3{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fin-bone-faint);font-weight:400;margin-bottom:16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-col a{font-size:.89rem;color:var(--fin-bone-dim);transition:color var(--t-fast) linear}
.foot-col a:hover{color:var(--fin-cyan-hi)}
.foot-bot{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--fin-line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;color:var(--fin-bone-faint);
}
.disclaimer{
  margin-top:18px;font-size:.74rem;line-height:1.6;color:var(--fin-bone-faint);
  max-width:80ch;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
#progress{
  position:fixed;top:0;left:0;height:2px;z-index:60;
  width:100%;transform:scaleX(var(--p,0));transform-origin:left;
  background:linear-gradient(90deg,var(--fin-cyan-hi),var(--fin-cyan) 40%,var(--fin-blue));
  box-shadow:0 0 14px var(--fin-glow);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .reveal-mask{clip-path:none}
  #stage-wrap{transform:none}
  .bars i{transform:scaleY(1)}
  .spark path{stroke-dashoffset:0}
  .wave-div path{stroke-dashoffset:0}
  .steps .line{display:none}
}

/* ============================================================
   MULTI-HALAMAN
   Ditambahkan saat situs dipecah dari satu halaman panjang jadi
   satu halaman per produk.
   ============================================================ */

/* Hero halaman dalam — ringkas, bukan 100svh, supaya isi halaman
   produk langsung terlihat tanpa scroll dulu. */
.page-hero{padding-block:150px 60px;position:relative}
.page-hero .container{max-width:960px}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:300;max-width:20ch}
.page-hero .lead{margin-top:20px;font-size:clamp(1rem,1.4vw,1.14rem)}
.page-hero .hero-actions{margin-top:30px}

/* Ringkasan tiga produk di home. Kartu ini menuju halaman lain,
   jadi seluruh kartunya bisa diklik. */
.prod-grid{display:grid;gap:18px}
@media(min-width:900px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
.prod{
  display:flex;flex-direction:column;position:relative;
  transition:transform var(--t-mid) var(--ease-out),border-color var(--t-mid) linear,
             box-shadow var(--t-mid) var(--ease-out);
}
.prod:hover{transform:translateY(-6px);border-color:var(--fin-line-hi);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.9)}
.prod .zone-tag{align-self:flex-start;margin-bottom:18px}
.prod h3{font-size:1.22rem;margin-bottom:10px}
.prod .prod-price{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--fin-line);
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;color:var(--fin-bone-faint);
}
.prod .prod-price b{
  display:block;margin-top:6px;font-family:var(--ff-display);font-weight:400;
  font-size:1.5rem;letter-spacing:-.02em;color:var(--fin-bone);
}
/* Seluruh kartu jadi target klik, tapi tautannya tetap satu — sehingga
   pembaca layar mengumumkannya sekali, bukan tiga kali. */
.prod .prod-link::after{content:'';position:absolute;inset:0}

/* Artikel wawasan */
.article{max-width:72ch}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:48px;margin-bottom:16px}
.article h3{font-size:1.12rem;font-family:var(--ff-body);font-weight:600;margin-top:30px;margin-bottom:10px}
.article p{color:var(--fin-bone-dim);margin-bottom:18px;line-height:1.75}
.article ul,.article ol{color:var(--fin-bone-dim);margin:0 0 20px;padding-left:22px;line-height:1.75}
.article li{margin-bottom:9px}
.article strong{color:var(--fin-bone);font-weight:600}
.article-meta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:8px;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fin-bone-faint);
}
.article-cta{
  margin-top:52px;padding:26px;border:1px solid var(--fin-line-hi);border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(20,38,70,.9),rgba(13,26,50,.8));
}
.article-cta p{margin-bottom:18px}

/* Tabel tarif sewa */
.rate-table{border:1px solid var(--fin-line);border-radius:var(--radius);overflow:hidden}
.rate-table div{
  display:grid;grid-template-columns:1.7fr .8fr 1fr;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--fin-line);font-size:.9rem;align-items:center;
}
.rate-table div:last-child{border-bottom:0}
.rate-table div.hd{
  font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fin-bone-faint);
}
.rate-table b{font-family:var(--ff-mono);font-size:.85rem;font-weight:500}
.rate-table span.muted{color:var(--fin-bone-dim);font-size:.84rem}
@media(max-width:640px){
  .rate-table div{grid-template-columns:1fr auto;gap:6px 12px}
  .rate-table div.hd{display:none}
  .rate-table span.muted{grid-column:1/-1}
}

/* ============================================================
   POSISI KOMPETITIF
   Ditambahkan setelah riset kompetitor: bootcamp menjual alih
   profesi, Tify menjual kemampuan di pekerjaan yang sudah ada.
   Tabel ini yang menjelaskan bedanya.
   ============================================================ */
.vs-table{
  border:1px solid var(--fin-line);border-radius:var(--radius-lg);overflow:hidden;
  /* Tabel data butuh alas sendiri. Tanpa ini gelombang menembus baris tengah
     dan kolom pembanding jadi tidak terbaca. */
  background:linear-gradient(180deg,rgba(20,38,70,.88),rgba(13,26,50,.82));
}
.vs-table .row{
  display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--fin-line);font-size:.92rem;align-items:start;
}
.vs-table .row:last-child{border-bottom:0}
.vs-table .row.hd{
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fin-bone-faint);
  background:rgba(5,10,24,.5);
}
.vs-table .row.hd .us{color:var(--fin-cyan)}
.vs-table .lbl{color:var(--fin-bone-dim)}
.vs-table .us{color:var(--fin-bone);font-weight:500}
.vs-table .them{color:var(--fin-bone-dim)}
@media(max-width:720px){
  .vs-table .row{grid-template-columns:1fr;gap:4px;padding:14px 16px}
  .vs-table .row.hd{display:none}
  .vs-table .lbl{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.13em;
    text-transform:uppercase;color:var(--fin-bone-faint);margin-bottom:4px}
  .vs-table .us::before{content:'Tify — ';color:var(--fin-cyan);font-family:var(--ff-mono);font-size:.7rem}
  .vs-table .them::before{content:'Bootcamp — ';color:var(--fin-bone-faint);font-family:var(--ff-mono);font-size:.7rem}
}
.honest-note{
  margin-top:20px;padding:18px 20px;border-radius:var(--radius);
  border:1px solid var(--fin-line-hi);background:rgba(79,195,247,.06);
  font-size:.9rem;color:var(--fin-bone-dim);line-height:1.65;max-width:70ch;
}
.honest-note b{color:var(--fin-bone)}

/* Modul kurikulum dengan jam belajar */
.modul{display:grid;gap:16px}
@media(min-width:900px){.modul{grid-template-columns:repeat(3,1fr)}}
.modul-col{border:1px solid var(--fin-line);border-radius:var(--radius);padding:24px 22px;background:rgba(13,26,50,.6)}
.modul-col h3{font-size:1.08rem;margin-bottom:4px}
.modul-col .jam{
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fin-cyan);margin-bottom:16px;display:block;
}
.modul-col ol{list-style:none;counter-reset:m;margin:0;padding:0;display:grid;gap:12px}
.modul-col li{counter-increment:m;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:baseline;font-size:.88rem;color:var(--fin-bone-dim)}
.modul-col li::before{
  content:counter(m,decimal-leading-zero);font-family:var(--ff-mono);
  font-size:.66rem;color:var(--fin-cyan);opacity:.75;
}
.modul-col li .jm{font-family:var(--ff-mono);font-size:.68rem;color:var(--fin-bone-faint);white-space:nowrap}
.modul-out{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--fin-line);
  font-size:.86rem;color:var(--fin-bone-dim);
}
.modul-out b{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fin-bone-faint);margin-bottom:6px}

/* Jaminan + jadwal batch */
.guarantee{
  display:grid;gap:18px;align-items:center;
  border:1px solid var(--fin-line-hi);border-radius:var(--radius-lg);
  background:linear-gradient(140deg,rgba(52,211,153,.09),rgba(13,26,50,.75));
  padding:28px 26px;
}
@media(min-width:800px){.guarantee{grid-template-columns:auto 1fr;gap:28px}}
.guarantee .seal{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--fin-signal);background:rgba(52,211,153,.12);
}
.guarantee .seal svg{width:28px;height:28px;stroke:var(--fin-signal);fill:none;stroke-width:1.7}
.guarantee h3{font-size:1.2rem;margin-bottom:8px}
.guarantee p{color:var(--fin-bone-dim);font-size:.93rem;line-height:1.65;max-width:66ch}

.batch-list{display:grid;gap:10px;margin-top:6px}
.batch-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 16px;border:1px solid var(--fin-line);border-radius:12px;
  background:rgba(5,10,24,.45);font-size:.9rem;
}
.batch-row.is-next{border-color:var(--fin-line-hi);background:rgba(79,195,247,.08)}
.batch-row .when{font-weight:500}
.batch-row .tag{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fin-bone-faint);
}
.batch-row.is-next .tag{color:var(--fin-cyan)}

/* Cara bayar */
.pay-grid{display:grid;gap:12px;margin-top:8px}
@media(min-width:700px){.pay-grid{grid-template-columns:repeat(2,1fr)}}
.pay-item{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:15px 17px;border:1px solid var(--fin-line);border-radius:12px;
  background:rgba(5,10,24,.45);
}
.pay-item svg{width:17px;height:17px;stroke:var(--fin-cyan);fill:none;stroke-width:1.8;margin-top:3px}
.pay-item b{display:block;font-size:.92rem;font-weight:500;margin-bottom:3px}
.pay-item span{font-size:.84rem;color:var(--fin-bone-dim);line-height:1.55}

/* ============================================================
   ADMIN — panel konten
   Halaman kerja internal, bukan marketing. Latar rata datar (bukan
   video), fokus ke keterbacaan tabel dan form, bukan gerak.
   ============================================================ */
body.is-admin{background:var(--fin-ink-900)}
body.is-admin #stage{display:none}
.admin-shell{max-width:1100px;margin:0 auto;padding:100px 24px 80px}
.admin-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.admin-head h1{font-size:1.7rem;font-weight:400}
.admin-head .mono{color:var(--fin-bone-faint)}

.admin-gate{max-width:420px;margin:120px auto;display:grid;gap:14px;text-align:center}
.admin-gate p{color:var(--fin-bone-dim);font-size:.9rem}
.admin-gate .tify-input{text-align:center}
#admin-token-err{min-height:1.3em;font-size:.85rem;color:#F87171}

.admin-layout{display:grid;gap:24px}
@media(min-width:900px){.admin-layout{grid-template-columns:220px 1fr}}
.admin-sidebar{display:grid;gap:6px;align-content:start}
.admin-col-btn{
  text-align:left;padding:10px 14px;border-radius:10px;font-size:.87rem;
  color:var(--fin-bone-dim);border:1px solid transparent;
  display:flex;justify-content:space-between;gap:8px;
}
.admin-col-btn:hover{background:rgba(79,195,247,.06);color:var(--fin-bone)}
.admin-col-btn.is-active{background:rgba(79,195,247,.12);border-color:var(--fin-line-hi);color:var(--fin-bone);font-weight:500}
.admin-count{font-family:var(--ff-mono);font-size:.72rem;color:var(--fin-bone-faint)}

.admin-panel{min-width:0}
.admin-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.admin-panel-head h2{font-size:1.15rem;font-weight:500;font-family:var(--ff-body)}
.admin-empty{color:var(--fin-bone-faint);font-size:.9rem;padding:20px 0}

.admin-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 16px;border:1px solid var(--fin-line);border-radius:12px;margin-bottom:8px;
  background:rgba(13,26,50,.5);
}
.admin-row.is-draft{border-style:dashed;opacity:.78}
.admin-row-main{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.admin-row-main b{font-size:.92rem;font-weight:500}
.admin-slug{font-family:var(--ff-mono);font-size:.7rem;color:var(--fin-bone-faint)}
.admin-badge{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fin-cyan);border:1px solid var(--fin-line-hi);border-radius:100px;padding:2px 8px;
}
.admin-row-actions{display:flex;gap:8px;flex:0 0 auto}
.admin-row-actions button{
  font-size:.8rem;padding:7px 12px;border-radius:8px;border:1px solid var(--fin-line);color:var(--fin-bone-dim);
}
.admin-row-actions button:hover{border-color:var(--fin-line-hi);color:var(--fin-bone)}
.admin-row-actions .admin-danger:hover{border-color:#F87171;color:#F87171}

.admin-editor{
  margin-top:20px;padding:22px;border:1px solid var(--fin-line-hi);border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(20,38,70,.9),rgba(13,26,50,.85));display:grid;gap:14px;
}
.admin-editor h3{font-size:1.05rem;font-weight:500;font-family:var(--ff-body)}
.admin-field{display:grid;gap:6px}
.admin-field span{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fin-bone-faint)}
.admin-field textarea{resize:vertical;font-family:var(--ff-mono);font-size:.83rem}
.admin-check{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--fin-bone-dim)}
.admin-editor-actions{display:flex;gap:12px}
.admin-form-status{min-height:1.3em;font-size:.85rem;color:var(--fin-bone-dim)}
.admin-form-status.is-ok{color:var(--fin-signal)}
.admin-form-status.is-err{color:#F87171}
.admin-status{min-height:1.3em;font-size:.85rem;color:var(--fin-bone-dim);margin-bottom:12px}
.admin-status.is-err{color:#F87171}

/* Mode demo — pita peringatan supaya tidak ketuker dengan sesi bertoken asli */
.admin-demo-banner{
  margin-bottom:20px;padding:12px 16px;border-radius:10px;
  border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.08);
  color:#FBBF24;font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.02em;
}