/* ================= GARET================= */
@font-face{font-family:"Garet";src:url("assets/fonts/Garet-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Garet";src:url("assets/fonts/Garet-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Garet";src:url("assets/fonts/Garet-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Garet";src:url("assets/fonts/Garet-Heavy.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;}

/* ================= GUIDE COLORS ================= */
:root{
  --p:#4345c4;
  --p2:#6f72ff;
  --soft:#e6e7fa;
  --bg:#ffffff;
  --bg2:#f5f5f5;
  --text:#111111;
  --muted:rgba(0,0,0,.70);
  --line:rgba(0,0,0,.10);
  --shadow:0 18px 44px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Garet", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:400;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px, calc(100% - 56px)); margin:0 auto}

/* ================= HEADER================= */
.topHeader{
  position:sticky;
  top:0;
  z-index:90;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.headerInner{
  height:78px;
  display:flex;
  align-items:center;
  gap:22px;
}

/* brand kiri */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:170px;
}
.brandMark{
  width:32px;height:32px;border-radius:999px;
  background:linear-gradient(135deg,var(--p),var(--p2));
  box-shadow:0 10px 22px rgba(67,69,196,.20);
}
.brandText{
  font-weight:900;
  font-size:22px;
  letter-spacing:-.02em;
}

/* nav tengah */
.nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
}
.navLink{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  font-weight:700;
  font-size:15px;
  color:var(--muted);
  cursor:pointer;
  padding:10px 6px;
  border-radius:12px;
}
.navLink:hover{background:rgba(67,69,196,.06); color:#000;}
.navLink.isActive{color:#000;}

/* language kanan */
.langBtn{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  font-weight:700;
  font-size:15px;
  color:var(--muted);
  cursor:pointer;
  padding:10px 8px;
  border-radius:12px;
}
.langBtn:hover{background:rgba(67,69,196,.06); color:#000;}
.chev{font-size:12px; opacity:.85; transform:translateY(-1px); display:inline-block}

/* dropdown stage */
.ddStage{ position:relative; height:0; }
.ddPanel{
  position:absolute;
  top:10px;
  right:0;
  min-width:240px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:10px;
  display:none;
}
.ddPanel.open{display:block;}
.ddPanel a, .ddBtn{
  width:100%;
  display:block;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:0;
  background:transparent;
  font:inherit;
  font-weight:700;
  color:rgba(0,0,0,.78);
  cursor:pointer;
}
.ddPanel a:hover, .ddBtn:hover{background:rgba(67,69,196,.07); color:#000;}

/* burger */
.burger{
  display:none;
  width:46px;height:42px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px;height:2px;
  border-radius:999px;
  background:#111;
  margin:5px auto;
}

/* mobile nav */
.mobileNav{
  border-top:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.mobileNavInner{
  padding:14px 0 18px;
  display:grid;
  gap:10px;
}
.mobileNavInner a{
  padding:12px 12px;
  border-radius:14px;
  font-weight:800;
  color:rgba(0,0,0,.80);
}
.mobileNavInner a:hover{background:rgba(67,69,196,.06);}
.mobileNavInner details{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:10px 10px 6px;
}
.mobileNavInner summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  padding:6px 6px 10px;
  color:rgba(0,0,0,.82);
}
.mobileNavInner details a{margin:2px 0; display:block;}

.mobileLang{
  margin-top:6px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:12px;
}
.mobileLang span{font-weight:800; color:rgba(0,0,0,.70);}
.pillRow{display:flex; gap:10px; margin-top:10px;}
.pill{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.pill.isActive{
  border-color:rgba(67,69,196,.35);
  background:rgba(67,69,196,.10);
  color:var(--p);
}

/* responsive header */
@media (max-width: 980px){
  .nav{display:none;}
  .langBtn{display:none;}
  .burger{display:block;}
  .brand{min-width:auto;}

  .headerInner{justify-content:space-between;}
  .burger{margin-left:auto;}
}

/* ================= MOBILE NAV OVERLAY FIX ================= */
.mobileNav{
  position:fixed;
  inset:78px 0 0 0; /* mulai di bawah header (tinggi header = 78px) */
  z-index:999;

  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);

  overflow-y:auto;
  -webkit-overflow-scrolling:touch;

  /* hidden state */
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
}

.mobileNav.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* KUNCI SCROLL PAGE */
body.menu-open{
  overflow:hidden;
  touch-action:none;
}

/* ================= HERO (pleks gojek style) ================= */
.hero{
  background:#fff;
  padding:22px 0 0;
}

.heroCard{
  position:relative;
  height:420px;
  background:var(--bg2);
  overflow:hidden;
  border-radius:6px;
}

/* gambar + overlay (kiri gelap, kanan bening) */
.heroMedia{
  position:absolute;
  inset:0;

  /* layer 1: dark blend (tipis, rata) */
  background:
    linear-gradient(
      rgba(0,0,0,.32),
      rgba(0,0,0,.32)
    ),

    /* layer 2: gradient arah kiri → kanan (fokus teks) */
    linear-gradient(
      90deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.44) 42%,
      rgba(0,0,0,.18) 66%,
      rgba(0,0,0,0) 86%
    ),

    /* layer 3: image */
    url("https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=2000&q=80");

  background-size:cover;
  background-position:right center;
  filter:saturate(.92) contrast(.96);
}


/* teks kiri */
.heroContent{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 0 0 72px;
  max-width:720px;
  color:#fff;
}

.heroContent h1{
  margin:0 0 18px;
  font-weight:900;
  font-size:56px;
  line-height:1.05;
  letter-spacing:-.02em;
}

.heroContent p{
  margin:0 0 24px;
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  max-width:520px;
  opacity:.95;
}

.heroCta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  background:#4345c4;
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:10px 18px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  margin-top:0; /* anti nambah jarak */
}
.heroCta:hover{ filter:brightness(1.05); }

/* ================= RESPONSIVE HERO ================= */
@media (max-width:980px){
  .heroContent{
    padding-left:28px;
    padding-right:22px;
    max-width:640px;
  }

  .heroContent h1{
    font-size:20px;
    margin:0 0 14px;
    line-height:1.07;
  }

  .heroContent p{
    font-size:10px;
    margin:0 0 18px;
    line-height:1.7;
    max-width:480px;
  }
}

/* MOBILE: rapet + tetap gaya desktop (kiri gelap -> kanan bening) */
@media (max-width:640px){

  .heroCard{ height:380px; }

  .heroMedia{
    background:
      linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)),
      linear-gradient(
        90deg,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.46) 42%,
        rgba(0,0,0,.18) 66%,
        rgba(0,0,0,0) 86%
      ),
      url("https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1400&q=80");
    background-size:cover;
    background-position:right 35% center;
  }

  .heroContent{
    padding-left:18px;
    padding-right:16px;
    max-width:560px;
  }

  .heroContent h1{
    font-size:26px;
    line-height:1.08;
    margin:0 0 8px;
  }

  .heroContent p{
    font-size:11px;
    line-height:1.65;
    margin:0 0 12px;
    max-width:420px;
  }

  .heroCta{
    font-size:10px;
    padding:9px 16px;
  }
}

/* ================= BENEFIT (PLEK KAYA REFERENSI) ================= */
.benefitSection{
  padding:96px 0 5px;
  background:#fff;
}

.benefitInner{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:72px;
  align-items:center;
}

/* LEFT VISUAL */
.benefitVisual{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.benefitBlob{
  position:absolute;
  inset:40px 40px 40px 40px;
  border-radius:34px;
  background: radial-gradient(circle at 40% 40%, rgba(111,114,255,.25), rgba(230,231,250,0) 60%);
  border:1px solid rgba(67,69,196,.14);
  filter:blur(.1px);
}

.benefitPerson{
  position:relative;
  width:min(420px, 92%);
  height:auto;
  border-radius:22px;
  background:none;
  z-index:2;
}

/* floating cards */
.bCard{
  position:absolute;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  padding:14px 14px;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
  z-index:3;
  width:180px;
}

.bCardMiniTitle{
  font-weight:700;
  font-size:10px;
  color:rgba(0,0,0,.55);
  margin-bottom:6px;
}

.bCardBig{
  font-weight:900;
  font-size:15px;
  letter-spacing:-.02em;
}

.bCardSmall{
  margin-top:2px;
  font-size:10px;
  color:rgba(0,0,0,.55);
  font-weight:500;
}

.bCard--top{
  left:18px;
  top:54px;
}
.bCard--mid{
  right:18px;
  top:160px;
  width:170px;
}
.bCard--bottom{
  left:34px;
  bottom:18px;
  width:190px;
}

/* RIGHT TEXT */
.benefitText h2{
  margin:0 0 5px;
  font-size:40px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.02em;
}

.benefitLead{
  margin:0 0 8x;
  font-size:15px;
  line-height:1.8;
  color:rgba(0,0,0,.62);
  max-width:560px;
}

/* points 2 columns */
.benefitPoints{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px 28px;
  margin-bottom:16px;
}

.bPoint{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.bIcon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#e6e7fa;   /* lingkaran biru */
  color:#4345c4;           /* X putih */
  font-weight:900;
  font-size:13px;
  transform:translateY(2px);
}

.bTitle{
  font-weight:900;
  font-size:16px;
  color:#6f72ff;
  margin-bottom:1px;
}

.bDesc{
  font-weight:400;
  font-size:13px;
  line-height:1.65;
  color:rgba(0,0,0,.58);
  max-width:280px;
}

.benefitClosing{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:rgba(0,0,0,.72);
  max-width:620px;
  margin-top:4px;
}

/* ===== default (desktop): mobile headline disembunyiin ===== */
.benefitMobileH2{ display:none; }

/* ===== desktop headline (h2 yang di dalam .benefitText) ===== */
.benefitDesktopH2{ display:block; }

/* ================= <= 980px (tablet) ================= */
@media (max-width: 980px){
  .benefitSection{ padding:84px 0; }

  .benefitInner{
    display:grid;
    grid-template-columns:1fr; /* visual atas, text bawah */
    gap:44px;
    align-items:stretch;
  }

  .benefitVisual{ min-height:380px; }

  /* mobile headline masih hidden di tablet (optional) */
  .benefitMobileH2{ display:none; }

  .benefitDesktopH2{
    font-size:36px;
    line-height:1.12;
    margin:0 0 10px;
  }

  /* points tetep 2 kolom */
  .benefitPoints{
    grid-template-columns:1fr 1fr;
    gap:18px 22px;
  }
}

/* ================= <= 640px (HP) ================= */
@media (max-width: 640px){
  .benefitSection{ padding:10px 0; }

  .benefitInner{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
  }

  /* TAMPILIN headline HP, HIDE headline desktop */
  .benefitMobileH2{
    display:block;
    margin:20px 0 -30px;
    font-size:28px;
    line-height:1.12;
    font-weight:900;
    letter-spacing:-.02em;
    z-index:5; 
    position: relative;
  }
  .benefitDesktopH2{ display:none; }

  /* visual */
  .benefitVisual{ 
    min-height:360px; 
    margin-top:-6px;
  }
  .benefitPerson{
    width:100%;
    max-width:360px;
    border-radius:18px;
  }

  /* floating cards kecilin */
  .bCard{
    width:150px;
    padding:12px;
    border-radius:16px;
  }
  .bCardMiniTitle{ font-size:8px; margin-bottom:5px; }
  .bCardBig{ font-size:14px; }
  .bCardSmall{ font-size:8px; margin-top:5px; }

  .bCard--top{ left:8px; top:40px; }
  .bCard--mid{ right:8px; top:130px; width:140px; }
  .bCard--bottom{ left:18px; bottom:12px; width:160px; }

  /* text bawah foto */
  .benefitLead{
    margin:0 0 14px;
    font-size:14px;
    line-height:1.7;
    max-width:none;
  }

  /* points tetep 2 kolom (struktur PC) */
  .benefitPoints{
    grid-template-columns:1fr 1fr;
    gap:16px 18px;
    margin-bottom:14px;
  }

  .bIcon{
    width:20px; height:20px; flex:0 0 20px;
    font-size:12px;
  }
  .bTitle{ font-size:15px; }
  .bDesc{ font-size:12.5px; line-height:1.6; max-width:none; }

  .benefitClosing{
    font-size:14px;
    line-height:1.75;
    margin-top:10px;
    max-width:none;
  }
}

/* ================= <= 380px (HP kecil) ================= */
@media (max-width: 380px){
  .benefitPoints{ grid-template-columns:1fr; }
}

/* ================= BENEFIT REVEAL (on scroll) ================= */
.benefitSection{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .75s ease, transform .75s ease;
  will-change:opacity, transform;
}

.benefitSection.is-in{
  opacity:1;
  transform:translateY(0);
}

/* visual masuk halus */
.benefitSection .benefitVisual{
  opacity:0;
  transform:translateY(12px) scale(.985);
  filter:blur(6px);
  transition:opacity .85s ease, transform .85s ease, filter .85s ease;
  transition-delay:.08s;
  will-change:opacity, transform, filter;
}

.benefitSection.is-in .benefitVisual{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* cards stagger */
.benefitSection .bCard{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .75s ease, transform .75s ease;
  will-change:opacity, transform;
}

.benefitSection.is-in .bCard--top{
  opacity:1;
  transform:translateY(0);
  transition-delay:.18s;
}
.benefitSection.is-in .bCard--mid{
  opacity:1;
  transform:translateY(0);
  transition-delay:.26s;
}
.benefitSection.is-in .bCard--bottom{
  opacity:1;
  transform:translateY(0);
  transition-delay:.34s;
}

/* text stagger */
.benefitSection .benefitText,
.benefitSection .benefitMobileH2{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .85s ease, transform .85s ease;
  transition-delay:.12s;
  will-change:opacity, transform;
}

.benefitSection.is-in .benefitText,
.benefitSection.is-in .benefitMobileH2{
  opacity:1;
  transform:translateY(0);
}

/* optional: hover micro-float cards (tetep elegan) */
.benefitSection.is-in .bCard{
  transition-property:opacity, transform;
}
@media (prefers-reduced-motion: reduce){
  .benefitSection,
  .benefitSection *{
    transition:none !important;
    animation:none !important;
    filter:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* pas scroll naik: tampil tanpa anim */
.benefitSection.no-anim,
.benefitSection.no-anim *{
  transition:none !important;
  animation:none !important;
  filter:none !important;
}


/* ================= SERVICES ================= */
.servicesSection{
  background:linear-gradient(135deg, #4345c4 0%, #5a5fe6 60%, #6f72ff 100%);
  padding:25px 0 72px;
  border-radius:20px 20px 0 0;              /* rounded */
  margin:40px 0 0;                   /* jarak dari section lain */
}

.servicesInner{
  color:#fff;
}

/* header */
.servicesHead{
  margin-bottom:48px;
}

.servicesHead h2{
  margin:0;
  font-size:44px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.02em;
}

/* grid */
.servicesGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
}

/* card putih */
.serviceCard{
  background:#fff;
  color:#111;
  border-radius:28px;
  padding:36px 32px 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:220px;
  box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.serviceCard h3{
  margin:0 0 6px;
  font-size:22px;
  font-weight:900;
}

.serviceDesc{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.7;
  color:rgba(0,0,0,.70);
  max-width:260px;
}

/* CTA biru rounded */
.serviceCta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  background:var(--p);
  color:#fff;
  font-weight:600;
  font-size:14px;
  padding:8px 18px;
  border-radius:999px;
  box-shadow:0 12px 26px rgba(67,69,196,.35);
}

.serviceCta:hover{
  filter:brightness(1.08);
}

/* footer note */
.servicesNote{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.85);
  max-width:520px;
}

/* responsive */
@media (max-width: 980px){
  .servicesGrid{
    grid-template-columns:1fr;
  }

  .servicesHead h2{
    font-size:34px;
  }

  .serviceCard{
    min-height:auto;
  }
}

/* ================= SERVICES CTA NUDGE ================= */

.serviceCard{
  will-change: transform, box-shadow;
}

/* default hidden nudge state */
.servicesSection .serviceCard{
  opacity:1;
}

/* card lift */
.servicesSection.is-nudge .serviceCard{
  animation:serviceLift 1s cubic-bezier(.22,1,.36,1);
}

/* stagger timing */
.servicesSection.is-nudge .serviceCard:nth-child(1){
  animation-delay:.00s;
}
.servicesSection.is-nudge .serviceCard:nth-child(2){
  animation-delay:.18s;
}
.servicesSection.is-nudge .serviceCard:nth-child(3){
  animation-delay:.36s;
}

@keyframes serviceLift{
  0%{
    transform:translateY(18px) scale(.985);
    box-shadow:0 22px 60px rgba(0,0,0,.12);
  }
  45%{
    transform:translateY(-6px) scale(1.01);
    box-shadow:0 50px 120px rgba(0,0,0,.28);
  }
  100%{
    transform:translateY(0) scale(1);
    box-shadow:0 30px 70px rgba(0,0,0,.12);
  }
}

/* CTA button pulse (ikut nyolek) */
.servicesSection.is-nudge .serviceCta{
  animation:serviceCtaPulse .85s ease-out;
}

/* CTA stagger ikut card */
.servicesSection.is-nudge .serviceCard:nth-child(1) .serviceCta{
  animation-delay:.25s;
}
.servicesSection.is-nudge .serviceCard:nth-child(2) .serviceCta{
  animation-delay:.43s;
}
.servicesSection.is-nudge .serviceCard:nth-child(3) .serviceCta{
  animation-delay:.61s;
}

@keyframes serviceCtaPulse{
  0%{
    transform:scale(1);
    box-shadow:0 12px 26px rgba(67,69,196,.35);
  }
  50%{
    transform:scale(1.08);
    box-shadow:0 24px 56px rgba(67,69,196,.55);
  }
  100%{
    transform:scale(1);
    box-shadow:0 12px 26px rgba(67,69,196,.35);
  }
}

/* mobile lebih jinak */
@media (max-width:980px){
  @keyframes serviceLift{
    0%{ transform:translateY(14px) scale(.99); }
    45%{ transform:translateY(-4px) scale(1.006); }
    100%{ transform:translateY(0) scale(1); }
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .servicesSection.is-nudge *{
    animation:none !important;
    transform:none !important;
    box-shadow:inherit !important;
  }
}

/* ================= WORKFLOW (REPLAY + REVERSE READY) ================= */
.wf{
  background:#fff;
  position:relative;
  z-index:4;

  /* overlay ke section sebelumnya*/
  margin-top:0px;
  margin-bottom: 10px;
  padding:84px 0 10px;
  overflow:hidden;
}

/* layout kiri-kanan */
.wfGrid{
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap:72px;
  align-items:center;
}

/* LEFT */
.wfLeft h2{
  margin:0 0 14px;
  font-weight:900;
  font-size:56px;
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--p);
}
.wfLeft p{
  margin:0;
  font-size:22px;
  line-height:1.45;
  color:rgba(0,0,0,.78);
  max-width:520px;
}

/* RIGHT container */
.wfRight{
  position:relative;
}

/* canvas: tempat step ditumpuk */
.wfCanvas{
  position:relative;
  height:460px; /* cukup buat 4 step (sesuai --y: ... ) */
}

/* dotted path (lebih senada) */
.wfPath{
  position:absolute;
  right:34px;
  top:18px;
  bottom:18px;
  width:240px;
  opacity:.55;
  pointer-events:none;

  background:
    radial-gradient(circle, rgba(67,69,196,.55) 2px, transparent 3px)
    0 0/18px 18px repeat;

  /* soften edges dikit biar gak kaku */
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* ===== STEP POSITIONING ===== */
.wfStep{
  position:absolute;
  left:0;
  right:0;
  top:var(--y);
  display:flex;
  align-items:center;
  gap:16px;
}

/* alternate alignment (snake feel) */
.wfStep[data-step="01"],
.wfStep[data-step="03"]{
  justify-content:flex-end;
  padding-right:22px;
}
.wfStep[data-step="02"],
.wfStep[data-step="04"]{
  justify-content:flex-start;
  padding-left:22px;
}

/* number */
.wfNo{
  width:90px;
  color:rgba(0,0,0,.48);
}
.wfNo span{
  display:block;
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
}
.wfNo b{
  display:block;
  font-weight:900;
  font-size:44px;
  line-height:1;
  color:rgba(67,69,196,.82);
  margin-top:2px;
}
.wfNoLeft{ order:-1; text-align:right; }

/* pill */
.wfPill{
  width:min(560px, 100%);
  border-radius:999px;
  padding:18px 18px 18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  box-shadow:0 18px 44px rgba(67,69,196,.20);
  border:1px solid rgba(255,255,255,.18);
}

/* brand-senada gradients per step */
.wfStep[data-step="01"] .wfPill{
  background:linear-gradient(135deg, #4345c4, #6f72ff);
}
.wfStep[data-step="02"] .wfPill{
  background:linear-gradient(135deg, #3f42b8, #565adf);
}
.wfStep[data-step="03"] .wfPill{
  background:linear-gradient(135deg, #34379f, #4d50c8);
}
.wfStep[data-step="04"] .wfPill{
  background:linear-gradient(135deg, #2b2d7a, #1f2161);
}

/* pill text */
.wfPillTitle{
  font-weight:900;
  font-size:18px;
  color:#fff;
  margin-bottom:6px;
}
.wfPillDesc{
  font-weight:400;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.88);
  max-width:420px;
}

/* bubble icon */
.wfBubble{
  width:56px;
  height:56px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 56px;
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 0 0 1px rgba(67,69,196,.16);
}
.wfIco{
  width:26px;
  height:26px;
  fill:#4345c4;
  opacity:.95;
}

/* ================= ANIMATION (REPLAY + REVERSE) ================= */
/* default (hidden) */
.wfStep{
  opacity:0;
  transform:translateY(28px);
  filter:blur(1.6px);
  transition:650ms cubic-bezier(.2,.8,.2,1);
}

/* reverse direction when scrolling UP (JS set .wf.isUp) */
.wf.isUp .wfStep{
  transform:translateY(-28px);
}

/* visible */
.wfStep.active{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* subtle hover (optional) */
.wfPill:hover{ filter:brightness(1.03); }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .wf{
    margin-top:-56px;
    padding:64px 0 70px;
    border-radius:36px;
  }

  .wfGrid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .wfLeft h2{ font-size:40px; }
  .wfLeft p{ font-size:18px; }

  .wfCanvas{ height:auto; }
  .wfPath{ display:none; }

  /* stack steps normally on mobile */
  .wfStep{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    padding:0 !important;
    justify-content:flex-start !important;
    margin-bottom:16px;
  }

  .wfNo{ display:none; }
  .wfPill{ border-radius:22px; }
}

/* ================= OURTEAM (SCOPED - BIAR GAK NABRAK WORKFLOW) ================= */

.team-section{
  padding:10px 0 100px;
  text-align:center;
  background: var(--bg) !important; /* #ffffff */
}

/* title */
.team-section .team-title{
  font-size:50px;
  font-weight:900;
  margin:0;
}
.team-section .title-dark{ color:#111; }
.team-section .title-blue{ color:var(--p); }

/* stars */
.team-section .team-stars{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  letter-spacing:0 !important;
  margin:1px 0 10px;
  color:var(--p2);
  font-size:16px;
  line-height:1;
}
.team-section .team-stars .star{
  display:inline-block;
  transform: translateY(1px);
}

/* line */
.team-section .team-line{
  width:100px;
  height:2px;
  background:var(--p2);
  margin:0 auto 54px;
  border-radius:99px;

  /* anim base */
  position:relative;
  overflow:visible;
  transform: scaleX(0);
  transform-origin:center;
  opacity:0;
}

/* titik di tengah */
.team-section .team-line::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--p2);
  transform: translate(-50%, -50%);
  opacity:1;
}

/* masuk viewport: garis narik */
.team-section.is-in .team-line{
  opacity:1;
  transform: scaleX(1);
  transition: transform 1100ms cubic-bezier(.16,1,.3,1), opacity 420ms ease;
}
.team-section.is-in .team-line::before{
  opacity:0;
  transition: opacity 320ms ease 220ms;
}

/* row */
.team-section .team-row{
  display:flex;
  justify-content:center;
  gap:70px;
  flex-wrap:wrap;
  padding:0 20px;
}

/* person */
.team-section .team-person{
  width:220px;
}

/* avatar base */
.team-section .avatar{
  position:relative;
  width:150px;
  height:150px;
  border-radius:50%;
  margin:0 auto;
  padding:0 !important;
  overflow: visible; /* ← INI WAJIB */
}

/* image */
.team-section .avatar img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

/* text */
.team-section .name{
  margin:18px 0 6px;
  font-size:14px;
  font-weight:700;
}
.team-section .pos{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  color:#9aa3ad;
}
.team-section .desc{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#8c8c8c;
}

/* name colors */
.team-section .yellow{ color:#6f72ff; }
.team-section .blue{ color:#6f72ff; }
.team-section .purple{ color:#6f72ff; }
.team-section .gray{ color:#6f72ff; }

/* quote */
.team-section .team-quote{
  margin:54px auto 0;
  font-size:16px;
  color:#666;
  max-width:800px;
  padding:0 20px;
}

.team-section .team-quote-top{
  margin:8px auto 8px;
  font-size:15px;
  color:#7d7d7d;
}

/* responsive */
@media (max-width: 900px){
  .team-section .team-row{ gap:44px; }
  .team-section .team-person{ width:240px; }
}
@media (max-width: 560px){
  .team-section .team-title{ font-size:28px; }
  .team-section .team-row{ gap:34px; }
  .team-section .team-person{ width:260px; }
}

/* ================= SVG RING (SNAKE DRAW) ================= */

.team-section .ringSvg{
  position:absolute;
  top:50%;
  left:50%;
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  transform: translate(-50%, -50%) rotate(-90deg);
  z-index:3;
  pointer-events:none;
}

.team-section .ringCircle{
  fill:none;
  stroke: var(--ringColor, var(--p2));
  stroke-width:6;
  stroke-linecap:round;

  /* circumference for r=74 */
  stroke-dasharray:465.4;
  stroke-dashoffset:465.4;
  opacity:0;
}

/* ring colors via class on .avatar */
.team-section .avatar.ring-yellow{ --ringColor:#5b5fd6; }
.team-section .avatar.ring-blue{   --ringColor:#6a6fe3; }
.team-section .avatar.ring-purple{ --ringColor:#7a7ff0; }
.team-section .avatar.ring-orange{ --ringColor:#8b8fff; }

/* animate on in-view */
.team-section.is-in .ringCircle{
  opacity:1;
  animation: ringDraw 3600ms cubic-bezier(.22,.9,.25,1) forwards;
}

/* reset when out of view */
.team-section:not(.is-in) .ringCircle{
  animation:none;
  stroke-dashoffset:465.4;
  opacity:0;
}

@keyframes ringDraw{
  0%   { stroke-dashoffset:465.4; opacity:0; }
  12%  { opacity:1; }
  100% { stroke-dashoffset:0; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .team-section .team-line{
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }
  .team-section .ringCircle{
    animation:none !important;
    stroke-dashoffset:0 !important;
    opacity:1 !important;
  }
}

@media (max-width: 640px){
  .team-section .avatar{
    width:130px;
    height:130px;
  }

  .team-section .ringCircle{
    stroke-width:5;
  }
}

/* ===== Client: dots + marquees ===== */
.intgInner{
  position:relative;
  width:min(1100px, calc(100% - 56px));
  margin:0 auto;
  text-align:center;
}

/* title */
.intgTitle{
  margin:18px 0 10px;
  font-weight:900;
  font-size:52px;
  line-height:1.08;
  letter-spacing:-.03em;
  color:#111;
}

.intgTitle .isBlue{
  color:#4345c4;
}

.intgSub{
  margin:8px 0 18px;
  font-size:15px;
  line-height:1.5;
  color:rgba(0,0,0,.55);
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}

/* center node */
.intgNode{
  width:64px;height:64px;
  margin:0 auto 22px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  padding:16px;
}
.intgNode .nDot{
  width:12px;height:12px;border-radius:999px;
  background:rgba(0,0,0,.65);
   transition: background .25s ease;
}
.intgNode .nDot.isBlue{ background:#6f72ff; }

/* card */
.intgCard{
  width:118px;
  height:92px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 8px 10px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.intgCard img{
  width:44px;
  height:44px;
  object-fit:contain;
  filter:saturate(.98);
  opacity:.98;
}

/* ===== MARQUEE (2 ROW LOOP) ===== */
.intgMarquee{
  position:relative;
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:26px;
  overflow:hidden;
  padding:22px 10px 10px;

  /* edge fade biar makin smooth */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.intgTrack{
  display:flex;
  width:max-content;
  will-change:transform;
}

.intgGroup{
  display:flex;
  gap:26px;
  padding-right:26px;
}

/* arah animasi */
.intgTrack.left{
  animation:intgLeft 34s linear infinite;
}
.intgTrack.right{
  animation:intgRight 38s linear infinite;
}

/* geser setengah lebar track (karena 2 group kembar) */
@keyframes intgLeft{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes intgRight{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}

/* faint connection lines (very subtle) */
.intgLines{
  position:absolute;
  left:50%;
  top:240px;
  width:86%;
  height:320px;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:.38;
}

.intgLines .hLine{
  position:absolute;
  left:0; right:0;
  top:96px;
  height:1px;
  background:rgba(0,0,0,.08);
}
.intgLines .vLine{
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:1px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.06);
}

/* motion safe */
@media (prefers-reduced-motion: reduce){
  .intgTrack{ animation:none !important; }
}

/* responsive */
@media (max-width: 980px){
  .intgTitle{ font-size:40px; }
  .intgGroup{ gap:18px; padding-right:18px; }
  .intgMarquee{ gap:18px; }
  .intgCard{ width:96px; height:80px; border-radius:20px; }
  .intgCard img{ width:40px; height:40px; }
  .intgLines{ display:none; }
}

@media (max-width: 560px){
  .intgTitle{ font-size:34px; }
}

/* ================= TESTIMONIALS STYLE ================= */
.testi{
  padding:96px 0;
  background:#e6e7fa;
  margin-top:120px;
}

.testiInner{
  position:relative;
  width:min(1100px, calc(100% - 56px));
  margin:0 auto;
  min-height:420px;
  padding:10px 0;
}

/* LEFT PANEL overlay */
.testiLeft{
  position:absolute;
  left:-10px;
  top:-10px;
  bottom:0;
  width:320px;
  background:#fff;
  z-index:5;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px 18px;
  border-radius:26px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.testiQuoteMark{
  font-size:84px;
  line-height:1;
  color:rgba(0,0,0,.18);
  font-weight:900;
  margin-bottom:18px;
}

.testiTitle{
  margin:0 0 26px;
  font-size:44px;
  line-height:1.08;
  letter-spacing:-.03em;
  color:#111;
  font-weight:900;
}

/* arrows + indicator */
.testiNav{
  display:flex;
  align-items:center;
  gap:14px;
}

.tBtn{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
}

.tBtn:active{ transform:translateY(1px); }

.tIndicator{
  position:relative;
  width:168px;
  height:4px;
  border-radius:999px;
  background:#e6e7fa;
  overflow:hidden;

  /* default fallback */
  --t-count: 3;
  --t-index: 0;
}

.tThumb{
  position:absolute;
  top:0; left:0;
  height:100%;
  width:calc(100% / var(--t-count));
  border-radius:999px;
  background:#4345c4;

  transform:translateX(calc(var(--t-index) * 100%));
  transition:transform .35s ease, width .35s ease;
}

/* stage: track jalan di belakang panel kiri */
.testiStage{
  position:relative;
  padding-left:0; /* sengaja 0, biar card bisa “masuk” ke bawah overlay */
}

.testiViewport{
  overflow:hidden;
  padding:46px 0;
}

.testiTrack{
  display:flex;
  gap:22px;
  width:max-content;
  will-change:transform;
  transform:translateX(0);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  margin-left:-14px;
}

/* card */
.tCard{
  width:320px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  padding:22px;

  display:flex;
  flex-direction:column;
  min-height:260px; /* samain tinggi biar rapi */
}

.tBody{
  flex:1; /* bikin footer nempel bawah */
}

.tDivider{
  height:1px;
  background:rgba(0,0,0,.08);
  margin:16px 0 14px;
}

.tFooter{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:auto;
}

.tStars{
  margin:0;               /* rapihin spacing */
  color:#4345c4;
  letter-spacing:2px;
  font-size:14px;
}

.tUser{
  display:flex;
  align-items:center;
  gap:12px;
}

.tText{
  margin:0 0 18px;
  color:rgba(0,0,0,.78);
  line-height:1.6;
  font-size:15px;
}

.tAvatar{
  width:38px; height:38px;
  border-radius:999px;
  background:rgba(0,0,0,.12);
  display:inline-block;
}

.tName{ font-weight:800; color:#111; font-size:14px; }
.tMeta{ font-size:12px; color:rgba(0,0,0,.55); }

/* bikin “ngilang halus” pas masuk ke bawah panel kiri */
.testiViewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
}

.tAvatar{
  display:inline-block;
  width:44px;
  height:44px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  flex-shrink:0;
  background-color:#eee;
}

/* avatar lokal */
.avatar-vidiya{
  background-image:url("./assets/img/rossa.avif");
}

.avatar-anggi{
  background-image:url("./assets/img/anggi.avif");
}

.avatar-ayla{
  background-image:url("./assets/img/ayla.avif");
}


/* ================= RESPONSIVE (FULL FINAL) ================= */

/* motion-safe */
@media (prefers-reduced-motion: reduce){
  .testiTrack{ transition:none !important; }
  .tThumb{ transition:none !important; }
}

/* anchor offset (kalau header fixed, adjust angkanya) */
.testi{ scroll-margin-top: 90px; }

/* ================= <= 980px ================= */
@media (max-width: 980px){
  .testiInner{
    min-height:380px;
    padding:8px 0;
  }

  /* panel kiri tetep overlay */
  .testiLeft{
    position:absolute;
    left:-8px;
    top:-8px;
    bottom:-8px;
    width:260px;
    background:#fff;
    z-index:5;

    padding:18px 14px;
    border-radius:22px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 28px rgba(0,0,0,.08);

    margin:0;
    pointer-events:none;
    overflow:hidden;
    isolation:isolate;
  }

  /* tombol tetap bisa dipencet */
  .testiNav,
  .tBtn{ pointer-events:auto; }

  .testiTitle{ font-size:36px; }

  .testiViewport{
    padding:34px 0;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .tCard{ width:260px; }
}

/* ================= <= 560px (HP) ================= */
@media (max-width: 560px){
  .testi{
    padding:44px 0;
    margin-top:48px;
  }

  .testiInner{
    min-height:280px;
    padding:8px 0;
  }

  /* panel kiri: adaptif */
  .testiLeft{
    width:clamp(140px, 48vw, 190px);
    top:10px;
    bottom:auto;
    height:fit-content;
    max-height:calc(100% - 20px);

    padding:10px;
    border-radius:18px;

    justify-content:flex-start;
    overflow:hidden;
    isolation:isolate;
  }

  .testiQuoteMark{
    font-size:42px;
    margin-bottom:6px;
  }

  .testiTitle{
    font-size:24px;
    line-height:1.06;
    margin:0 0 10px;
  }

  .testiNav{ margin-top:6px; }
  .tIndicator{ width:96px; }
  .tBtn{ width:38px; height:38px; }

  /* INI KUNCI: jangan offset track, tapi kasih ruang kiri buat panel */
  .testiViewport{
    padding:22px 0;
    padding-left:calc(clamp(140px, 48vw, 190px) - 16px);
    -webkit-mask-image: none;
            mask-image: none;
  }

  .testiTrack{
    margin-left:0 !important;
  }

  /* card adaptif */
  .tCard{
    width:clamp(180px, 78vw, 240px);
    min-height:170px;
    padding:12px;
    border-radius:16px;
  }

  .tText{
    font-size:10px;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:6;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .tDivider{ margin:10px 0 8px; }
  .tStars{ font-size:13px; }
  .tAvatar{ width:30px; height:30px; }
  .tName{ font-size:13px; }
  .tMeta{ font-size:11px; }
}

/* ================= <= 380px (HP super kecil) ================= */
@media (max-width: 380px){
  .testiLeft{ width:150px; }     /* jangan lebih gede dari mode 560px */
  .tCard{ width:clamp(170px, 82vw, 220px); }
  .tIndicator{ width:86px; }
}

@media (max-width:560px){
  /* container jangan dipotong 56px di layar kecil */
  .testiInner{
    width:calc(100% - 24px) !important; /* dari 56px -> 24px */
  }

  /* panel kecilin dikit biar card ada ruang */
  .testiLeft{
    width:140px !important;
  }

  /* ruang kiri ikut panel (biar card ga ketiban) */
  .testiViewport{
    padding-left:calc(140px - 18px) !important;
  }

  /* card jangan ngotot 240px di layar kecil */
  .tCard{
    width:clamp(160px, 68vw, 210px) !important;
  }
}

@media (max-width:380px){
  .testiLeft{ width:132px !important; }
  .testiViewport{ padding-left:calc(132px - 16px) !important; }
  .tCard{ width:clamp(150px, 76vw, 200px) !important; }
}

@media (max-width:560px){
  .testi{
    --panelW: 140px;
    --panelOverlap: -4px; /* makin kecil = makin ke kanan */
  }

  .testiViewport{
    padding-left: calc(var(--panelW) - var(--panelOverlap)) !important;
  }
}

@media (max-width:560px){
  /* naikin 1 blok slider (safe) */
  .testiViewport{
    padding-top: 10px !important;   /* sebelumnya 22px */
    padding-bottom: 18px !important;
  }

  /* kalau masih kurang naik, paksa dikit */
  .testiTrack{
    transform: translateY(-6px);
  }
}


/* ================= CONTACT SECTION (FULL CSS - UPDATED DROPDOWN) ================= */

.contactSection{
  --cardBg:linear-gradient(135deg, #4345c4 0%, #5a5fe6 60%, #6f72ff 100%);

 /* ganti warna belakangan */
  --ink:#101214;

  /* dropdown solid color (NOT transparent) */
  --ddCardBg:linear-gradient(
  135deg,
  #4345c4 0%,
  #5a5fe6 58%,
  #8a8cff 100%
);
  --ddCardInk:rgba(255,255,255,.85);
  --ddCardSub:rgba(11,12,16,.56);
  --ddCardBorder:rgba(255,255,255,.85);
  --ddCardHover:rgba(0,0,0,.04);
  --ddCardActive:rgba(0,0,0,.06);

  padding:96px 0;
  background:#fff;
}

.contactInner{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:80px;
  align-items:center;
}

/* ================= LEFT CARD ================= */
.contactCard{
  background:var(--cardBg);
  border-radius:26px;
  padding:28px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.16);
}

.contactForm{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cLabel{
  position:relative;
}

.cLabel span{
  display:block;
  font-size:12.5px;
  font-weight:700;
  margin:0 0 8px;
  color:rgba(255,255,255,.85);
}

/* ================= INPUT ================= */
.cLabel input{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.12);
  padding:0 14px;
  color:#fff;
  outline:none;
}

.cLabel input::placeholder{
  color:rgba(255,255,255,.55);
}

/* ================= SELECT (CUSTOM, LOOKS LIKE INPUT) ================= */
.cSelectWrap{
  position:relative;
}

/* hide native select so default white/grey dropdown never appears */
.cSelectWrap select{
  position:absolute;
  inset:0;
  width:100%;
  height:44px;
  opacity:0;
  pointer-events:none;
  appearance:none;
}

/* button field - match input (Name) exactly */
.cSelectBtn{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.12);
  padding:0 42px 0 14px;
  color:#fff;
  outline:none;
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;        /* center vertically */
  justify-content:space-between;

  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* text inside select - align + size match input text */
.cSelectValue{
  font-size:14px;
  font-weight:500;
  line-height:1;
  color:rgba(255,255,255,.92);
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
}

/* placeholder behavior (same vibe as input placeholder) */
.cSelectBtn.is-placeholder .cSelectValue{
  color:rgba(255,255,255,.55);
}

/* triangle arrow (more volume) centered */
.cChevron{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid rgba(255,255,255,.80);
}

/* open state: field follows dropdown tone (solid) */
.cLabel.is-open .cSelectBtn{
  background:var(--ddCardBg);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.cLabel.is-open .cSelectValue{
  color:var(--ddCardInk);
}

.cLabel.is-open .cChevron{
  transform:translateY(-50%) rotate(180deg);
  border-top-color:rgba(255,255,255,.85);
}

/* ================= DROPDOWN (CARD LIKE REF, SOLID COLOR) ================= */
.cDropdown{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:60;

  background:var(--ddCardBg);
  border:1px solid var(--ddCardBorder);
  border-radius:18px;
  padding:10px;
  box-shadow:0 22px 70px rgba(0,0,0,.18);

  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}

.cLabel.is-open .cDropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* option row (clean list like ref) */
.cOpt{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 12px;
  border-radius:14px;
  cursor:pointer;

  font-size:14px;
  font-weight:650;
  color:var(--ddCardInk);

  transition:background .14s ease, transform .14s ease;
}

.cOpt:hover{
  background:var(--ddCardHover);
}

.cOpt.is-active{
  background:var(--ddCardActive);
}

/* bullet small */
.cBullet{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  flex:0 0 6px;
}

/* ================= SUBMIT ================= */
.cBtn--full{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:#fff;
  color:#0b0c10;
  font-weight:900;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.cBtn--full:hover{ filter:brightness(1.02); }
.cBtn--full:active{ transform:translateY(1px); }

.cHint{
  margin:2px 0 0;
  font-size:12.2px;
  color:rgba(255,255,255,.70);
}

/* ================= RIGHT COPY ================= */
.contactCopy{
  max-width:720px;
}

.cPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-size:13px;
  font-weight:700;
}

/* ===== CONTACT TITLE ANIMATION ===== */
.cTitle{
  margin:16px 0 12px;
  font-size:56px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ink);

  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.9,.3,1);
  will-change:opacity, transform;
}

/* saat masuk viewport */
.cTitle.is-in{
  opacity:1;
  transform:translateY(0);
}

/* ===== ACCENT "Today" ===== */
.cTitleAccent{
  display:inline-block;
  position:relative;
  font-style:italic;
  color:#4345c4;

  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.2,.9,.3,1);
  transition-delay:.18s;
}

/* muncul */
.cTitle.is-in .cTitleAccent{
  opacity:1;
  transform:translateY(0);
}

/* ===== NUDGE (denyut halus) ===== */
@keyframes accentNudge{
  0%{ transform:translateY(0) scale(1); }
  40%{ transform:translateY(-2px) scale(1.04); }
  100%{ transform:translateY(0) scale(1); }
}

.cTitle.is-in .cTitleAccent{
  animation:accentNudge .6s ease-out .35s both;
}

/* ===== CAHAYA LEWAT ===== */
.cTitleAccent::after{
  content:"";
  position:absolute;
  inset:-10% -40%;
  background:linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.65),
    transparent 70%
  );
  transform:translateX(-120%);
  opacity:0;
}

/* aktifkan shine setelah muncul */
.cTitle.is-in .cTitleAccent::after{
  opacity:1;
  animation:accentShine 1.2s ease-out .45s forwards;
}

@keyframes accentShine{
  to{ transform:translateX(120%); }
}

/* ===== RESPONSIVE ===== */
@media (max-width:640px){
  .cTitle{ font-size:38px; }
}

.cDesc{
  margin:0 0 34px;
  color:rgba(0,0,0,.55);
  line-height:1.8;
  max-width:620px;
}

.cDesc .cHighlight{
  font-weight:700;
  color:#6f72ff;
}


.cInfoRow{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.cInfo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.05);
  font-weight:700;
  font-size:14px;
}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .contactInner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .contactCard{ max-width:520px; }
  .cTitle{ font-size:44px; }
}

@media (max-width:560px){
  .contactSection{ padding:72px 0; }
  .contactCard{
    padding:24px 18px;
    border-radius:22px;
  }
  .cTitle{ font-size:36px; }
}

/* ================= MOBILE LAYOUT CLEAN ================= */
@media (max-width:980px){

  /* jadi 1 kolom */
  .contactInner{
    grid-template-columns:1fr;
  }

  /* pindahin copy ke atas form */
  .contactCopy{
    order:1;
    text-align:center;
    margin-bottom:24px;
  }

  .contactCard{
    order:2;
  }

  /* center title + desc */
  .contactCopy .cTitle{
    margin:0 0 10px;
  }

  .contactCopy .cDesc{
    margin:0 auto 0;
    max-width:520px;
  }

  /* ================= HIDE YANG GA DIPAKE ================= */
  .contactCopy .cPill,
  .contactCopy .cInfoRow{
    display:none;
  }
}

/* ================= CONTACT CTA — STRONG NUDGE ================= */

.contactCard{
  will-change: transform, box-shadow;
}

/* MAIN NUDGE */
.contactSection.is-nudge .contactCard{
  animation:formLiftGlow 1.15s cubic-bezier(.22,1,.36,1);
}

@keyframes formLiftGlow{
  0%{
    transform:translateY(18px) scale(.985);
    box-shadow:0 22px 60px rgba(0,0,0,.14);
  }
  40%{
    transform:translateY(-6px) scale(1.005);
    box-shadow:0 50px 120px rgba(0,0,0,.28);
  }
  65%{
    transform:translateY(2px) scale(.998);
    box-shadow:0 34px 90px rgba(0,0,0,.20);
  }
  100%{
    transform:translateY(0) scale(1);
    box-shadow:0 30px 80px rgba(0,0,0,.16);
  }
}

/* CTA BUTTON PULSE (IKUTAN NGOMONG) */
.contactSection.is-nudge .cBtn--full{
  animation:ctaPulse .9s ease-out .35s;
}

@keyframes ctaPulse{
  0%{
    transform:scale(1);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
  }
  50%{
    transform:scale(1.06);
    box-shadow:0 22px 60px rgba(0,0,0,.28);
  }
  100%{
    transform:scale(1);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
  }
}

/* FIRST INPUT GLOW (FOCUS MAGNET) */
.contactSection.is-nudge .cLabel:first-child input{
  animation:inputGlow .9s ease-out .45s;
}

@keyframes inputGlow{
  0%{ box-shadow:none; }
  50%{ box-shadow:0 0 0 3px rgba(255,255,255,.28); }
  100%{ box-shadow:none; }
}

/* mobile dikit lebih jinak */
@media (max-width:560px){
  @keyframes formLiftGlow{
    0%{
      transform:translateY(14px) scale(.99);
    }
    40%{
      transform:translateY(-4px) scale(1.003);
    }
    100%{
      transform:translateY(0) scale(1);
    }
  }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .contactSection.is-nudge *{
    animation:none !important;
    transform:none !important;
    box-shadow:inherit !important;
  }
}

/* ================= FOOTER (FORMAL, FLAT, GREY) ================= */
.siteFooter{
  background:#1C1D26;
  padding:64px 0 54px;
}

.footerInner{
  width:min(1120px, calc(100% - 56px));
  margin:0 auto;
}

/* TOP CTA */
.footerTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
}

.footerHeadline{
  margin:0;
  font-size:40px;           /* smaller, closer to ref */
  line-height:1.12;
  letter-spacing:-.01em;
  color:#fff;
}

.footerHeadline .fhLine1{
  display:block;
  font-weight:800;          /* bold */
}

.footerHeadline .fhLine2{
  display:block;
  margin-top:8px;
  font-style:italic;
  font-weight:400;
  color:#fff;    /* grey */
}

/* CTA buttons (flat rectangle, no rounded) */
.footerCtas{
  display:flex;
  gap:14px;
  padding-top:6px;
}

.fBtn{
  height:44px;
  min-width:150px;
  padding:0 18px;
  border-radius:0;          /* NO rounded */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.08);
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
  user-select:none;
}

.fBtn--primary{
  background:#4345c4;       
  color:#fff;
  border-color:transparent;
}

.fBtn:hover{ filter:brightness(1.01); }
.fBtn:active{ transform:translateY(1px); box-shadow:0 10px 26px rgba(0,0,0,.10); }

/* divider */
.footerDivider{
  margin:34px 0 30px;
  height:1px;
  background:#fff;
}

/* bottom grid */
.footerBottom{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:44px;
  align-items:start;
}

/* brand */
.fLogo{
  font-weight:800;
  font-size:22px;
  letter-spacing:-.01em;
  color:#fff;
  margin-bottom:10px;
}

.fDesc{
  margin:0 0 16px;
  color:#fff;
  line-height:1.7;
  font-size:14px;
  max-width:240px;
}

.fSocial{
  display:flex;
  gap:14px;
}

.fSocial a{
  width:auto;
  height:auto;
  border-radius:0;          /* NO rounded */
  padding:0;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  transition:color .16s ease;
}
.fSocial a:hover{ color:#111; }

/* columns */
.footerCols{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:28px;
}

.fColTitle{
  font-weight:800;
  color:#fff;
  margin-bottom:12px;
  font-size:14px;
}

.fCol a{
  display:block;
  text-decoration:none;
  color:#fff;
  font-weight:600;
  font-size:13.5px;
  margin:10px 0;
  transition:color .16s ease;
}
.fCol a:hover{ color:#111; }

/* ================= Elegant reveal (subtle) ================= */
.reveal{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

/* stagger inside headline */
.footerHeadline .fhLine1,
.footerHeadline .fhLine2{
  display:block;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.is-in .fhLine1{ opacity:1; transform:translateY(0); transition-delay:.04s; }
.reveal.is-in .fhLine2{ opacity:1; transform:translateY(0); transition-delay:.12s; }

/* responsive */
@media (max-width:980px){
  .footerTop{ flex-direction:column; }
  .footerCtas{ padding-top:0; }

  .footerHeadline{ font-size:34px; }

  .footerBottom{ grid-template-columns:1fr; }
  .fDesc{ max-width:520px; }
  .footerCols{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Footer size down (biar gak nabrak section sebelumnya) ===== */
.siteFooter{
  padding-top:38px;     /* tadi 64px -> kecilin */
  padding-bottom:44px;
}

.footerTop{
  gap:18px;
  align-items:center;
}

.footerHeadline{
  font-size:24px;       /* tadi 40px -> kecilin */
  line-height:1.1;
}

.footerHeadline .fhLine2{
  margin-top:6px;
  font-size:18px;       /* italic line ikut turun biar balance */
}

.footerCtas{
  padding-top:0;
}

.fBtn{
  height:40px;          /* tombol lebih compact */
  min-width:132px;
  padding:0 16px;
  box-shadow:0 14px 34px rgba(0,0,0,.07);
}

.footerDivider{
  margin:22px 0 20px;   /* jarak divider dipangkas */
}

/* bottom area juga sedikit dipadatkan */
.footerBottom{
  gap:34px;
}

.footerCols{
  gap:22px;
}

.fCol a{
  margin:8px 0;
}


/* ================= FOOTER — MOBILE FINAL OVERRIDE ================= */
@media (max-width:560px){

  /* spacing footer dipadatkan */
  .siteFooter{
    padding:28px 0 40px;
  }

  /* top row: teks kiri, tombol kanan (kayak desktop) */
  .footerTop{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }

  /* headline diperkecil tapi tetap desktop-style */
  .footerHeadline{
    font-size:14px;
    line-height:1.12;
    letter-spacing:-.01em;
    max-width:220px;
    margin:0;
  }

  .footerHeadline .fhLine1{
    font-weight:800;
  }

  .footerHeadline .fhLine2{
    font-size:10px;
    margin-top:6px;
    font-style:italic;
    font-weight:600;
    color:#fff;
  }

  /* CTA container */
  .footerCtas{
    flex-shrink:0;
    padding-top:0;
  }

  /* tombol utama diperkecil */
  .fBtn--primary{
    height:38px;
    min-width:132px;
    padding:0 16px;
    font-size:13.5px;
    box-shadow:0 12px 30px rgba(0,0,0,.07);
  }

  /* divider dipadatkan */
  .footerDivider{
    margin:20px 0 18px;
  }
}

/* ===== MOBILE: HIDE BRAND TEXT ONLY (KEEP SOCIAL ICONS) ===== */
@media (max-width:560px){
  .footerBrand .fLogo,
  .footerBrand .fDesc{
    display:none;
  }
}

.fBtn--primary{
  position:relative;
  overflow:hidden;
  background:#4345c4;
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 30px rgba(67,69,196,.28);
}

.fBtn--primary::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-18deg);
  animation:ctaSheen 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes ctaSheen{
  0%, 62% { transform:translateX(0) skewX(-18deg); opacity:0; }
  66%     { opacity:1; }
  88%     { transform:translateX(320%) skewX(-18deg); opacity:0; }
  100%    { opacity:0; }
}



/* ================= FLOATING BUTTONS (SMALL + CLEAN) ================= */
.floatBtns{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* base */
.fab{
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  padding:0;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 14px 34px rgba(0,0,0,.18);
  transition:transform .18s ease, opacity .18s ease, filter .18s ease;
}

.fab:active{ transform:translateY(1px); }

/* hide when menu open */
.floatBtns.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
}

/* icon base */
.fabIco{
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* ================= SCROLL TOP (UP ARROW, PURPLE) ================= */
.fab--top{
  background:#6f72ff;
}

/* UP arrow (SVG) */
.fabIco--top{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M5 13 L11 7 L17 13' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ================= WHATSAPP (GREEN + WHITE RING + WHITE PHONE) ================= */
.fab--wa{
  background:#25D366;
}

/* WA ring + handset (SVG, clean) */
.fabIco--wa{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8' fill='none' stroke='%23ffffff' stroke-width='2.6'/%3E%3Cpath d='M7.3 8.1 C8.7 10.2 10.2 11.5 12.2 12.9 C13.0 13.4 13.8 13.7 14.6 13.9' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M6.9 7.7 L8.0 6.6' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M15.1 14.3 L14.0 15.4' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* subtle wiggle (minimal) */
@keyframes waWiggle{
  0%, 92%, 100% { transform:translateX(0); }
  94% { transform:translateX(-1px); }
  96% { transform:translateX(1px); }
  98% { transform:translateX(-1px); }
}
.fab--wa{
  animation:waWiggle 4.8s ease-in-out infinite;
}

/* smaller on very small screens */
@media (max-width:360px){
  .fab{ width:42px; height:42px; }
  .fabIco{ width:21px; height:21px; }
}

/* ================= COPYRIGHT ================= */
.footer {
  padding-bottom: 24px; /* jarak aman */
}

.copyright {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(0,0,0,.08);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  color: #fff;
  background:#1C1D26;
}

.copyright strong {
  font-weight: 600;
  color: #111;
}

.copyright .sep {
  opacity: .4;
}

/* ===== PROMO POPUP (FULL CSS) ===== */
.pOverlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:9999;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}

.pOverlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* ===== MODAL ===== */
.pModal{
  width:100%;
  max-width:320px;
  background:#fff;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  padding:14px;
  position:relative;

  opacity:0;
  transform:translateY(16px) scale(.94);
  transition:
    transform .35s cubic-bezier(.2,.9,.3,1),
    opacity .25s ease;
}

.pOverlay.is-open .pModal{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* open animation (soft bounce) */
@keyframes popupIn{
  0%{ transform:translateY(22px) scale(.92); opacity:0; }
  60%{ transform:translateY(-4px) scale(1.02); opacity:1; }
  100%{ transform:translateY(0) scale(1); }
}
.pOverlay.is-open .pModal{
  animation: popupIn .45s cubic-bezier(.2,.9,.3,1);
}

/* close animation */
@keyframes popupOut{
  to{ transform:translateY(14px) scale(.96); opacity:0; }
}
.pOverlay.is-closing .pModal{
  animation: popupOut .22s ease forwards;
}

/* ===== FOTO (TETEP ADA) ===== */
.pMedia{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:16px;
  overflow:hidden;
  background:#f2f3ff;
  border:1px solid rgba(0,0,0,.06);
  margin-bottom:12px;

  opacity:0;
  transform:scale(.96);
  transition:opacity .35s ease, transform .35s ease;
}

.pOverlay.is-open .pMedia{
  opacity:1;
  transform:scale(1);
  transition-delay:.14s;
}

.pImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== TOMBOL "TUTUP" (GRADIENT + SHINE + NUDGE) ===== */
.pBtn{
  width:100%;
  height:42px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  color:#fff;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  position:relative;
  overflow:hidden;

  background:linear-gradient(135deg, #4345c4, #6f72ff);
  box-shadow:
    0 16px 34px rgba(67,69,196,.35),
    inset 0 0 0 1px rgba(255,255,255,.22);

  opacity:0;
  transform:translateY(6px);
  transition:
    transform .14s ease,
    box-shadow .18s ease,
    opacity .25s ease,
    filter .18s ease;
}

/* shine effect lewat */
.pBtn::after{
  content:"";
  position:absolute;
  inset:-60% -30%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55), transparent 70%);
  transform:translateX(-120%);
  opacity:.9;
  transition:transform .6s ease;
}

/* masuk stagger */
.pOverlay.is-open .pBtn{
  opacity:1;
  transform:translateY(0);
  transition-delay:.26s;
}

/* hover: denyut/nudge + shine lewat */
@keyframes btnPulse{
  0%{ transform:translateY(0) scale(1); }
  40%{ transform:translateY(-1px) scale(1.03); }
  100%{ transform:translateY(0) scale(1); }
}
.pBtn:hover{
  animation:btnPulse .55s ease-in-out;
  box-shadow:
    0 20px 44px rgba(67,69,196,.42),
    inset 0 0 0 1px rgba(255,255,255,.26);
  filter:saturate(1.05);
}
.pBtn:hover::after{
  transform:translateX(120%);
}

/* active: pressed nudge */
.pBtn:active{
  transform:translateY(0) scale(.96);
  box-shadow:
    0 10px 26px rgba(67,69,196,.28),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ===== LOCK SCROLL ===== */
body.modal-lock{ overflow:hidden; }

/* ===== RESPONSIVE ===== */
@media (max-width:640px){
  .pModal{ max-width:280px; padding:12px; border-radius:18px; }
  .pMedia{ border-radius:14px; }
  .pBtn{ height:40px; border-radius:13px; font-size:13.5px; }
}
@media (max-width:380px){
  .pModal{ max-width:240px; padding:11px; }
  .pBtn{ height:38px; font-size:13px; }
}

/* ===== REDUCE MOTION ===== */
@media (prefers-reduced-motion: reduce){
  .pOverlay, .pModal, .pMedia, .pBtn{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
  .pBtn::after{ display:none !important; }
}

::-webkit-scrollbar{
  width:8px;
}
::-webkit-scrollbar-track{
  background:transparent;
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(#4345c4, #6f72ff);
  border-radius:999px;
}