:root{
  --bg:#060a14;
  --bg2:#0a1020;

  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.56);

  --blue:#2563eb;
  --blue2:#3b82f6;
  --blue3:#60a5fa;

  --card:rgba(255,255,255,.05);
  --radius:22px;
  --max:1200px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  --easeOut: cubic-bezier(.2,.9,.2,1);
  --easeSoft: cubic-bezier(.2,.7,.2,1);

  /* fallback untuk browser lama / no-webp */
  --bgFallback: url("https://hub.tcasia.guru/wp-content/uploads/2026/02/bg-1600.jpg");

  /* responsive webp (browser modern) */
  --bgSet: image-set(
    url("https://hub.tcasia.guru/wp-content/uploads/2026/02/bg-960.webp") 1x,
    url("https://hub.tcasia.guru/wp-content/uploads/2026/02/bg-1600.webp") 2x,
    url("https://hub.tcasia.guru/wp-content/uploads/2026/02/bg-2200.webp") 3x
  );
}

*{box-sizing:border-box}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #060a14 !important;
  overscroll-behavior-y: none;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background-color: #060a14 !important;
}

/* ===== Subtle Grain Overlay (non-repeating, single-layer feel) ===== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;              /* above background, below content (content z-index lebih tinggi pada section wrap) */
  opacity:.055;           /* adjust 0.035 – 0.08 */
  mix-blend-mode: overlay; /* premium film grain feel */
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(circle at 72% 38%, rgba(255,255,255,.08), transparent 42%),
    radial-gradient(circle at 45% 78%, rgba(255,255,255,.06), transparent 46%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 3px
    );
  filter: contrast(120%) brightness(95%);
  transform: translateZ(0);
}

/* pastikan semua content berada atas grain */
.section, .header, .footer, .mobileMenu{
  position:relative;
  z-index:2;
}

/* reduce motion users: keep static grain (ok), but reduce intensity slightly */
@media (prefers-reduced-motion: reduce){
  body::before{ opacity:.045; }
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

.section{padding:96px 0; position:relative; overflow:hidden;}
.hairline{
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.12), rgba(96,165,250,.28), rgba(59,130,246,.12), transparent);
  background-size: 220% 100%;
  animation: hairMove 5.5s linear infinite;
  opacity:.85;
}
@keyframes hairMove{0%{background-position:0% 0%}100%{background-position:220% 0%}}

.kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:800;
  color: rgba(191,219,254,.78);
  margin-bottom:14px;
}
h1,h2,h3{margin:0}
h1{
  font-size: clamp(40px, 5.2vw, 82px);
  line-height:1.02;
  font-weight: 950;
  letter-spacing: -0.03em;
  text-shadow: 0 14px 70px rgba(0,0,0,.35);
}
h2{
  font-size: clamp(28px, 3.4vw, 52px);
  line-height:1.12;
  font-weight: 950;
  letter-spacing: -0.02em;
  text-shadow: 0 18px 80px rgba(0,0,0,.28);
}
h3{font-size:20px;font-weight:900;letter-spacing:-0.01em}
.lead{
  margin-top:14px;
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--muted);
  max-width: 70ch;
}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}

.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  position:relative;
  transition: transform .18s var(--easeSoft), border-color .25s var(--easeSoft), background .25s var(--easeSoft);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  pointer-events:none;
  opacity:0;
  transition: opacity .25s var(--easeSoft);
  background: radial-gradient(600px 220px at 20% 0%, rgba(96,165,250,.22), transparent 55%);
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(59,130,246,.20);
  background: rgba(255,255,255,.06);
}
.card:hover::after{opacity:1}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing:.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, background .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .25s var(--easeSoft);
  white-space:nowrap;
}
.btn:active{transform: translateY(1px);}
.btnPrimary{
  background: var(--blue);
  color: #fff;
  border-color: rgba(59,130,246,.30);
  box-shadow: 0 18px 55px rgba(37,99,235,.20);
  position:relative;
  overflow:hidden;
}
.btnPrimary:hover{background: var(--blue2); box-shadow: 0 22px 70px rgba(37,99,235,.26);}
.btnPrimary::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-60%) rotate(8deg);
  transition: transform .9s var(--easeSoft);
  pointer-events:none;
}
.btnPrimary:hover::after{transform: translateX(60%) rotate(8deg);}
.btnGhost{
  background: transparent;
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.btnGhost:hover{background: rgba(255,255,255,.05);}
.btn svg{width:18px;height:18px; transition: transform .2s ease;}
.btnPrimary:hover svg{transform: translateX(4px);}

.btnMag{will-change: transform; transform: translate3d(0,0,0); transition: transform .12s var(--easeSoft);}
.btnMagInner{display:inline-flex;align-items:center;gap:12px;transition: transform .12s var(--easeSoft);will-change: transform;}

.textLink{
  display:inline-flex; align-items:center; gap:10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-size: 12px;
  color: rgba(191,219,254,.86);
  transition: gap .2s ease, color .2s ease;
}
.textLink:hover{gap:14px; color:#fff;}
.textLink svg{width:16px;height:16px}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:9999;
  backdrop-filter: blur(10px);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 40px rgba(0,0,0,.30);
}
.headerInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.02em;
  min-width: 240px;
}
.siteLogo{
  height:46px;
  width:auto;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.38));
  transition: transform .22s ease, opacity .22s ease, filter .22s ease;
}
.brand:hover .siteLogo{
  transform: translateY(-1px);
  opacity:.96;
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,.45))
    drop-shadow(0 0 18px rgba(59,130,246,.18));
}
.brandText{line-height:1.05;}
.brandTop{
  font-weight:950;
  font-size:14px;
  letter-spacing:.08em;
  text-transform: uppercase;
}
.brandSub{
  margin-top:6px;
  font-size:11px;
  letter-spacing:.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.nav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav a{
  color: rgba(255,255,255,.72);
  font-size:13px;
  padding:9px 12px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  border:1px solid transparent;
}
.nav a:hover{
  color:#fff;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.nav a.active,
.menuNav a.active{
  color:#fff;
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.28);
  box-shadow: 0 0 18px rgba(59,130,246,.18);
}
.headerActions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:120px;}
.btnLang{padding:10px 14px;font-size:12px;letter-spacing:.12em;}

.btnMenu{display:none; padding:10px 12px;}
.menuIcon{width:18px;height:12px;display:block;position:relative;border-top:2px solid rgba(255,255,255,.86);}
.menuIcon::before,.menuIcon::after{content:"";position:absolute;left:0;right:0;border-top:2px solid rgba(255,255,255,.86);}
.menuIcon::before{top:4px;}
.menuIcon::after{top:8px;}

@media (max-width: 980px){
  .nav{display:none;}
  .btnMenu{display:inline-flex;}
  .brandSub{display:none;}
  .siteLogo{height:44px;}
}

/* Mobile Menu */
.menuOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index:80;
}
.mobileMenu{
  position:fixed; top:0; right:0;
  height:100%;
  width:min(420px, 88vw);
  background: rgba(6,10,20,.92);
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -30px 0 80px rgba(0,0,0,.55);
  z-index:90;
  transform: translateX(102%);
  transition: transform .22s ease;
  display:flex; flex-direction:column;
  padding:18px;
}
.mobileMenu.open{transform: translateX(0);}
.menuTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10);}
.menuBrand{display:flex;align-items:center;gap:12px;}
.menuLogo{height:44px;width:auto;filter: drop-shadow(0 8px 22px rgba(0,0,0,.38));}
.menuBrandTop{font-weight:950;font-size:13px;letter-spacing:.10em;text-transform:uppercase;}
.menuBrandSub{margin-top:6px;font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;color: rgba(255,255,255,.55);}
.btnClose{padding:10px 12px;font-size:16px;line-height:1;}
.menuNav{display:flex;flex-direction:column;padding:14px 0;gap:8px;}
.menuNav a{
  padding:12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  font-weight:900;
  letter-spacing:.04em;
}
.menuNav a:hover{background: rgba(255,255,255,.05);border-color: rgba(59,130,246,.20);}
.menuFoot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;gap:12px;}
.menuCTA{width:100%;justify-content:center;}
.menuNote{font-size:12px;color: rgba(255,255,255,.60);text-align:center;}

/* Background sections */
.bgImage{
  position:relative;
  min-height:100vh;
  background-image: var(--bgFallback);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow:hidden;
}
/* lock hero & background section from child overflow */
.hero,
.bgImage{
  overflow:hidden;
  position:relative;
}

/* modern browser override */
@supports (background-image: image-set(url("x.webp") 1x)){
  .bgImage{
    background-image: var(--bgSet);
  }
}
.bgImage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  /* Ultra-dark cinematic cover (image barely visible) */
  background:
    /* slight blue depth only */
    radial-gradient(900px 520px at 55% 30%, rgba(37,99,235,.07), transparent 60%),
    /* hard dark cover */
    linear-gradient(
      180deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.92) 45%,
      rgba(0,0,0,.94) 100%
    );
}
.bgImage > .wrap{
  position:relative;
  z-index:1;
}
@keyframes bgDrift{0%{background-position:50% 50%}100%{background-position:52% 48%}}

/* Hero */
.hero{padding:84px 0 70px; position:relative;}
.heroGrid{display:grid;grid-template-columns: 1.2fr .8fr;gap:26px;align-items:end;}
@media (max-width: 980px){.heroGrid{grid-template-columns:1fr;}}

.heroTitle .accent{
  background: linear-gradient(90deg, var(--blue3), var(--blue2), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position:relative;
}
.heroTitle .accent::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-60%);
  mix-blend-mode: screen;
  opacity:.55;
  animation: shimmer 5.8s var(--easeSoft) infinite;
  pointer-events:none;
}
@keyframes shimmer{0%{transform:translateX(-70%)}55%{transform:translateX(70%)}100%{transform:translateX(70%)}}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,.18);
  background: rgba(59,130,246,.07);
  color: rgba(191,219,254,.90);
  font-size:13px;
  font-weight: 800;
  letter-spacing:.02em;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(96,165,250,.95);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}
.heroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.heroSide{padding:22px;}
.sideTitle{font-weight:950;font-size:18px;letter-spacing:-.01em;}
.sideBig{margin-top:10px;font-size:18px;font-weight:900;color: rgba(255,255,255,.90);}
.micro{margin-top:12px;font-size:13px;color: rgba(255,255,255,.60);}

/* Start here */
.startHere{margin-top:26px;display:grid;grid-template-columns: 1fr 1fr 1fr;gap:14px;}
@media (max-width: 980px){.startHere{grid-template-columns:1fr}}
.step{padding:18px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.10);background: rgba(15,23,42,.22);cursor:pointer;}
.step:focus{outline:2px solid rgba(59,130,246,.35);outline-offset:2px;}
.stepNum{position:absolute;right:16px;top:10px;font-size:34px;font-weight:950;color: rgba(255,255,255,.12);letter-spacing:-.02em;}
.step b{display:block;font-weight:950;letter-spacing:-.01em;}
.step p{margin:10px 0 0;color: rgba(255,255,255,.72);font-size:14px;max-width:60ch;}

/* Standards strip */
.standards{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;}
.standard{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(6,10,20,.35);
  backdrop-filter: blur(8px);
}
.badge{
  display:inline-flex;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.10);
  color: rgba(191,219,254,.92);
  font-size:12px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.stdText{font-size:13px;color: rgba(255,255,255,.70);white-space:nowrap;}
@media (max-width: 980px){.stdText{white-space:normal;}}

/* Ticker */
.ticker{
  margin-top:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(6,10,20,.32);
  backdrop-filter: blur(10px);
  overflow:hidden;
  max-width: 680px;
}
.tickerTrack{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;
  white-space:nowrap;
  animation: tickerMove 18s linear infinite;
  will-change: transform;
}
.tickText{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color: rgba(255,255,255,.76);font-weight:900;
}
.tickSep{color: rgba(255,255,255,.32);font-weight:900;}
.tickGap{width:26px;display:inline-block;}
@keyframes tickerMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (hover:hover){.ticker:hover .tickerTrack{animation-play-state: paused;}}
@media (max-width: 980px){.tickerTrack{animation-duration: 24s;}}
/* signal bars */
.signal{display:inline-flex;align-items:flex-end;gap:3px;height:12px;padding:0 2px;margin-right:2px;opacity:.9;}
.signal span{
  width:3px;height:6px;border-radius:999px;background: rgba(96,165,250,.95);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
  animation: sig 1.25s var(--easeSoft) infinite;
}
.signal span:nth-child(2){animation-delay:.14s;height:9px;opacity:.85;}
.signal span:nth-child(3){animation-delay:.28s;height:7px;opacity:.75;}
@keyframes sig{0%,100%{transform:scaleY(.55);opacity:.60;}45%{transform:scaleY(1.15);opacity:1;}}

/* Directions */
.directions{display:grid;grid-template-columns: 1fr 1fr;gap:16px;margin-top:28px;}
@media (max-width: 980px){.directions{grid-template-columns:1fr}}
.dir{padding:22px;position:relative;overflow:hidden;}
.dirNum{font-weight:950;font-size:34px;color: rgba(255,255,255,.14);position:absolute;right:18px;top:12px;letter-spacing:-.02em;}
.dirLabel{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:900;color: rgba(255,255,255,.70);}
.dirText{margin-top:10px;color: rgba(255,255,255,.78);font-size:16px;max-width:62ch;}
.underline{text-decoration:underline;text-underline-offset:3px;color: rgba(191,219,254,.92);font-weight:900;}

/* Why grid */
.whyGrid{margin-top:26px;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:14px;}
@media (max-width: 980px){.whyGrid{grid-template-columns:1fr}}
.whyCard{padding:20px;border:1px solid rgba(255,255,255,.10);background: rgba(15,23,42,.22);}
.whyTop{display:flex;align-items:center;gap:12px;}
.whyIcon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;color: rgba(255,255,255,.90);
  border:1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.10);
}
.whyTitle{font-weight:950;font-size:16px;letter-spacing:-.01em;}
.whyDesc{margin-top:10px;color: rgba(255,255,255,.72);font-size:14px;max-width:70ch;}
.whyCTA{margin-top:18px;}

/* Video */
.videoWrap{margin-top:26px;display:grid;grid-template-columns: 1fr 1fr;gap:18px;align-items:stretch;}
@media (max-width: 980px){.videoWrap{grid-template-columns:1fr}}
.videoCard{
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(96,165,250,.10));
  position:relative;
}
.videoCard iframe{width:100%;height:100%;border:0}
.videoPlaceholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:20px;
  color: rgba(255,255,255,.70);
  font-weight: 800;
}
.videoSide{padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;}
.bullet{display:flex;gap:10px;align-items:flex-start;color: rgba(255,255,255,.75);font-size:15px;}
.bullet i{width:8px;height:8px;border-radius:999px;margin-top:8px;background: rgba(96,165,250,.95);box-shadow: 0 0 0 4px rgba(37,99,235,.18);flex:0 0 auto;}
/* =========================
   Lite YouTube (click-to-load)
   ========================= */
.ytLite{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  cursor:pointer;
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  color: rgba(255,255,255,.80);
  font-weight: 900;
  letter-spacing:.02em;
}
.ytLite .ytOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 50% 40%, rgba(37,99,235,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.70));
}
.ytLite .ytPlay{
  position:relative;
  z-index:2;
  width:74px;
  height:74px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(6,10,20,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ytLite .ytTri{
  width:0;height:0;
  border-left: 18px solid rgba(255,255,255,.92);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}
.ytLite:hover .ytPlay{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.35);
  background: rgba(6,10,20,.62);
}
.ytLite .ytMeta{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:2;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight: 950;
  color: rgba(255,255,255,.85);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(6,10,20,.55);
  backdrop-filter: blur(10px);
}
.ytLoaded{
  padding:0 !important;
  cursor:default !important;
  background:none !important;
}

/* =========================
   Checklist (Mindset Preparation)
   ========================= */
.checkGrid{
  margin-top:26px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .checkGrid{ grid-template-columns: 1fr; }
}

.checkCard{ padding:22px; }
.checkSide{ padding:22px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; }

.checkTitle{
  font-weight:950;
  font-size:18px;
  letter-spacing:-.01em;
  margin-bottom:14px;
}

.checkList{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.checkItem{
  position:relative;
  padding-left:34px;
  color: rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.5;
}
.checkItem::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:24px;
  height:24px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:#fff;
  border:1px solid rgba(59,130,246,.28);
  background: rgba(59,130,246,.12);
  box-shadow: 0 0 18px rgba(59,130,246,.10);
}

/* Projects carousel */
.carousel{margin-top:26px;display:flex;gap:14px;overflow:auto;padding-bottom:8px;scroll-snap-type:x mandatory;}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background: rgba(255,255,255,.14); border-radius:999px}
.proj{min-width:320px;max-width:320px;scroll-snap-align:start;padding:20px;position:relative;}
.projTag{
  display:inline-flex;padding:8px 10px;border-radius:999px;
  border:1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.08);
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color: rgba(191,219,254,.90);
}
.projTitle{margin-top:14px;font-weight:950;font-size:18px;letter-spacing:-.01em;}
.projDesc{margin-top:10px;color: rgba(255,255,255,.72);font-size:14px;}
.projFoot{margin-top:16px;}

/* Mentors */
.grid3{display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:14px;margin-top:26px;}
@media (max-width: 980px){.grid3{grid-template-columns:1fr}}
.person{padding:18px;display:flex;gap:14px;align-items:center;}
.avatar{
  width:54px;height:54px;border-radius:16px;
  background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(37,99,235,.10));
  border:1px solid rgba(59,130,246,.22);
  display:flex;align-items:center;justify-content:center;
  font-weight:950;color: rgba(255,255,255,.85);
  flex:0 0 auto;
}
.pName{font-weight:950}
.pRole{color: rgba(255,255,255,.68); font-size:13px; margin-top:4px}

/* Mentors carousel (16 cards auto-slide) */
/* Mentors carousel (fixed card sizes, nice on mobile/tablet) */
.mentorCarousel{
  margin-top:26px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.mentorCarousel::-webkit-scrollbar{height:8px}
.mentorCarousel::-webkit-scrollbar-thumb{background: rgba(255,255,255,.14); border-radius:999px}

.mentorTrack{
  display:flex;
  gap:14px;
  width:max-content;
}

.mentorCard{
  min-width: 260px;
  max-width: 260px;
  padding:16px 16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
}
.mentorCard:focus{ outline:2px solid rgba(59,130,246,.35); outline-offset:2px; }

@media (max-width: 980px){
  .mentorCard{ min-width: 240px; max-width: 240px; }
}

@media (max-width: 560px){
  .mentorCard{ min-width: 220px; max-width: 220px; }
  .pName{ font-size:14px; }
  .pRole{ font-size:12px; }
}

/* ===== Mentor Card Rating ===== */
.ratingRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,.55);
}

.starWrap{
  position:relative;
  display:inline-block;
  line-height:1;
  letter-spacing:2px;
}

.starWrap::before{
  content:"★★★★★";
  color: rgba(255,255,255,.20);
}

.starWrap::after{
  content:"★★★★★";
  color: rgba(255,255,255,.90);
  position:absolute;
  left:0;
  top:0;
  width: var(--pct, 0%);
  overflow:hidden;
  white-space:nowrap;
}

.ratingMeta{ opacity:.85; }

/* avatar image support */
.avatar{ overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* avatar image support */
.avatar{ overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Final */
.final{
  background:
    linear-gradient(180deg, rgba(6,10,20,.90), rgba(6,10,20,.94)),
    radial-gradient(900px 650px at 60% 30%, rgba(37,99,235,.22), transparent 60%),
    var(--bgFallback);
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}

@supports (background-image: image-set(url("x.webp") 1x)){
  .final{
    background:
      linear-gradient(180deg, rgba(6,10,20,.90), rgba(6,10,20,.94)),
      radial-gradient(900px 650px at 60% 30%, rgba(37,99,235,.22), transparent 60%),
      var(--bgSet);
  }
}
.finalBox{
  padding:28px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(6,10,20,.55);
  backdrop-filter: blur(10px);
  max-width: 920px;
  margin: 0 auto;
  text-align:center;
}

/* Footer */
.footer{padding:46px 0;border-top:1px solid rgba(255,255,255,.10);color: rgba(255,255,255,.60);font-size:13px;}
.footerGrid{display:grid;grid-template-columns: 1.2fr .8fr;gap:18px;align-items:start;}
@media (max-width: 980px){.footerGrid{grid-template-columns:1fr}}
.footLinks{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.footLinks a{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background: rgba(255,255,255,.03);color: rgba(255,255,255,.72);}
.footLinks a:hover{color:#fff;background: rgba(255,255,255,.05);}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(14px);
  filter: blur(8px);
  transition: opacity .8s var(--easeOut), transform .8s var(--easeOut), filter .8s var(--easeOut);
  will-change: transform, opacity, filter;
}
.reveal.in{opacity:1;transform: translateY(0);filter: blur(0);}

/* Hero cinematic entrance */
.hero .pill,
.hero h1,
.hero .lead,
.hero .ticker,
.hero .standards,
.hero .heroActions,
.hero .heroSide,
.hero .startHere{opacity:0;transform: translateY(12px);filter: blur(6px);}

.heroLoaded .hero .pill{ animation: inUp .75s var(--easeOut) .05s forwards; }
.heroLoaded .hero .ticker{ animation: inUp .85s var(--easeOut) .10s forwards; }
.heroLoaded .hero h1{ animation: inUp .85s var(--easeOut) .14s forwards; }
.heroLoaded .hero .lead{ animation: inUp .85s var(--easeOut) .22s forwards; }
.heroLoaded .hero .standards{ animation: inUp .85s var(--easeOut) .30s forwards; }
.heroLoaded .hero .heroActions{ animation: inUp .85s var(--easeOut) .38s forwards; }
.heroLoaded .hero .heroSide{ animation: inUp .95s var(--easeOut) .26s forwards; }
.heroLoaded .hero .startHere{ animation: inUp .95s var(--easeOut) .46s forwards; }

@keyframes inUp{to{opacity:1;transform: translateY(0);filter: blur(0);}}

/* Hero FX: orbs + watermark + spotlight + tech overlay */
.heroFX{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.hero .wrap{position:relative; z-index:1;}

.orb{
  position:absolute;
  width:520px;height:520px;border-radius:999px;
  filter: blur(36px);
  opacity:.16;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.orbA{left:-180px;top:-220px;background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.9), transparent 55%);}
.orbB{right:-220px;top:140px;width:560px;height:560px;opacity:.14;background: radial-gradient(circle at 35% 35%, rgba(37,99,235,.85), transparent 55%);}
.orbC{left:18%;bottom:-320px;width:640px;height:640px;opacity:.10;background: radial-gradient(circle at 40% 40%, rgba(96,165,250,.7), transparent 60%);}

.wmLogo{
  position:absolute;
  right:-160px; top:40px;
  width:560px; height:560px;
  background: url("https://hub.tcasia.guru/wp-content/uploads/2024/08/cropped-TC-270x270.png") no-repeat center;
  background-size:contain;
  opacity:.045;
  transform: translate3d(0,0,0);
  will-change: transform;
  filter: blur(.2px);
}
.spotlight{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.35;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 60%);
  transition: opacity .3s ease;
  mix-blend-mode: screen;
}

/* high-tech overlay */
.heroFX::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(circle at 30% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 45%, rgba(0,0,0,0) 78%);
}
.heroFX::after{
  content:"";
  position:absolute; inset:-40% 0;
  pointer-events:none;
  opacity:.10;
  background: linear-gradient(180deg, transparent, rgba(96,165,250,.18), transparent);
  transform: translateY(-30%);
  animation: scan 8.5s var(--easeSoft) infinite;
  mask-image: radial-gradient(circle at 55% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 45%, rgba(0,0,0,0) 78%);
}
@keyframes scan{0%{transform: translateY(-35%);}100%{transform: translateY(35%);}}

/* Mobile + reduced motion safety */
@media (max-width: 980px){
  .wmLogo{display:none;}
  .spotlight{display:none;}
  .orb{opacity:.10;}
  /* optional: keep grid, remove scanline on mobile for battery */
  .heroFX::after{display:none;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .heroFX{display:none;}
  .heroTitle .accent::after{display:none;}
}

/* Safari fallback */
@supports not (backdrop-filter: blur(8px)){
  .card{background: rgba(255,255,255,.06);}
  .header{background: rgba(6,10,20,.92);}
  .ticker,.standard{background: rgba(6,10,20,.55);}
}

/* =========================
   RESPONSIVE PRO PATCH v1
   Targets: iPad / Fold / Mobile / Ultrawide
   ========================= */

/* --- global anti-overflow (fix “content hilang sebelah kanan”) --- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

/* safe-area padding for iOS notch devices */
.wrap{
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* smoother horizontal scroll for carousel */
.carousel{
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 24px;
}

/* prevent accidental wide elements from breaking layout */
img, iframe{
  max-width:100%;
}

/* --- typography scaling: fix tablet “kecil sangat” --- */
h1{
  font-size: clamp(36px, 4.8vw, 86px);
  line-height: 1.06;
}
h2{
  font-size: clamp(26px, 3.2vw, 52px);
}
.lead{
  font-size: clamp(15px, 1.45vw, 18px);
}

/* --- Tablet / iPad baseline (<=1200) --- */
@media (max-width: 1200px){
  .section{ padding: 82px 0; }

  /* hero jadi 1 column supaya tak sempit */
  .heroGrid{
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  /* cards grids */
  .grid3{ grid-template-columns: 1fr 1fr; }
  .directions{ grid-template-columns: 1fr; }
}

/* --- iPad portrait + phone besar (<=980) --- */
@media (max-width: 980px){
  .section{ padding: 74px 0; }

  /* header padding lebih comfy */
  .headerInner{ padding: 14px 0; }

  /* startHere jangan squeeze */
  .startHere{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* video stack */
  .videoWrap{
    grid-template-columns: 1fr;
  }

  /* guru cards jadi 1 column (lebih clean) */
  .grid3{ grid-template-columns: 1fr; }
}

/* --- Mobile (<=768) --- */
@media (max-width: 768px){
  .wrap{ padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }

  .section{ padding: 64px 0; }

  h1{ font-size: clamp(34px, 9vw, 56px); line-height: 1.08; }
  h2{ font-size: clamp(22px, 6.2vw, 34px); }

  /* CTA: full width, premium mobile feel */
  .heroActions{
    flex-direction: column;
    align-items: stretch;
  }
  .btn{
    width: 100%;
    justify-content: center;
  }

  /* side card spacing */
  .heroSide{ padding: 18px; }
}

/* --- Small phones / Fold cover screen (<=480) --- */
@media (max-width: 480px){
  .wrap{ padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

  /* carousel card width adapt (avoid horizontal cut) */
  .proj{
    min-width: 88%;
    max-width: 88%;
  }

  /* reduce big numbers slightly */
  .stepNum, .dirNum{ font-size: 30px; }
}

/* --- Galaxy Fold (very narrow) --- */
@media (max-width: 360px){
  h1{ font-size: 32px; }
  .pill{ font-size: 12px; padding: 9px 12px; }
}

/* --- Ultrawide monitors: reduce extreme crop (optional, premium) --- */
@media (min-aspect-ratio: 21/9){
  .bgImage{
    background-position: center 35%;
  }
}

/* --- If you enable bg drift anywhere, disable on mobile (smoother Safari) --- */
@media (max-width: 980px){
  .bgImage{ animation: none !important; }
}
/* =========================
   MOBILE STRICT MODE (Hero)
   Fix: right-side cut / horizontal overflow on narrow screens
   ========================= */
@media (max-width: 900px){

  /* hard clamp semua */
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  /* hero section lock */
  .hero,
  .bgImage{
    width:100%;
    max-width:100%;
    overflow:hidden;          /* penting */
  }

  /* wrapper lock */
  .hero .wrap{
    width:100%;
    max-width:100%;
    overflow:hidden;          /* penting */
  }

  /* semua child dalam hero tak boleh “push” keluar */
  .hero *{
    max-width:100%;
    box-sizing:border-box;
  }

  /* kill 100vw offenders */
  .hero [style*="100vw"],
  .bgImage [style*="100vw"]{
    width:100% !important;
  }

  /* force long items wrap */
  .pill,
  .btn,
  .textLink{
    max-width:100%;
  }

  /* buttons: no translate / magnetic / hover drift on mobile */
  .btn,
  .btn svg{
    transform:none !important;
  }

  /* flex containers: allow wrap + prevent overflow */
  .heroActions{
    flex-wrap:wrap;
    max-width:100%;
  }

  /* carousel: keep scroll but prevent page overflow */
  .carousel{
    overflow-x:auto;
    max-width:100%;
  }
}

/* iOS hard lock: prevent any horizontal scrolling */
html, body{
  width:100%;
  max-width:100%;
  overflow-x: clip;   /* best */
}

/* fallback for older browsers */
@supports not (overflow-x: clip){
  html, body{ overflow-x:hidden; }
}
/* ===== Ticker (Desktop marquee, Mobile stacked) ===== */
.ticker{
  margin-top:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(6,10,20,.32);
  backdrop-filter: blur(10px);
  overflow:hidden;
  max-width: 680px;
}

/* Desktop: loop marquee */
.tickerTrack{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  white-space:nowrap;
  width:max-content;
  will-change: transform;
  animation: tickerMove 18s linear infinite;
}

/* text styles */
.tickText{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.76);
  font-weight:900;
}
.tickSep{color: rgba(255,255,255,.32);font-weight:900;}
.tickGap{width:26px;display:inline-block;}

/* pause on hover (desktop only) */
@media (hover:hover){
  .ticker:hover .tickerTrack{animation-play-state: paused;}
}

/* loop animation */
@keyframes tickerMove{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-50%,0,0)}
}

/* ===== Mobile/Tablet: NO marquee, show single set nicely (no overflow) ===== */
@media (max-width: 980px){

  .ticker{
    max-width:100%;
  }

  .tickerTrack{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    white-space:normal;

    animation:none !important;
    transform:none !important;
  }

  /* hide duplicate 2nd copy + the gap */
  .tickerTrack .tickGap,
  .tickerTrack > :nth-child(n+8){
    display:none !important;
  }

  .tickText{
    white-space:normal !important;
    line-height:1.35;
  }
}
/* ===== Mobile ticker redesign (premium chips) ===== */
@media (max-width: 560px){

  .ticker{
    max-width:100%;
    padding: 10px 12px;
  }

  .tickerTrack{
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
    width:100%;
    white-space:normal;

    animation:none !important;
    transform:none !important;
    padding:0; /* container already has padding */
  }

  /* hide duplicated second set + gap */
  .tickerTrack .tickGap,
  .tickerTrack > :nth-child(n+8){
    display:none !important;
  }

  /* make the first item (Council Standard...) full width */
  .tickerTrack .tickText:first-of-type{
    flex: 0 0 100%;
    letter-spacing:.14em;
    font-size:12px;
    opacity:.95;
  }

  /* hide separators on mobile (looks messy) */
  .tickerTrack .tickSep{
    display:none;
  }

  /* turn remaining tickText into chips */
  .tickerTrack .tickText:not(:first-of-type){
    display:inline-flex;
    align-items:center;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(59,130,246,.22);
    background: rgba(59,130,246,.08);
    color: rgba(191,219,254,.92);
    font-size:11px;
    letter-spacing:.10em;
    line-height:1;
  }

  /* signal icon: keep, but smaller */
  .signal{
    margin-right:6px;
    transform: scale(.85);
    opacity:.85;
  }
}

/* Mobile: hide ticker completely (no capsule-in-capsule) */
@media (max-width: 560px){
  .ticker{ display:none !important; }
}