/* ==========================================================================
   RUDDON MEDIA — Landing "Under Construction"
   Diselaraskan dengan papan Illustrator:
     · desktop / laptop  1440 x 900
     · telefon             390 x 844
   Dwibahasa BM/EN · mod gelap + cerah
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · TOKEN
   -------------------------------------------------------------------------- */

:root{
  --rm-blue: #1668E3;
  --rm-sky:  #5AA9F2;
  --rm-ok:   #3AD08A;
  --rm-err:  #E2574C;

  --font: "Avenir Next", "Jost", "Helvetica Neue", Inter, Arial, sans-serif;

  /* susun atur — nisbah diambil terus dari papan 1440x900 */
  --pad: clamp(22px, 8.2vw, 118px);
  --col: 540px;                       /* lebar bar kemajuan + lajur kad */

  /* jarak menegak (mengecut ikut tinggi tetingkap) */
  --s1: clamp(14px, 2.4vh, 30px);     /* eyebrow → tajuk   (231→274) */
  --s2: clamp(16px, 2.8vh, 36px);     /* tajuk   → garis   (434→462) */
  --s3: clamp(14px, 2.3vh, 28px);     /* garis   → perenggan (466→493) */
  --s4: clamp(20px, 3.6vh, 44px);     /* perenggan → borang (537→574) */
  --s5: clamp(22px, 3.9vh, 48px);     /* nota    → kemajuan (654→693) */
  --s6: clamp(24px, 4.4vh, 54px);     /* kemajuan → kad     (709→762) */

  --px: 0px; --py: 0px;
  --sx: 50%; --sy: 40%;
}

/* ---------- MOD GELAP (papan 0 / 2) ---------- */
:root, :root[data-theme="dark"]{
  color-scheme: dark;

  --bg-base:  #071B31;
  --ring-c:   #0F3055;
  --sig-c:    #12406F;
  --wm-body:  #0A2440;
  --wm-arc-a: #103A63;
  --wm-arc-b: #17538F;
  --stripe-a: #123D69;
  --stripe-b: #0E2E50;
  --au-1: rgba(22,104,227,.055);
  --au-2: rgba(18,64,111,.028);
  --au-3: rgba(7,27,49,0);

  --txt:    #FFFFFF;
  --txt-2:  #9FBCDF;      /* perenggan, teks pil, kaki kanan */
  --txt-3:  #7B9CC0;      /* nav, nota, label mikro, kaki kiri */
  --accent: #5AA9F1;      /* eyebrow, peratus, sub-logo */
  --ph:     #5F7EA3;

  --line:      #1B3A5E;
  --field-bg:  #0D2843;
  --field-bd:  #26496F;
  --ghost-bd:  #33608F;
  --ghost-txt: #FFFFFF;
  --ghost-icn: #5AA9F2;
  --pill-bd:   #26496F;
  --pill-bg:   rgba(10,37,64,.34);
  --track:     #173B63;
  --wave-dim:  #173B63;

  --logo-ink:    #FFFFFF;
  --logo-accent: #5AA9F1;

  --spot: rgba(22,104,227,.13);
  --grain-op: .035;
  --grain-blend: overlay;
}

/* ---------- MOD CERAH (papan 1 / 3) ---------- */
:root[data-theme="light"]{
  color-scheme: light;

  --bg-base:  #FFFFFF;
  --ring-c:   #E4EDF7;
  --sig-c:    #D3E2F4;
  --wm-body:  #F1F6FC;
  --wm-arc-a: #E7F0FA;
  --wm-arc-b: #DCE9F8;
  --stripe-a: #E2ECF8;
  --stripe-b: #EEF4FB;
  --au-1: rgba(22,104,227,.05);
  --au-2: rgba(90,169,242,.025);
  --au-3: rgba(255,255,255,0);

  --txt:    #092440;
  --txt-2:  #53677D;
  --txt-3:  #61778F;
  --accent: #1568E2;
  --ph:     #92A4B8;

  --line:      #E4EDF7;
  --field-bg:  #F7FAFD;
  --field-bd:  #D8E2EE;
  --ghost-bd:  #C3D4E8;
  --ghost-txt: #092440;
  --ghost-icn: #1668E3;
  --pill-bd:   #D8E2EE;
  --pill-bg:   rgba(255,255,255,.66);
  --track:     #E4EDF7;
  --wave-dim:  #DCE7F5;

  --logo-ink:    #092440;
  --logo-accent: #1568E2;

  --spot: rgba(22,104,227,.07);
  --grain-op: .022;
  --grain-blend: multiply;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg-base);
  color:var(--txt);
  font-family:var(--font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .5s ease, color .5s ease;
}

::selection{ background:var(--rm-blue); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* --------------------------------------------------------------------------
   1 · LATAR HIDUP
   -------------------------------------------------------------------------- */

.bg-wrap{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg{ position:absolute; inset:-2%; width:104%; height:104%; display:block; }
.bg--tall{ display:none; }

.bg-base{ fill:var(--bg-base); transition:fill .5s ease; }
.au-1{ stop-color:var(--au-1); }
.au-2{ stop-color:var(--au-2); }
.au-3{ stop-color:var(--au-3); }

.aurora{
  transform-box:view-box; transform-origin:center;
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  from{ transform:translate(-3%,-2%) scale(1);   opacity:.8; }
  to  { transform:translate(4%,3%)   scale(1.12); opacity:1; }
}

.lyr{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.lyr--far { transform:translate(calc(var(--px) * .18), calc(var(--py) * .18)); }
.lyr--mid { transform:translate(calc(var(--px) * -.5), calc(var(--py) * -.35)); }
.lyr--near{ transform:translate(calc(var(--px) * -1),  calc(var(--py) * -.7)); }

.ring{ fill:none; stroke:var(--ring-c); stroke-width:1.4; transition:stroke .5s ease; }
.ring--m{ stroke-width:1.2; }
.rings{ transform-box:view-box; animation:breathe 11s ease-in-out infinite; }
@keyframes breathe{
  0%,100%{ transform:scale(1);     opacity:.9; }
  50%    { transform:scale(1.035); opacity:1;  }
}

.wm-body{ stroke:var(--wm-body); fill:none; transition:stroke .5s ease; }
.wm-arc { animation:wmPulse 6.5s ease-in-out infinite; }
.wm-arc--2{ animation-delay:.9s; }
@keyframes wmPulse{
  0%,100%{ stroke:var(--wm-arc-a); }
  50%    { stroke:var(--wm-arc-b); }
}

.signal{ transform-box:view-box; }
.sig{
  fill:none; stroke:var(--sig-c); stroke-width:10;
  transform-box:view-box; transform-origin:1530px 300px;
  animation:sigOut 5.2s cubic-bezier(.32,.06,.24,1) infinite;
  animation-delay:calc(var(--n) * .42s);
  transition:stroke .5s ease;
}
.signal--m .sig{ stroke-width:7; transform-origin:430px 250px; }
@keyframes sigOut{
  0%  { transform:scale(.93); opacity:.35; }
  35% { opacity:1; }
  100%{ transform:scale(1.14); opacity:0; }
}

.ripple{
  fill:none; stroke:var(--accent); stroke-width:2;
  transform-box:view-box;
  animation:rippleOut 1.5s cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes rippleOut{
  from{ transform:scale(.2); opacity:.55; }
  to  { transform:scale(9);  opacity:0;   }
}

.stripe-a{ stroke:var(--stripe-a); transition:stroke .5s ease; }
.stripe-b{ stroke:var(--stripe-b); transition:stroke .5s ease; }
.stripes{ animation:stripeDrift 14s linear infinite; }
@keyframes stripeDrift{
  from{ transform:translate(0,0); }
  to  { transform:translate(43.6px,49.7px); }
}

.spotlight{
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(560px circle at var(--sx) var(--sy), var(--spot), transparent 68%);
  transition:opacity .5s ease;
}
@media (hover:hover) and (pointer:fine){ .spotlight{ opacity:1; } }

.grain{
  position:absolute; inset:0;
  opacity:var(--grain-op);
  mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2 · RANGKA
   -------------------------------------------------------------------------- */

.stage{
  position:relative; z-index:1;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:clamp(26px, 10.2vh, 92px) var(--pad) clamp(18px, 4vh, 36px);
}

/* ---------- kepala : papan y=92..135 ---------- */
.masthead{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0;
}

.mast-break{ display:none; }
.lockup{ display:block; line-height:0; }
.lockup-svg{ width:clamp(112px, 9.5vw, 137px); height:auto; display:block; }
.lockup-mark line,
.lockup-mark path{ stroke:var(--logo-ink); transition:stroke .5s ease; }
.lockup-mark .mark-wave{ stroke:var(--logo-accent); }
.lockup-text path{ fill:var(--logo-ink); transition:fill .5s ease; }
.lockup-sub  path{ fill:var(--logo-accent); transition:fill .5s ease; }

.mark-wave{
  transform-box:view-box; transform-origin:10.5px 42.4px;
  animation:markWave 3.6s ease-in-out infinite;
  animation-delay:calc(var(--n) * .22s);
}
@keyframes markWave{
  0%,100%{ opacity:.55; transform:scale(.94); }
  45%    { opacity:1;   transform:scale(1.03); }
}
.lockup:hover .mark-wave{ animation-duration:1.5s; }

.nav{
  margin-left:clamp(16px, 2.4vw, 34px);
  display:flex; align-items:center; gap:9px;
  font-size:9.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--txt-3);
  transition:color .5s ease;
}
.nav-dot{ opacity:.6; }
.nav-link{ position:relative; cursor:default; transition:color .3s ease; }
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--rm-blue);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover{ color:var(--txt); }
.nav-link:hover::after{ transform:scaleX(1); }

/* ---------- butang mod : 30px, sebelah kiri penukar bahasa ---------- */
.theme{
  margin-left:auto;
  display:grid; place-items:center;
  width:30px; height:30px; flex:none;
  border:1px solid var(--pill-bd); border-radius:999px;
  background:var(--pill-bg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--txt-3);
  cursor:pointer;
  transition:border-color .35s ease, color .35s ease, transform .5s cubic-bezier(.3,.8,.25,1), background-color .5s ease;
}
.theme:hover{ border-color:var(--accent); color:var(--accent); }
.theme-icn{ width:15px; height:15px; overflow:visible; }
.theme-core{ fill:currentColor; }
.theme-rays line{ stroke:currentColor; stroke-width:1.7; stroke-linecap:round; transition:opacity .35s ease; }
.theme-cut{ transition:transform .45s cubic-bezier(.3,.8,.25,1); }
:root[data-theme="dark"]  .theme-rays{ opacity:0; }
:root[data-theme="dark"]  .theme-cut { transform:translate(-5.6px, 5.6px); }
:root[data-theme="light"] .theme{ transform:rotate(180deg); }

/* ---------- penukar bahasa : papan 76x30, pip 36x26 ---------- */
.lang{
  position:relative; display:flex; flex:none;
  margin-left:10px;
  padding:2px;
  border:1px solid var(--pill-bd); border-radius:999px;
  background:var(--pill-bg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .5s ease, background-color .5s ease;
}
.lang-pip{
  position:absolute; top:2px; left:2px;
  width:36px; height:26px; border-radius:999px;
  background:var(--rm-blue);
  transition:transform .4s cubic-bezier(.3,.8,.25,1);
}
.lang-pip.is-en{ transform:translateX(36px); }
.lang-btn{
  position:relative; width:36px; height:26px;
  border:0; padding:0; background:none; border-radius:999px;
  font:inherit; font-size:10.5px; font-weight:500; letter-spacing:.05em;
  color:var(--txt-3); cursor:pointer;
  transition:color .3s ease;
}
.lang-btn.is-on{ color:#fff; font-weight:600; }

/* ---------- pil status : papan 176x30 ---------- */
.pill{
  margin:0 0 0 14px;
  display:inline-flex; align-items:center; gap:9px;
  height:30px; padding:0 15px;
  border:1px solid var(--pill-bd); border-radius:999px;
  background:var(--pill-bg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:9.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-2); white-space:nowrap;
  transition:border-color .4s ease, color .5s ease, background-color .5s ease;
}
.pill:hover{ border-color:var(--accent); }
.pill-dot{
  position:relative; flex:none;
  width:6.8px; height:6.8px; border-radius:50%;
  background:var(--rm-ok);
}
.pill-dot::after{
  content:""; position:absolute; inset:-3px;
  border-radius:50%; border:1px solid var(--rm-ok);
  animation:dotPing 2.4s cubic-bezier(.2,.6,.2,1) infinite;
}
@keyframes dotPing{
  0%  { transform:scale(.6);  opacity:.9; }
  70% { transform:scale(2.2); opacity:0; }
  100%{ transform:scale(2.2); opacity:0; }
}

/* ---------- hero ---------- */
.hero{
  flex:1;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(22px, 9vh, 81px);
}

.eyebrow{
  display:flex; align-items:center; gap:12px;
  margin:0 0 var(--s1);
  font-size:11px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--accent);
  transition:color .5s ease;
}
.eyebrow-wave{ width:22px; height:38px; flex:none; overflow:visible; }
.ew{
  stroke:var(--accent);
  transform-box:view-box; transform-origin:2px 20px;
  animation:ewOut 3.2s ease-in-out infinite;
  animation-delay:calc(var(--n) * .18s);
  transition:stroke .5s ease;
}
.ew--dim{ stroke:var(--wave-dim); }
@keyframes ewOut{
  0%,100%{ opacity:.35; transform:scale(.9); }
  40%    { opacity:1;   transform:scale(1.06); }
}
.eyebrow-narrow{ display:none; }

/* ---------- tajuk : papan 74px / leading 80px ---------- */
.title{
  margin:0;
  font-size:clamp(2.4rem, min(5.14vw, 9.2vh), 4.7rem);
  line-height:1.081;
  letter-spacing:-.012em;
  color:var(--txt);
  transition:color .5s ease;
}
.title-bold,.title-thin{ display:block; }
.title-bold{ font-weight:700; }
.title-thin{ font-weight:200; letter-spacing:.004em; }

.sp{ display:inline-block; white-space:pre; }
.sp-w{ display:inline-block; white-space:nowrap; }
.title-bold .sp{
  overflow:hidden; vertical-align:bottom;
  padding-bottom:.08em; margin-bottom:-.08em;
}
.sp-i{ display:inline-block; will-change:transform,opacity; }

/* ---------- garis biru : papan 54x4 ---------- */
.rule{
  width:54px; height:4px; border-radius:1px;
  margin:var(--s2) 0 0;
  background:var(--rm-blue);
  transform-origin:left;
  animation:ruleGrow 5.5s ease-in-out infinite;
}
@keyframes ruleGrow{
  0%,100%{ transform:scaleX(1); }
  50%    { transform:scaleX(1.55); }
}

/* ---------- perenggan : papan 15px / leading 22px ---------- */
.lede{
  margin:var(--s3) 0 0;
  max-width:565px;
  font-size:15px; font-weight:400; line-height:1.47;
  color:var(--txt-2);
  transition:color .5s ease;
}
.lede--narrow{ display:none; }

/* ---------- borang : papan medan 470x52, butang dalam 168.5x42, hantu 186x52 -------- */
.actions{
  display:flex; align-items:center;
  gap:18px;
  margin:var(--s4) 0 0;
}
.signup{ flex:0 1 470px; min-width:0; margin:0; }

.field{ position:relative; }
.field-input{
  width:100%; height:52px;
  padding:0 190px 0 32px;
  border:1px solid var(--field-bd); border-radius:26px;
  background:var(--field-bg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--txt);
  font:inherit; font-size:13.5px; font-weight:400; letter-spacing:.01em;
  transition:border-color .35s ease, background-color .5s ease, box-shadow .35s ease, color .5s ease;
}
.field-input::placeholder{ color:var(--ph); }
.field-input:focus{
  outline:none;
  border-color:var(--rm-blue);
  box-shadow:0 0 0 4px rgba(22,104,227,.15);
}
.field-glow{
  position:absolute; inset:-16px; border-radius:999px;
  background:radial-gradient(closest-side, rgba(22,104,227,.26), transparent 72%);
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
.field-input:focus ~ .field-glow{ opacity:1; }

.signup.is-error .field-input{
  border-color:var(--rm-err);
  box-shadow:0 0 0 4px rgba(226,87,76,.14);
  animation:shake .45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-6px); }
  40%,60%{ transform:translateX(6px); }
}

/* butang sepunya */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; overflow:hidden;
  font:inherit; font-size:11.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none;
  transition:background-color .3s ease, box-shadow .35s ease,
             transform .25s cubic-bezier(.2,.8,.2,1), border-color .4s ease, color .5s ease;
}
.btn-in{ display:inline-flex; align-items:center; gap:11px; }
.btn-wave{ width:11px; height:23px; flex:none; overflow:visible; }

/* butang biru di DALAM medan */
.btn--go{
  position:absolute; top:5px; right:5px; bottom:5px;
  width:168.5px;
  border-radius:21px;
  background:var(--rm-blue); color:#fff;
  transform:translate(var(--mx,0px), var(--my,0px));
}
.btn--go::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.btn--go:hover{ background:#2C7BF0; box-shadow:0 10px 26px rgba(22,104,227,.35); }
.btn--go:hover::before{ transform:translateX(130%); }
.btn--go:active{ transform:translate(var(--mx,0px), var(--my,0px)) scale(.985); }

/* butang garis "Hubungi kami" */
.btn--ghost{
  flex:none;
  width:186px; height:52px;
  border:1.2px solid var(--ghost-bd); border-radius:26px;
  background:transparent;
  color:var(--ghost-txt);
  gap:11px;
}
.btn--ghost .btn-wave{ color:var(--ghost-icn); }
.btn--ghost::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--rm-blue);
  transform:scale(.4); opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.btn--ghost > *{ position:relative; }
.btn--ghost:hover{ border-color:var(--rm-blue); color:#fff; }
.btn--ghost:hover .btn-wave{ color:#fff; }
.btn--ghost:hover::before{ transform:scale(1); opacity:1; }

/* keadaan hantar */
.btn-spin,.btn-tick{
  position:absolute; top:50%; left:50%;
  opacity:0; transform:translate(-50%,-50%) scale(.6);
  transition:opacity .3s ease, transform .3s ease;
}
.btn-spin{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.32); border-top-color:#fff;
}
.btn-tick{ width:22px; height:22px; }
.btn.is-sending .btn-in{ opacity:0; }
.btn.is-sending .btn-spin{
  opacity:1; transform:translate(-50%,-50%) scale(1);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.btn.is-done{ background:var(--rm-ok); box-shadow:0 10px 26px rgba(58,208,138,.28); }
.btn.is-done .btn-in{ opacity:0; }
.btn.is-done .btn-tick{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---------- nota ---------- */
.note{
  margin:19px 0 0; min-height:1.2em;
  font-size:11px; font-weight:400; letter-spacing:.015em;
  color:var(--txt-3);
  transition:color .3s ease;
}
.note.is-error{ color:var(--rm-err); }
.note.is-ok{ color:var(--rm-ok); }

/* ---------- kemajuan : papan bar 540x3 ---------- */
.progress{ width:100%; max-width:var(--col); margin:var(--s5) 0 0; }
.progress-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.micro{
  font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-3);
  transition:color .5s ease;
}
.progress-num{
  font-size:10.5px; font-weight:600; letter-spacing:.05em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  transition:color .5s ease;
}
.progress-track{
  position:relative; height:3px; border-radius:2px;
  background:var(--track); overflow:hidden;
  transition:background-color .5s ease;
}
.progress-fill{
  position:relative; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg, var(--rm-blue) 0%, #3E90F5 100%);
  transition:width 1.6s cubic-bezier(.2,.7,.2,1);
}
.progress-shine{
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform:translateX(-100%);
  animation:shine 3.4s ease-in-out 1.4s infinite;
}
@keyframes shine{
  0%  { transform:translateX(-100%); }
  55% { transform:translateX(100%); }
  100%{ transform:translateX(100%); }
}

/* ---------- kad hubungan : lajur papan 118 / 308 / 498 ---------- */
.contacts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  width:100%; max-width:570px;
  margin:var(--s6) 0 0;
}
.card{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.card-tick{
  width:20px; height:1px; background:var(--rm-blue);
  transition:width .45s cubic-bezier(.2,.8,.2,1), background-color .3s ease;
}
.card:hover .card-tick{ width:36px; background:var(--rm-sky); }
.card-val{
  font-size:13px; font-weight:400; letter-spacing:.005em;
  color:var(--txt);
  transition:color .3s ease;
}
.card:hover .card-val{ color:var(--accent); }
.card-link{ text-decoration:none; }
.card-copy{
  display:inline-flex; align-items:center; gap:8px;
  padding:0; border:0; background:none;
  font:inherit; font-size:13px; font-weight:400;
  color:var(--txt); cursor:pointer; text-align:left;
}
.card-icn{
  width:14px; height:14px; flex:none;
  color:var(--accent);
  opacity:0; transform:translateX(-4px);
  transition:opacity .3s ease, transform .3s ease;
}
.card-copy:hover .card-icn,
.card-copy:focus-visible .card-icn{ opacity:1; transform:translateX(0); }

/* ---------- kaki : hairline papan y=836 ---------- */
.footer{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:auto;
  padding-top:clamp(12px, 1.8vh, 20px);
  border-top:1px solid var(--line);
  font-size:10.5px; font-weight:400; letter-spacing:.03em;
  color:var(--txt-3);
  transition:color .5s ease, border-color .5s ease;
}
.footer-r{ letter-spacing:.11em; color:var(--txt-2); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:5;
  transform:translate(-50%,22px);
  padding:10px 20px;
  border:1px solid var(--pill-bd); border-radius:999px;
  background:var(--pill-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:11.5px; letter-spacing:.05em;
  color:var(--txt);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* --------------------------------------------------------------------------
   3 · MASUK BERPERINGKAT + TUKAR BAHASA
   -------------------------------------------------------------------------- */

.js .reveal{ opacity:0; }
.js .is-ready .reveal{
  animation:rise .9s cubic-bezier(.22,.72,.24,1) both;
  animation-delay:calc(var(--i,0) * 58ms + 120ms);
}
@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}

.js .title-bold .sp-i{ transform:translateY(112%); }
.js .title.is-anim .title-bold .sp-i{
  animation:wordIn 1s cubic-bezier(.22,.72,.24,1) both;
  animation-delay:calc(var(--n) * 90ms + 260ms);
}
@keyframes wordIn{ to{ transform:translateY(0); } }

.js .title-thin .sp-i{ opacity:0; }
.js .title.is-anim .title-thin .sp-i{
  animation:charIn .85s cubic-bezier(.2,.72,.2,1) both;
  animation-delay:calc(var(--n) * 24ms + 620ms);
}
@keyframes charIn{
  from{ opacity:0; filter:blur(7px); transform:translateY(.16em); }
  to  { opacity:1; filter:blur(0);   transform:translateY(0); }
}

.js .title.is-quick .title-bold .sp-i{ animation-delay:calc(var(--n) * 55ms); }
.js .title.is-quick .title-thin .sp-i{ animation-delay:calc(var(--n) * 16ms + 150ms); }

.js .title.is-live .title-bold .sp-i{ animation:none; transform:none; }
.js .title.is-live .title-thin .sp-i{
  animation:none; opacity:1; filter:none; transform:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), color .4s ease;
}
@media (hover:hover) and (pointer:fine){
  .js .title.is-live .title-thin .sp:hover .sp-i{
    transform:translateY(-7px);
    color:var(--rm-sky);
  }
}

[data-i18n],[data-copy-label]{ transition:opacity .2s ease; }
.is-swap [data-i18n],
.is-swap [data-copy-label]{ opacity:0; }

/* --------------------------------------------------------------------------
   4 · TELEFON (papan 390 x 844)
   -------------------------------------------------------------------------- */

@media (max-width:760px){
  :root{
    --pad:clamp(20px, 8.2vw, 32px);
    --s1:16px; --s2:18px; --s3:16px; --s4:24px; --s5:26px; --s6:24px;
  }

  .bg--wide{ display:none; }
  .bg--tall{ display:block; }

  .stage{ padding-top:clamp(26px, 7vh, 60px); padding-bottom:24px; }

  /* papan: lockup y=60 (baris 1), pil status y=146 (baris 2) */
  .masthead{
    display:grid; align-items:center;
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:"logo . theme lang" "pill pill pill pill";
    row-gap:clamp(18px, 5.2vh, 44px); column-gap:9px;
  }
  .lockup{ grid-area:logo; }
  .theme { grid-area:theme; margin-left:0; width:28px; height:28px; }
  .lang  { grid-area:lang;  margin-left:0; }
  .pill  { grid-area:pill;  justify-self:start; margin-left:0; height:26px; font-size:9.5px; padding:0 13px; }
  .nav{ display:none; }
  .lockup-svg{ width:93px; }

  .hero{ padding-top:clamp(12px, 3vh, 26px); }

  .eyebrow-wide{ display:none; }
  .eyebrow-narrow{ display:inline; }
  .eyebrow{ gap:10px; font-size:10.5px; }
  .eyebrow-wave{ width:19px; height:33px; }

  /* 7.6em → tajuk pecah jadi 3 baris seperti papan telefon */
  .title{ font-size:clamp(2.3rem, 10.3vw, 2.9rem); line-height:1.1; max-width:7.6em; }
  .rule{ width:40px; height:3px; }

  .lede--wide{ display:none; }
  .lede--narrow{ display:block; }
  .lede{ font-size:14px; line-height:1.62; max-width:none; }

  /* papan telefon: medan 326x50 (butang dalam 161x40), hantu 326x44, jurang 10 */
  .actions{ flex-direction:column; align-items:stretch; gap:10px; }
  .signup{ flex:none; }
  .field-input{ height:50px; padding:0 172px 0 30px; font-size:12.5px; }
  .btn--go{ width:161.4px; top:5px; right:5px; bottom:5px; border-radius:20px; font-size:10.5px; }
  .btn--go .btn-in{ gap:9px; }
  .btn--ghost{ width:100%; height:44px; border-radius:22px; }

  .note{ margin-top:14px; font-size:10.5px; }
  .progress{ max-width:none; }
  .progress-head{ margin-bottom:10px; }
  .contacts{ grid-template-columns:1fr; gap:18px; max-width:none; }
  .card--wideonly{ display:none; }
  .card{ gap:7px; }
  .card-tick{ width:16px; }
  .card-val,.card-copy{ font-size:12.5px; }

  .footer{ padding-top:12px; font-size:9.5px; }
}

@media (max-width:360px){
  .title{ font-size:2.15rem; }
  .field-input{ padding-right:154px; font-size:12px; }
  .btn--go{ width:144px; font-size:10px; }
}

/* --------------------------------------------------------------------------
   5 · HORMAT PILIHAN PENGGUNA
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1 !important; }
  .js .title-bold .sp-i,
  .js .title-thin .sp-i{ transform:none !important; opacity:1 !important; filter:none !important; }
  .spotlight,.grain{ display:none; }
  .lyr{ transform:none !important; }
}