:root{
  --bg:#f7f8fc;
  --surface:#ffffff;
  --text:#11131a;
  --muted:#6c7280;
  --line:#e7e9ef;
  --primary:#675cff;
  --primary2:#8e84ff;
  --dark:#161824;
  --radius:24px;
  --shadow:0 24px 60px rgba(25,28,45,.10);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 85% 5%,rgba(103,92,255,.11),transparent 30%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

.nav-wrap{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(247,248,252,.74);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(231,233,239,.7);
}

.nav{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

.brand-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:white;
  font-size:13px;
  box-shadow:0 8px 22px rgba(103,92,255,.28);
}

.nav-links{
  display:flex;
  gap:30px;
  color:#4f5564;
  font-size:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:14px;
  font-weight:700;
  transition:.25s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-small{
  min-height:40px;
  padding:0 18px;
  font-size:14px;
}

.btn-dark{
  background:var(--dark);
  color:white;
}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:white;
  box-shadow:0 12px 28px rgba(103,92,255,.28);
}

.btn-ghost{
  background:white;
  border:1px solid var(--line);
}

.btn-light{
  background:white;
  color:#1b1d27;
}

.full{
  width:100%;
}

.hero{
  min-height:760px;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  align-items:center;
  gap:70px;
  padding-top:70px;
  padding-bottom:80px;
}

.eyebrow{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:#eeecff;
  color:#5d53e8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.hero h1{
  margin-top:22px;
  font-size:clamp(48px,6vw,76px);
  line-height:1.03;
  letter-spacing:-.05em;
  max-width:720px;
}

.hero h1 span{
  color:var(--primary);
}

.hero-desc{
  margin-top:24px;
  color:var(--muted);
  font-size:18px;
  max-width:590px;
}

.hero-actions{
  margin-top:32px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.trust-row{
  margin-top:24px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  color:#737988;
  font-size:13px;
}

.hero-visual{
  position:relative;
  min-height:540px;
}

.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(20px);
}

.glow-one{
  width:320px;
  height:320px;
  right:40px;
  top:50px;
  background:rgba(117,105,255,.20);
}

.glow-two{
  width:220px;
  height:220px;
  left:0;
  bottom:40px;
  background:rgba(166,235,255,.22);
}

.dashboard-card{
  position:absolute;
  top:90px;
  left:0;
  width:88%;
  background:white;
  border:1px solid rgba(226,229,238,.9);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.window-top{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--line);
}

.dots{
  display:flex;
  gap:6px;
}

.dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d2d5dd;
}

.window-label{
  font-size:12px;
  color:#9499a6;
}

.dash-body{
  display:flex;
  min-height:300px;
}

.dash-sidebar{
  width:58px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center;
  border-right:1px solid var(--line);
}

.mini-logo{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  background:#6b60ff;
  color:white;
  border-radius:9px;
  font-size:10px;
  font-weight:800;
}

.dash-sidebar span{
  width:23px;
  height:7px;
  border-radius:8px;
  background:#e5e7ec;
}

.dash-content{
  padding:24px;
  flex:1;
}

.dash-title{
  font-weight:800;
}

.stats{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.stats div{
  border:1px solid var(--line);
  border-radius:13px;
  padding:12px;
}

.stats small{
  display:block;
  color:#9297a5;
  font-size:10px;
}

.stats strong{
  font-size:19px;
}

.chart{
  height:125px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  margin-top:25px;
  padding:14px;
  border-radius:16px;
  background:#f8f8fd;
}

.chart span{
  flex:1;
  border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg,#746aff,#a7a0ff);
}

.phone{
  position:absolute;
  width:210px;
  right:-5px;
  bottom:30px;
  padding:10px;
  border-radius:34px;
  background:#181a22;
  box-shadow:0 26px 60px rgba(19,20,30,.22);
  z-index:3;
}

.phone-notch{
  width:72px;
  height:18px;
  margin:auto;
  border-radius:0 0 12px 12px;
  background:#181a22;
}

.phone-screen{
  min-height:390px;
  padding:15px;
  border-radius:25px;
  background:white;
}

.store-head{
  display:flex;
  gap:10px;
  align-items:center;
}

.store-head div:last-child{
  display:flex;
  flex-direction:column;
}

.store-head small{
  color:#9095a2;
  font-size:10px;
}

.store-logo{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#eae8ff;
  color:#6257ef;
  font-weight:900;
}

.product-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.product-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
}

.product-card strong,
.product-card small{
  display:block;
  font-size:9px;
}

.product-card small{
  color:#8c919e;
}

.product-img{
  height:75px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f3f4f7;
  font-size:29px;
  margin-bottom:7px;
}

.phone button{
  width:100%;
  margin-top:18px;
  height:38px;
  border:0;
  border-radius:11px;
  background:#685dff;
  color:white;
  font-weight:700;
}

.domain-pop{
  position:absolute;
  left:45px;
  bottom:32px;
  z-index:5;
  padding:13px 16px;
  border:1px solid rgba(224,226,236,.9);
  border-radius:16px;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(15px);
  box-shadow:0 14px 30px rgba(31,34,48,.09);
}

.domain-pop small,
.domain-pop strong{
  display:block;
}

.domain-pop small{
  color:#8a8f9d;
  font-size:10px;
}

.domain-pop strong{
  font-size:12px;
}

.section{
  padding-top:110px;
  padding-bottom:110px;
}

.section-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 50px;
}

.section-head h2{
  margin-top:16px;
  font-size:clamp(34px,4vw,52px);
  line-height:1.1;
  letter-spacing:-.04em;
}

.section-head p{
  margin-top:14px;
  color:var(--muted);
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.feature-card{
  padding:24px;
  min-height:190px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  transition:.25s ease;
}

.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(30,33,49,.08);
}

.icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#efedff;
  color:#6055ec;
  font-weight:900;
}

.feature-card h3{
  margin-top:20px;
  font-size:16px;
}

.feature-card p{
  margin-top:7px;
  color:var(--muted);
  font-size:13px;
}

.process-section{
  background:#11131b;
  color:white;
}

.process-section .section-head p{
  color:#a9aebb;
}

.process-section .eyebrow{
  background:#26233d;
  color:#aea8ff;
}

.steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:14px;
}

.step{
  padding:25px;
  min-height:155px;
  border:1px solid #2b2e39;
  border-radius:20px;
  background:#181b24;
}

.step span{
  display:block;
  font-size:11px;
  color:#8178ff;
  font-weight:800;
}

.step strong{
  display:block;
  margin-top:24px;
}

.step small{
  color:#9298a8;
}

.step-line{
  width:30px;
  height:1px;
  background:#444958;
}

.domain-section{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:50px;
  align-items:center;
  padding:45px;
  border:1px solid var(--line);
  border-radius:28px;
  background:white;
  box-shadow:var(--shadow);
}

.domain-section h2{
  margin-top:14px;
  font-size:38px;
  letter-spacing:-.04em;
}

.domain-section p{
  margin-top:12px;
  color:var(--muted);
}

.domain-switch{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:center;
}

.domain-switch div:not(.arrow){
  padding:18px;
  border-radius:16px;
  background:#f6f6fb;
}

.domain-switch small,
.domain-switch strong{
  display:block;
}

.domain-switch small{
  color:#9095a3;
  font-size:10px;
}

.domain-switch strong{
  margin-top:3px;
  font-size:13px;
  overflow-wrap:anywhere;
}

.arrow{
  color:#6c62ff;
  font-size:25px;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.price-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:white;
}

.price-card.featured{
  border-color:#8e86ff;
  box-shadow:0 18px 45px rgba(103,92,255,.13);
}

.price-badge{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  background:#ebe9ff;
  color:#6257ec;
  font-size:10px;
  font-weight:900;
}

.price-badge.muted{
  background:#f0f1f4;
  color:#666c79;
}

.price-card h3{
  margin-top:18px;
}

.price{
  margin-top:10px;
  font-size:36px;
  font-weight:900;
  letter-spacing:-.04em;
}

.price-card p{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}

.price-card ul{
  list-style:none;
  margin:25px 0;
  display:grid;
  gap:10px;
  color:#555b69;
  font-size:13px;
}

.final-cta{
  padding:100px 0;
  background:
    radial-gradient(circle at 50% 0%,rgba(145,137,255,.42),transparent 40%),
    #5f55ee;
  color:white;
  text-align:center;
}

.final-cta h2{
  margin-top:15px;
  font-size:clamp(38px,5vw,60px);
  letter-spacing:-.05em;
}

.final-cta p{
  margin:12px 0 30px;
  color:#e4e1ff;
}

.eyebrow.light{
  background:rgba(255,255,255,.13);
  color:white;
}

footer{
  background:#11131b;
  color:white;
  padding:34px 0;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.footer-inner p,
.footer-inner small{
  color:#8e94a3;
  font-size:12px;
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.show{
  opacity:1;
  transform:none;
}

.float-slow{
  animation:floatSlow 6s ease-in-out infinite;
}

.float-fast{
  animation:floatFast 5s ease-in-out infinite;
}

@keyframes floatSlow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@keyframes floatFast{
  0%,100%{transform:translateY(0) rotate(1deg)}
  50%{transform:translateY(-11px) rotate(-1deg)}
}

@media(max-width:980px){
  .nav-links{
    display:none;
  }

  .hero{
    grid-template-columns:1fr;
    padding-top:90px;
  }

  .hero-copy{
    text-align:center;
  }

  .hero-desc{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-actions,
  .trust-row{
    justify-content:center;
  }

  .feature-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .steps{
    grid-template-columns:1fr;
  }

  .step-line{
    width:1px;
    height:22px;
    margin:auto;
  }

  .domain-section{
    grid-template-columns:1fr;
  }

  .pricing-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .container{
    width:min(100% - 24px,1180px);
  }

  .hero{
    min-height:auto;
    gap:25px;
  }

  .hero h1{
    font-size:48px;
  }

  .hero-visual{
    min-height:480px;
  }

  .dashboard-card{
    width:100%;
    top:45px;
  }

  .phone{
    width:180px;
    right:4px;
  }

  .domain-pop{
    left:8px;
  }

  .feature-grid{
    grid-template-columns:1fr;
  }

  .domain-switch{
    grid-template-columns:1fr;
  }

  .arrow{
    transform:rotate(90deg);
    text-align:center;
  }

  .footer-inner{
    flex-direction:column;
    text-align:center;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}


/* =========================================================


/* =========================================================
   GOTONG ROYONG HERO V3 - CLEAN CANONICAL
   One hero stylesheet. No stacked overrides.
   ========================================================= */

:root{
  --gr-green:#12ad68;
  --gr-blue:#3478f6;
}


/* ---------- NAV BRAND ---------- */

.brand-mark{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#08a75f,#29ca7f);
  color:#fff;
  font-size:0;
  box-shadow:0 8px 22px rgba(14,171,101,.20);
}

.brand-mark::before,
.brand-mark::after{
  content:"";
  position:absolute;
  top:8px;
  width:9px;
  height:19px;
  background:#fff;
  border-radius:100% 0 100% 0;
}

.brand-mark::before{
  left:9px;
  transform:rotate(-38deg);
}

.brand-mark::after{
  right:8px;
  transform:rotate(38deg) scaleX(-1);
}


/* ---------- HERO LAYOUT ---------- */

.hero-v2{
  width:min(1500px,calc(100% - 64px));
  min-height:770px;

  display:grid;
  grid-template-columns:.78fr 1.42fr;
  gap:22px;

  align-items:center;

  padding-top:48px;
  padding-bottom:58px;
}


/* ---------- LEFT COPY ---------- */

.hero-v2 .hero-copy{
  position:relative;
  z-index:20;
}

.hero-v2 .eyebrow{
  display:inline-flex;
  padding:7px 12px;

  border:1px solid #dff3e8;
  border-radius:999px;

  background:#f0fbf6;
  color:#138657;

  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}

.hero-v2 h1{
  max-width:600px;
  margin-top:20px;

  font-size:clamp(48px,4.55vw,68px);
  line-height:1.01;
  letter-spacing:-.05em;
}

.hero-v2 h1 span{
  background:linear-gradient(90deg,#3374f5,#596bff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-v2 .hero-desc{
  max-width:555px;
  margin-top:22px;

  color:#6d7584;
  font-size:16px;
  line-height:1.55;
}


/* ---------- MINI FEATURES ---------- */

.hero-mini-features{
  max-width:565px;
  margin-top:26px;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px 8px;
}

.hero-mini-features .mini-feature{
  min-width:0;

  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;

  align-items:center;

  padding:8px 2px;
}

.hero-mini-features .mini-icon{
  grid-row:1 / 3;

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:13px;
}

.hero-mini-features .mini-icon svg{
  width:21px;
  height:21px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-product,
.icon-profit{
  color:#0aaa61;
  background:#e9f9ef;
}

.icon-order,
.icon-customer{
  color:#2585ee;
  background:#ecf5ff;
}

.icon-voucher{
  color:#ff6b4e;
  background:#fff0ea;
}

.icon-delivery{
  color:#ec9b08;
  background:#fff4dc;
}

.hero-mini-features strong{
  align-self:end;

  font-size:12px;
  line-height:1.15;
}

.hero-mini-features small{
  align-self:start;

  color:#8a909d;
  font-size:9px;
  line-height:1.2;
}


/* ---------- CTA ---------- */

.hero-v2 .hero-actions{
  margin-top:27px;
}

.hero-v2 .btn-primary{
  background:linear-gradient(135deg,#2876f7,#4389ff);
  box-shadow:0 13px 30px rgba(38,117,246,.22);
}

.hero-v2 .btn-ghost{
  background:#fff;
  border:1px solid #9bbbf9;
}

.hero-v2 .trust-row{
  margin-top:20px;

  color:#637a70;
  font-size:12px;
}


/* =========================================================
   RIGHT PRODUCT SHOWCASE
   ========================================================= */

.hero-product-showcase{
  position:relative;

  min-height:620px;

  margin-right:-18px;
}


/* ambient background */
.hero-product-showcase::before{
  content:"";

  position:absolute;
  z-index:0;

  width:570px;
  height:570px;

  top:-35px;
  right:-25px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(101,107,255,.14),
      rgba(101,107,255,0) 70%
    );
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.macbook-shell{
  position:absolute;

  z-index:4;

  top:76px;
  left:-8px;

  width:91%;
  height:455px;

  transform-origin:center center;

  animation:grDashboardFloat 8s ease-in-out infinite;

  will-change:transform;
}


/*
IMPORTANT:
The tilt lives on macbook-shell, NOT real-dashboard.
This avoids transform collisions.
*/
@keyframes grDashboardFloat{
  0%,100%{
    transform:
      translate3d(0,0,0)
      rotate(-3deg);
  }

  50%{
    transform:
      translate3d(0,-7px,0)
      rotate(-3deg);
  }
}


/* hide old MacBook decorations */
.macbook-camera,
.macbook-base,
.macbook-notch{
  display:none;
}


.macbook-shell .real-dashboard{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  display:grid;
  grid-template-columns:150px minmax(0,1fr);

  overflow:hidden;

  border:1px solid #e3e8f0;
  border-radius:23px;

  background:rgba(255,255,255,.985);

  box-shadow:
    0 30px 70px rgba(24,35,60,.16),
    0 5px 14px rgba(24,35,60,.05);
}


/* ---------- SIDEBAR ---------- */

.real-sidebar{
  padding:19px 12px;

  background:#fff;
  color:#344154;

  border-right:1px solid #edf0f4;
}

.real-brand{
  display:flex;
  align-items:center;
  gap:9px;

  margin-bottom:18px;
}

.real-brand > span{
  width:31px;
  height:31px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:var(--gr-green);
  color:#fff;

  font-weight:900;
}

.real-brand div{
  display:flex;
  flex-direction:column;

  line-height:1.15;
}

.real-brand strong{
  color:#192130;
  font-size:9px;
}

.real-brand small{
  color:#84909e;
  font-size:6px;
}

.real-sidebar nav{
  display:grid;
  gap:4px;
}

.real-sidebar nav div{
  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 8px;

  border-radius:9px;

  color:#617084;

  font-size:9px;
}

.real-sidebar nav .active{
  background:#edf4ff;
  color:#216fe8;

  font-weight:800;
}


/* ---------- REPORT ---------- */

.report-screen{
  min-width:0;

  padding:18px 19px 14px;

  background:#fff;
}

.report-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
}

.report-top > div:first-child small{
  color:#668572;
  font-size:6px;
  font-weight:800;
}

.report-top h3{
  margin-top:3px;

  font-size:20px;
  line-height:1.08;
}

.report-top p{
  max-width:430px;

  margin-top:5px;

  color:#7a8290;
  font-size:7px;
}

.report-user{
  display:flex;
  align-items:center;
  gap:6px;
}

.report-user b{
  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#11a764;
  color:#fff;

  font-size:9px;
}

.report-user span{
  font-size:8px;
  font-weight:700;
}


/* filters */
.report-tabs{
  margin-top:11px;

  display:flex;
  gap:5px;
}

.report-tabs span{
  padding:5px 8px;

  border:1px solid #e2e6ec;
  border-radius:999px;

  font-size:6px;
}

.report-tabs .selected{
  background:#171b27;
  border-color:#171b27;
  color:#fff;
}


/* KPI */
.report-kpis{
  margin-top:11px;

  display:grid;
  grid-template-columns:1fr 1fr .8fr;
  gap:7px;
}

.report-kpis div{
  padding:10px;

  border:1px solid #e8ebf0;
  border-radius:10px;
}

.report-kpis small,
.report-kpis strong,
.report-kpis em{
  display:block;
}

.report-kpis small{
  color:#8b929d;
  font-size:5.5px;
}

.report-kpis strong{
  margin-top:3px;

  font-size:11px;
}

.report-kpis em{
  margin-top:2px;

  color:#0ba55f;

  font-size:6px;
  font-style:normal;
}


/* TABLE */
.invoice-table{
  margin-top:11px;

  overflow:hidden;

  border:1px solid #e6e9ef;
  border-radius:10px;
}

.invoice-row{
  min-height:31px;

  display:grid;
  grid-template-columns:
    1.35fr
    1.2fr
    .9fr
    1fr
    .65fr;

  align-items:center;

  padding:0 8px;

  border-bottom:1px solid #edf0f3;

  font-size:6.3px;
}

.invoice-row:last-child{
  border-bottom:0;
}

.invoice-row.head{
  min-height:27px;

  background:#f8f9fb;

  color:#747b87;
  font-size:5.6px;
  font-weight:700;
}

.invoice-row:not(.head) span:first-child{
  color:#176cf0;
  font-weight:800;
}

.invoice-row b{
  color:#08a05b;
}


/* =========================================================
   PHONE
   ========================================================= */

.real-phone{
  position:absolute;

  z-index:12;

  width:205px;

  right:-4px;
  bottom:17px;

  padding:9px;

  border:2px solid #202329;
  border-radius:37px;

  background:#111318;

  box-shadow:
    0 30px 60px rgba(20,28,43,.25),
    0 7px 16px rgba(20,28,43,.10);

  transform-origin:center bottom;

  animation:grPhoneFloat 6.5s ease-in-out infinite;

  will-change:transform;
}

@keyframes grPhoneFloat{
  0%,100%{
    transform:
      translate3d(0,0,0)
      rotate(2deg);
  }

  50%{
    transform:
      translate3d(0,-11px,0)
      rotate(2deg);
  }
}


/* PHONE CONTENT */
.phone-island{
  position:absolute;

  z-index:4;

  top:12px;
  left:50%;

  width:64px;
  height:17px;

  transform:translateX(-50%);

  border-radius:20px;

  background:#111318;
}

.mobile-store{
  min-height:448px;

  overflow:hidden;

  padding:24px 10px 9px;

  border-radius:27px;

  background:#fff;
}

.mobile-header{
  display:grid;
  grid-template-columns:27px 1fr auto auto;
  gap:6px;

  align-items:center;

  margin-top:4px;
}

.mobile-logo{
  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#def7e9;
  color:#08a55f;

  font-size:10px;
  font-weight:900;
}

.mobile-header strong{
  font-size:9px;
}

.mobile-header span{
  font-size:10px;
}

.mobile-search{
  margin-top:12px;

  padding:8px 9px;

  border:1px solid #e5e8ed;
  border-radius:10px;

  background:#fafafa;

  color:#9097a4;

  font-size:6.5px;
}


/* generic store banner */
.mobile-banner{
  min-height:96px;

  margin-top:10px;
  padding:11px;

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

  overflow:hidden;

  border-radius:12px;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(255,255,255,.2),
      transparent 30%
    ),
    linear-gradient(135deg,#168d72,#377cf4);

  color:#fff;
}

.mobile-banner strong{
  font-size:11px;
  line-height:1.15;
}

.mobile-banner button{
  margin-top:6px;

  padding:4px 6px;

  border:0;
  border-radius:999px;

  background:#fff;
  color:#216fe8;

  font-size:5.5px;
  font-weight:800;
}

.mobile-banner > span{
  font-size:27px;
}


/* categories */
.mobile-categories{
  margin-top:10px;

  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2px;
}

.mobile-categories div{
  min-width:0;

  text-align:center;
}

.mobile-categories i{
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  margin:auto;

  border-radius:50%;

  background:#f3f5f7;

  font-size:10px;
  font-style:normal;
}

.mobile-categories small{
  display:block;

  margin-top:2px;

  font-size:4.6px;
}


/* product section */
.mobile-section-title{
  margin-top:12px;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.mobile-section-title strong{
  font-size:8px;
}

.mobile-section-title small{
  color:#08a661;
  font-size:5.5px;
}

.mobile-products{
  margin-top:6px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}

.mobile-products > div{
  position:relative;

  overflow:hidden;

  padding-bottom:6px;

  border:1px solid #e5e8ed;
  border-radius:10px;
}

.product-visual{
  height:78px;

  display:grid;
  place-items:center;

  font-size:34px;
}

.product-visual.greens{
  background:#edf6ff;
}

.product-visual.corn{
  background:#fff5e9;
}

.mobile-products strong,
.mobile-products small,
.mobile-products b{
  display:block;

  padding:0 6px;
}

.mobile-products strong{
  margin-top:4px;

  font-size:6.5px;
}

.mobile-products small{
  color:#9399a4;

  font-size:4.6px;
}

.mobile-products b{
  margin-top:2px;

  font-size:7px;
}

.mobile-products i{
  position:absolute;

  right:5px;
  bottom:5px;

  width:19px;
  height:19px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#31c77b;
  color:#fff;

  font-size:12px;
  font-style:normal;
}


/* mobile nav */
.mobile-bottom{
  margin-top:9px;
  padding-top:6px;

  display:grid;
  grid-template-columns:repeat(5,1fr);

  border-top:1px solid #eceef2;
}

.mobile-bottom span{
  display:flex;
  flex-direction:column;
  align-items:center;

  color:#858c98;

  font-size:9px;
}

.mobile-bottom small{
  font-size:4.5px;
}

.mobile-bottom .on{
  color:#08a45f;
}


/* =========================================================
   CALLOUT
   ========================================================= */

.profit-callout{
  position:absolute;

  z-index:15;

  top:13px;
  right:5px;

  display:flex;
  align-items:center;
  gap:9px;

  padding:11px 14px;

  border:1px solid #e4dbff;
  border-radius:16px;

  background:rgba(248,243,255,.96);

  box-shadow:0 14px 32px rgba(75,63,175,.11);
}

.profit-callout > span{
  font-size:21px;
}

.profit-callout strong,
.profit-callout small{
  display:block;
}

.profit-callout strong{
  font-size:11px;
}

.profit-callout small{
  max-width:115px;

  color:#747c8a;

  font-size:7px;
  line-height:1.25;
}


/* =========================================================
   DOMAIN BADGE
   ========================================================= */

.domain-slide-badge{
  position:absolute;

  z-index:16;

  left:95px;
  bottom:18px;

  padding:11px 15px;

  border:1px solid #e1e6ee;
  border-radius:15px;

  background:rgba(255,255,255,.94);

  backdrop-filter:blur(13px);

  box-shadow:0 13px 30px rgba(23,31,52,.10);
}

.domain-slide-badge small,
.domain-slide-badge strong{
  display:block;
}

.domain-slide-badge small{
  color:#87909e;
  font-size:8px;
}

.domain-slide-badge strong{
  margin-top:2px;

  color:#1c2636;

  font-size:10px;

  transition:
    opacity .28s ease,
    transform .28s ease;
}


/* =========================================================
   HANDWRITTEN
   ========================================================= */

.hero-handnote{
  position:absolute;

  z-index:14;

  right:174px;
  bottom:-5px;

  display:block;

  transform:rotate(-4deg);

  color:#2852b1;

  font-family:
    "Comic Sans MS",
    "Bradley Hand",
    cursive;

  font-size:12px;
  line-height:1.35;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  .hero-v2{
    width:min(1180px,calc(100% - 40px));

    grid-template-columns:1fr;
  }

  .hero-product-showcase{
    width:min(820px,100%);
    margin:20px auto 0;
  }
}


@media(max-width:620px){

  .hero-v2{
    width:min(100% - 24px,1180px);

    min-height:auto;

    padding-top:60px;
  }

  .hero-v2 h1{
    font-size:44px;
  }

  .hero-mini-features{
    grid-template-columns:repeat(2,1fr);
  }

  .hero-product-showcase{
    min-height:485px;
  }

  .macbook-shell{
    top:40px;
    left:0;

    width:96%;
    height:305px;

    animation:grDashboardFloatMobile 8s ease-in-out infinite;
  }

  @keyframes grDashboardFloatMobile{
    0%,100%{
      transform:
        translate3d(0,0,0)
        rotate(-1.6deg);
    }

    50%{
      transform:
        translate3d(0,-4px,0)
        rotate(-1.6deg);
    }
  }

  .macbook-shell .real-dashboard{
    grid-template-columns:86px minmax(0,1fr);

    border-radius:15px;
  }

  .real-sidebar{
    padding:10px 6px;
  }

  .real-sidebar nav div{
    padding:5px;
    font-size:5.5px;
  }

  .report-screen{
    padding:10px;
  }

  .report-top h3{
    font-size:12px;
  }

  .report-top p{
    font-size:4.6px;
  }

  .report-user{
    display:none;
  }

  .report-tabs span{
    padding:4px 5px;
    font-size:4.5px;
  }

  .report-kpis{
    gap:4px;
  }

  .report-kpis div{
    padding:5px;
  }

  .report-kpis strong{
    font-size:7px;
  }

  .invoice-row{
    min-height:21px;

    padding:0 4px;

    font-size:4.4px;
  }

  .real-phone{
    width:158px;

    right:-2px;
    bottom:4px;

    animation:grPhoneFloatMobile 6.5s ease-in-out infinite;
  }

  @keyframes grPhoneFloatMobile{
    0%,100%{
      transform:
        translate3d(0,0,0)
        rotate(1deg);
    }

    50%{
      transform:
        translate3d(0,-7px,0)
        rotate(1deg);
    }
  }

  .profit-callout{
    top:4px;
    right:0;

    padding:8px 10px;
  }

  .profit-callout small{
    display:none;
  }

  .domain-slide-badge{
    left:7px;
    bottom:5px;

    padding:8px 10px;
  }

  .hero-handnote{
    display:none;
  }
}


/* reduced motion */
@media(prefers-reduced-motion:reduce){

  .macbook-shell{
    animation:none;
    transform:rotate(-3deg);
  }

  .real-phone{
    animation:none;
    transform:rotate(2deg);
  }
}

/* =========================================================
   HERO V3.1 - REFERENCE PERSPECTIVE
   Dashboard: subtle left perspective, NOT card rotation
   Keep handnote, domain badge, profit callout
   ========================================================= */

/* PASTIKAN 3 ELEMEN INI TETAP TAMPIL */
.profit-callout{
  display:flex !important;
}

.domain-slide-badge{
  display:block !important;
}

.hero-handnote{
  display:block !important;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.macbook-shell{
  top:58px !important;
  left:-8px !important;

  width:91% !important;
  height:455px !important;

  transform-origin:left center !important;

  animation:grDashboardPerspective 8s ease-in-out infinite !important;

  will-change:transform;
}


/*
   Ini bagian penting.
   Bukan sekadar rotate Z.

   perspective + rotateY membuat dashboard terasa
   masuk ke ruang seperti referensi.
*/
@keyframes grDashboardPerspective{

  0%,100%{
    transform:
      perspective(1400px)
      rotateY(-5deg)
      rotateZ(-0.7deg)
      translate3d(0,0,0) !important;
  }

  50%{
    transform:
      perspective(1400px)
      rotateY(-5deg)
      rotateZ(-0.7deg)
      translate3d(0,-5px,0) !important;
  }
}


/* isi dashboard tetap normal */
.macbook-shell .real-dashboard{
  transform:none !important;

  grid-template-columns:
    150px
    minmax(0,1fr) !important;

  border-radius:22px !important;

  box-shadow:
    0 30px 66px rgba(25,35,58,.14),
    0 5px 14px rgba(25,35,58,.05) !important;
}


/* =========================================================
   PHONE
   Lebih lebar dan lebih proper seperti smartphone
   ========================================================= */

.real-phone{
  width:230px !important;

  right:-2px !important;
  bottom:12px !important;

  padding:9px !important;

  border:3px solid #171a20 !important;
  border-radius:38px !important;

  animation:grPhoneReferenceFloat 6.6s ease-in-out infinite !important;

  transform-origin:center bottom !important;

  box-shadow:
    0 30px 60px rgba(20,28,43,.25),
    0 7px 16px rgba(20,28,43,.11) !important;
}


@keyframes grPhoneReferenceFloat{

  0%,100%{
    transform:
      translate3d(0,0,0)
      rotate(.5deg) !important;
  }

  50%{
    transform:
      translate3d(0,-9px,0)
      rotate(.5deg) !important;
  }
}


/* phone lebih padat */
.mobile-store{
  min-height:465px !important;

  padding:
    24px
    11px
    9px !important;

  border-radius:29px !important;
}

.phone-island{
  width:72px !important;
}

.mobile-search{
  padding:9px 10px !important;
}

.mobile-banner{
  min-height:100px !important;
}

.product-visual{
  height:82px !important;
}


/* =========================================================
   FLOATING ELEMENTS
   ========================================================= */

.profit-callout{
  top:12px !important;
  right:0 !important;

  z-index:16 !important;
}


.domain-slide-badge{
  left:100px !important;
  bottom:18px !important;

  z-index:16 !important;
}


.hero-handnote{
  right:175px !important;
  bottom:-5px !important;

  z-index:15 !important;

  transform:rotate(-4deg) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .macbook-shell{
    width:96% !important;
    height:305px !important;

    animation:grDashboardPerspectiveMobile 8s ease-in-out infinite !important;
  }

  @keyframes grDashboardPerspectiveMobile{

    0%,100%{
      transform:
        perspective(1200px)
        rotateY(-2.5deg)
        rotateZ(-.4deg)
        translate3d(0,0,0) !important;
    }

    50%{
      transform:
        perspective(1200px)
        rotateY(-2.5deg)
        rotateZ(-.4deg)
        translate3d(0,-4px,0) !important;
    }
  }

  .real-phone{
    width:170px !important;
    right:-2px !important;
  }

  .hero-handnote{
    display:none !important;
  }
}


/* accessibility */
@media(prefers-reduced-motion:reduce){

  .macbook-shell{
    animation:none !important;

    transform:
      perspective(1400px)
      rotateY(-5deg)
      rotateZ(-.7deg) !important;
  }

  .real-phone{
    animation:none !important;
  }
}


/* =========================================================
   DASHBOARD PERSPECTIVE HARD FIX
   Static perspective + smooth positional motion.
   Do not touch phone / badges / handnote.
   ========================================================= */

.macbook-shell{
  top:58px !important;

  transform:
    perspective(950px)
    rotateY(-11deg)
    rotateZ(-1.2deg) !important;

  transform-origin:left center !important;

  animation:grDashboardBobOnly 8s ease-in-out infinite !important;

  will-change:top !important;
}


/*
Movement ONLY uses top.
The perspective transform above stays intact.
*/
@keyframes grDashboardBobOnly{
  0%,100%{
    top:58px;
  }

  50%{
    top:52px;
  }
}


/* keep dashboard itself neutral */
.macbook-shell .real-dashboard{
  transform:none !important;
}


/* mobile gets a lighter perspective */
@media(max-width:620px){

  .macbook-shell{
    transform:
      perspective(900px)
      rotateY(-6deg)
      rotateZ(-.6deg) !important;

    animation:grDashboardBobOnlyMobile 8s ease-in-out infinite !important;
  }

  @keyframes grDashboardBobOnlyMobile{
    0%,100%{
      top:40px;
    }

    50%{
      top:36px;
    }
  }
}


/* reduced motion keeps the perspective */
@media(prefers-reduced-motion:reduce){

  .macbook-shell{
    animation:none !important;

    transform:
      perspective(950px)
      rotateY(-11deg)
      rotateZ(-1.2deg) !important;
  }
}


/* =========================================================
   TILT TUNE + PHONE SYMMETRIC
   - stronger side tilt
   - less downward slant
   - phone perfectly upright / symmetric
   ========================================================= */

/* DASHBOARD: lebih tilt ke samping, kurangi efek turun ke bawah */
.macbook-shell{
  top:58px !important;
  transform:
    perspective(950px)
    rotateY(-16deg)
    rotateZ(-0.25deg) !important;
  transform-origin:left center !important;
  animation:grDashboardBobOnlyV2 8s ease-in-out infinite !important;
  will-change:top !important;
}

@keyframes grDashboardBobOnlyV2{
  0%,100%{
    top:58px;
  }
  50%{
    top:52px;
  }
}

/* isi dashboard tetap netral */
.macbook-shell .real-dashboard{
  transform:none !important;
}

/* PHONE: simetris, tegak, rapi */
.real-phone{
  right:4px !important;
  bottom:10px !important;
  width:230px !important;
  transform:none !important;
  animation:grPhoneSymmetricBob 6.8s ease-in-out infinite !important;
  transform-origin:center center !important;
}

@keyframes grPhoneSymmetricBob{
  0%,100%{
    transform:translate3d(0,0,0) !important;
  }
  50%{
    transform:translate3d(0,-8px,0) !important;
  }
}

/* mobile versi lebih ringan */
@media(max-width:620px){

  .macbook-shell{
    transform:
      perspective(900px)
      rotateY(-9deg)
      rotateZ(-0.15deg) !important;
    animation:grDashboardBobOnlyV2Mobile 8s ease-in-out infinite !important;
  }

  @keyframes grDashboardBobOnlyV2Mobile{
    0%,100%{
      top:40px;
    }
    50%{
      top:36px;
    }
  }

  .real-phone{
    width:170px !important;
    right:-2px !important;
    bottom:2px !important;
  }
}

@media(prefers-reduced-motion:reduce){

  .macbook-shell{
    animation:none !important;
    top:58px !important;
    transform:
      perspective(950px)
      rotateY(-16deg)
      rotateZ(-0.25deg) !important;
  }

  .real-phone{
    animation:none !important;
    transform:none !important;
  }
}


/* =========================================================
   CENTER FIX + NO HORIZONTAL SCROLL
   ========================================================= */

html,
body{
  max-width:100%;
  overflow-x:hidden !important;
}

/* hero dipadatkan ke tengah */
.hero-v2{
  width:min(1380px,calc(100% - 48px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;

  grid-template-columns:.82fr 1.18fr !important;
  gap:20px !important;
}

/* kanan jangan melebar keluar viewport */
.hero-product-showcase{
  width:100% !important;
  max-width:760px !important;

  margin-left:auto !important;
  margin-right:auto !important;

  overflow:visible !important;
}

/* dashboard sedikit masuk ke tengah */
.macbook-shell{
  left:10px !important;
  width:87% !important;
}

/* HP jangan nongol keluar kanan */
.real-phone{
  right:12px !important;
}

/* floating card tetap masuk area */
.profit-callout{
  right:18px !important;
}

/* subdomain badge jangan terlalu kiri/kanan */
.domain-slide-badge{
  left:90px !important;
}

/* handwritten juga tetap di dalam stage */
.hero-handnote{
  right:165px !important;
}

/* ukuran layar besar */
@media(min-width:1500px){
  .hero-v2{
    width:min(1400px,calc(100% - 64px)) !important;
  }
}

/* tablet */
@media(max-width:1100px){

  .hero-v2{
    width:min(100% - 32px,1180px) !important;
    grid-template-columns:1fr !important;
  }

  .hero-product-showcase{
    max-width:820px !important;
  }

  .macbook-shell{
    left:0 !important;
    width:88% !important;
  }

  .real-phone{
    right:0 !important;
  }
}

/* mobile */
@media(max-width:620px){

  .hero-v2{
    width:min(100% - 20px,1180px) !important;
  }

  .hero-product-showcase{
    max-width:100% !important;
    overflow:hidden !important;
  }

  .macbook-shell{
    left:0 !important;
    width:94% !important;
  }

  .real-phone{
    right:0 !important;
  }
}


/* =========================================================
   HERO LEFT COLUMN LIFT
   Scope: LEFT SIDE ONLY
   Right showcase must remain untouched.
   ========================================================= */

.hero-v2 .hero-copy{
  margin-top:-58px !important;
}

/* sedikit rapat supaya seluruh konten kiri masuk first viewport */
.hero-v2 .eyebrow{
  margin-bottom:0 !important;
}

.hero-v2 h1{
  margin-top:16px !important;
}

.hero-v2 .hero-desc{
  margin-top:18px !important;
}

.hero-mini-features{
  margin-top:21px !important;
}

.hero-v2 .hero-actions{
  margin-top:21px !important;
}

.hero-v2 .trust-row{
  margin-top:16px !important;
}

/* tablet jangan terlalu tinggi */
@media(max-width:1100px){
  .hero-v2 .hero-copy{
    margin-top:-30px !important;
  }
}

/* mobile tetap natural */
@media(max-width:620px){
  .hero-v2 .hero-copy{
    margin-top:0 !important;
  }
}


/* =========================================================
   HERO ALIGNMENT TUNE
   Scope:
   - left column higher
   - dashboard higher, more centered with phone
   ========================================================= */

/* naikkan seluruh sisi kiri */
.hero-v2 .hero-copy{
  margin-top:-92px !important;
}

/* dashboard naik supaya center visualnya sejajar dengan HP */
.macbook-shell{
  top:34px !important;
}

/* gerakan tetap tipis dari posisi baru */
@keyframes grDashboardBobOnlyV2{
  0%,100%{
    top:34px;
  }

  50%{
    top:28px;
  }
}

/* jaga mobile tetap natural */
@media(max-width:1100px){
  .hero-v2 .hero-copy{
    margin-top:-48px !important;
  }
}

@media(max-width:620px){
  .hero-v2 .hero-copy{
    margin-top:0 !important;
  }

  .macbook-shell{
    top:32px !important;
  }
}


/* =========================================================
   PHONE ALIGNMENT TUNE
   Scope: PHONE ONLY
   ========================================================= */

.real-phone{
  width:218px !important;
  right:10px !important;
  bottom:-6px !important;
  top:auto !important;

  animation:grPhoneSymmetricLower 6.8s ease-in-out infinite !important;
}

@keyframes grPhoneSymmetricLower{
  0%,100%{
    transform:translate3d(0,0,0) !important;
  }

  50%{
    transform:translate3d(0,-6px,0) !important;
  }
}

/* jaga proporsi isi */
.mobile-store{
  min-height:435px !important;
}

.product-visual{
  height:78px !important;
}

/* mobile */
@media(max-width:620px){

  .real-phone{
    width:162px !important;
    right:0 !important;
    bottom:0 !important;
  }

  .mobile-store{
    min-height:318px !important;
  }
}


/* =========================================================
   NOTE FIX + REMOVE MOBILE PROFIT CARD
   Scope:
   - hide floating profit card
   - move handwritten note above dashboard
   - add curved arrow pointing to dashboard
   ========================================================= */

/* hapus floating card di area mobile/hero */
.profit-callout{
  display:none !important;
}

/* note dipindah ke atas dashboard */
.hero-handnote{
  position:absolute !important;
  right:420px !important;
  top:92px !important;
  bottom:auto !important;

  z-index:18 !important;

  display:block !important;
  max-width:290px !important;

  color:#2d5fe8 !important;
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:700 !important;

  transform:rotate(-4deg) !important;
  transform-origin:left center !important;

  text-align:left !important;
  white-space:normal !important;
}

/* panah bengkok */
.hero-handnote::before{
  content:"" !important;
  position:absolute !important;

  left:205px !important;
  top:58px !important;

  width:94px !important;
  height:52px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;
  border-bottom-right-radius:72px !important;

  transform:rotate(10deg) !important;
}

/* kepala panah */
.hero-handnote::after{
  content:"" !important;
  position:absolute !important;

  left:287px !important;
  top:100px !important;

  width:14px !important;
  height:14px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;

  transform:rotate(-35deg) !important;
}

/* tablet */
@media(max-width:1100px){
  .hero-handnote{
    right:300px !important;
    top:70px !important;
    font-size:15px !important;
    max-width:230px !important;
  }

  .hero-handnote::before{
    left:165px !important;
    top:50px !important;
    width:72px !important;
    height:42px !important;
  }

  .hero-handnote::after{
    left:228px !important;
    top:84px !important;
  }
}

/* mobile: note dimatikan biar tidak sempit */
@media(max-width:620px){
  .hero-handnote{
    display:none !important;
  }
}


/* =========================================================
   NOTE REPOSITION
   Move handwritten note above dashboard logo area
   ========================================================= */

.hero-handnote{
  right:525px !important;
  top:28px !important;
  bottom:auto !important;

  max-width:300px !important;
  font-size:18px !important;
  line-height:1.18 !important;

  transform:rotate(-4deg) !important;
  text-align:left !important;
}

/* panah bengkok diarahkan ke area dashboard */
.hero-handnote::before{
  left:210px !important;
  top:66px !important;

  width:112px !important;
  height:66px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;
  border-bottom-right-radius:88px !important;

  transform:rotate(12deg) !important;
}

.hero-handnote::after{
  left:309px !important;
  top:124px !important;

  width:14px !important;
  height:14px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;

  transform:rotate(-34deg) !important;
}

/* tablet */
@media(max-width:1100px){
  .hero-handnote{
    right:365px !important;
    top:20px !important;
    max-width:230px !important;
    font-size:15px !important;
  }

  .hero-handnote::before{
    left:160px !important;
    top:56px !important;
    width:82px !important;
    height:48px !important;
  }

  .hero-handnote::after{
    left:232px !important;
    top:95px !important;
  }
}


/* =========================================================
   NOTE FINAL POSITION
   - note above dashboard logo area
   - arrow below note pointing to dashboard
   - only note adjusted
   ========================================================= */

.hero-handnote{
  position:absolute !important;
  right:565px !important;
  top:-14px !important;
  bottom:auto !important;

  z-index:18 !important;

  max-width:300px !important;
  padding:0 !important;
  margin:0 !important;

  color:#2d5fe8 !important;
  font-size:17px !important;
  line-height:1.22 !important;
  font-weight:700 !important;

  text-align:left !important;
  white-space:normal !important;

  transform:rotate(-3deg) !important;
  transform-origin:left top !important;
}

/* panah utama: dibawah note lalu melengkung ke dashboard */
.hero-handnote::before{
  content:"" !important;
  position:absolute !important;

  left:118px !important;
  top:92px !important;

  width:128px !important;
  height:72px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;
  border-bottom-right-radius:92px !important;

  transform:rotate(18deg) !important;
}

/* kepala panah */
.hero-handnote::after{
  content:"" !important;
  position:absolute !important;

  left:235px !important;
  top:145px !important;

  width:14px !important;
  height:14px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;

  transform:rotate(-30deg) !important;
}

/* tablet */
@media(max-width:1100px){
  .hero-handnote{
    right:390px !important;
    top:-2px !important;
    max-width:235px !important;
    font-size:14px !important;
  }

  .hero-handnote::before{
    left:92px !important;
    top:74px !important;
    width:92px !important;
    height:52px !important;
  }

  .hero-handnote::after{
    left:175px !important;
    top:112px !important;
  }
}

/* mobile tetap disembunyikan */
@media(max-width:620px){
  .hero-handnote{
    display:none !important;
  }
}


/* =========================================================
   NOTE FINAL POSITION
   - note above dashboard logo area
   - arrow below note pointing to dashboard
   - only note adjusted
   ========================================================= */

.hero-handnote{
  position:absolute !important;
  right:565px !important;
  top:-14px !important;
  bottom:auto !important;

  z-index:18 !important;

  max-width:300px !important;
  padding:0 !important;
  margin:0 !important;

  color:#2d5fe8 !important;
  font-size:17px !important;
  line-height:1.22 !important;
  font-weight:700 !important;

  text-align:left !important;
  white-space:normal !important;

  transform:rotate(-3deg) !important;
  transform-origin:left top !important;
}

/* panah utama: dibawah note lalu melengkung ke dashboard */
.hero-handnote::before{
  content:"" !important;
  position:absolute !important;

  left:118px !important;
  top:92px !important;

  width:128px !important;
  height:72px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;
  border-bottom-right-radius:92px !important;

  transform:rotate(18deg) !important;
}

/* kepala panah */
.hero-handnote::after{
  content:"" !important;
  position:absolute !important;

  left:235px !important;
  top:145px !important;

  width:14px !important;
  height:14px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;

  transform:rotate(-30deg) !important;
}

/* tablet */
@media(max-width:1100px){
  .hero-handnote{
    right:390px !important;
    top:-2px !important;
    max-width:235px !important;
    font-size:14px !important;
  }

  .hero-handnote::before{
    left:92px !important;
    top:74px !important;
    width:92px !important;
    height:52px !important;
  }

  .hero-handnote::after{
    left:175px !important;
    top:112px !important;
  }
}

/* mobile tetap disembunyikan */
@media(max-width:620px){
  .hero-handnote{
    display:none !important;
  }
}


/* =========================================================
   HANDNOTE POSITION FIX
   Note sits ABOVE dashboard, aligned with dashboard logo.
   ========================================================= */

.hero-handnote{
  position:absolute !important;

  /* pakai LEFT supaya anchor jelas terhadap dashboard */
  left:24px !important;
  right:auto !important;

  /* benar-benar di atas dashboard */
  top:-18px !important;
  bottom:auto !important;

  z-index:20 !important;

  width:360px !important;
  max-width:360px !important;

  margin:0 !important;
  padding:0 !important;

  color:#2d5fe8 !important;

  font-size:17px !important;
  line-height:1.28 !important;
  font-weight:700 !important;

  text-align:left !important;
  white-space:normal !important;

  transform:rotate(-2deg) !important;
  transform-origin:left center !important;
}

/* PANAH: mulai dari bawah tulisan */
.hero-handnote::before{
  content:"" !important;

  position:absolute !important;

  left:210px !important;
  top:48px !important;

  width:100px !important;
  height:55px !important;

  border:none !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;

  border-bottom-right-radius:70px !important;

  transform:rotate(18deg) !important;
}

/* kepala panah mengarah turun ke dashboard */
.hero-handnote::after{
  content:"" !important;

  position:absolute !important;

  left:297px !important;
  top:92px !important;

  width:13px !important;
  height:13px !important;

  border:none !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;

  transform:rotate(-28deg) !important;
}

/* tablet */
@media(max-width:1100px){
  .hero-handnote{
    left:18px !important;
    top:-10px !important;

    width:300px !important;
    max-width:300px !important;

    font-size:15px !important;
  }

  .hero-handnote::before{
    left:175px !important;
    top:44px !important;
    width:82px !important;
    height:46px !important;
  }

  .hero-handnote::after{
    left:246px !important;
    top:81px !important;
  }
}

/* mobile tetap disembunyikan */
@media(max-width:620px){
  .hero-handnote{
    display:none !important;
  }
}


/* =========================================================
   HANDNOTE MICRO TUNE
   - slightly higher
   - slightly left
   - shorter curved arrow
   - avoid crossing report title
   ========================================================= */

.hero-handnote{
  left:8px !important;
  top:-34px !important;

  width:355px !important;
  max-width:355px !important;

  font-size:17px !important;
  line-height:1.24 !important;
}

/* panah lebih pendek, turun ke kiri atas dashboard */
.hero-handnote::before{
  left:192px !important;
  top:50px !important;

  width:72px !important;
  height:46px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;
  border-bottom-right-radius:62px !important;

  transform:rotate(13deg) !important;
}

/* kepala panah */
.hero-handnote::after{
  left:254px !important;
  top:86px !important;

  width:12px !important;
  height:12px !important;

  border-right:4px solid #2d5fe8 !important;
  border-bottom:4px solid #2d5fe8 !important;

  transform:rotate(-30deg) !important;
}


/* =========================================================
   HANDNOTE FINAL TUNE
   - thinner handwritten
   - higher position
   - arrow curves DOWN toward dashboard
   - note only
   ========================================================= */

.hero-handnote{
  left:18px !important;
  top:-54px !important;

  width:365px !important;
  max-width:365px !important;

  color:#2d5fe8 !important;

  font-family:
    "Bradley Hand",
    "Comic Sans MS",
    cursive !important;

  font-size:17px !important;
  line-height:1.22 !important;

  font-weight:400 !important;
  letter-spacing:.01em !important;

  transform:rotate(-2deg) !important;

  text-align:left !important;
}

/* panah bengkok turun ke dashboard */
.hero-handnote::before{
  content:"" !important;

  position:absolute !important;

  left:205px !important;
  top:50px !important;

  width:92px !important;
  height:78px !important;

  border:none !important;

  border-left:3px solid #2d5fe8 !important;
  border-bottom:3px solid #2d5fe8 !important;

  border-bottom-left-radius:80px !important;

  transform:rotate(-5deg) !important;
}

/* kepala panah benar-benar mengarah turun-kanan ke dashboard */
.hero-handnote::after{
  content:"" !important;

  position:absolute !important;

  left:286px !important;
  top:115px !important;

  width:12px !important;
  height:12px !important;

  border:none !important;

  border-right:3px solid #2d5fe8 !important;
  border-bottom:3px solid #2d5fe8 !important;

  transform:rotate(38deg) !important;
}

/* tablet */
@media(max-width:1100px){
  .hero-handnote{
    left:12px !important;
    top:-42px !important;

    width:300px !important;
    max-width:300px !important;

    font-size:15px !important;
  }

  .hero-handnote::before{
    left:170px !important;
    top:44px !important;

    width:72px !important;
    height:60px !important;
  }

  .hero-handnote::after{
    left:232px !important;
    top:94px !important;
  }
}


/* =========================================================
   HANDNOTE COMPACT FINAL
   Smaller note + smaller curved arrow
   ========================================================= */

.hero-handnote{
  left:24px !important;
  top:-50px !important;

  width:300px !important;
  max-width:300px !important;

  font-size:13px !important;
  line-height:1.18 !important;
  font-weight:400 !important;

  letter-spacing:.005em !important;

  transform:rotate(-2deg) !important;
}

/* panah kecil dan pendek */
.hero-handnote::before{
  left:180px !important;
  top:38px !important;

  width:48px !important;
  height:36px !important;

  border:none !important;

  border-left:2px solid #2d5fe8 !important;
  border-bottom:2px solid #2d5fe8 !important;

  border-bottom-left-radius:42px !important;

  transform:rotate(-8deg) !important;
}

/* kepala panah kecil */
.hero-handnote::after{
  left:218px !important;
  top:66px !important;

  width:8px !important;
  height:8px !important;

  border:none !important;

  border-right:2px solid #2d5fe8 !important;
  border-bottom:2px solid #2d5fe8 !important;

  transform:rotate(38deg) !important;
}

@media(max-width:1100px){
  .hero-handnote{
    left:18px !important;
    top:-40px !important;

    width:250px !important;
    max-width:250px !important;

    font-size:12px !important;
  }

  .hero-handnote::before{
    left:150px !important;
    top:34px !important;

    width:40px !important;
    height:30px !important;
  }

  .hero-handnote::after{
    left:181px !important;
    top:57px !important;
  }
}


/* =========================================================
   HANDNOTE SIMPLE FINAL
   Cleaner note + obvious simple arrow
   ========================================================= */

.hero-handnote{
  left:26px !important;
  top:-48px !important;

  width:300px !important;
  max-width:300px !important;

  color:#2d5fe8 !important;

  font-family:
    "Segoe Print",
    "Bradley Hand",
    cursive !important;

  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:400 !important;

  letter-spacing:0 !important;

  transform:rotate(-1deg) !important;
}

/* garis panah sederhana */
.hero-handnote::before{
  content:"" !important;

  position:absolute !important;

  left:195px !important;
  top:36px !important;

  width:52px !important;
  height:38px !important;

  border:none !important;

  border-right:2px solid #2d5fe8 !important;
  border-bottom:2px solid #2d5fe8 !important;

  border-bottom-right-radius:42px !important;

  transform:rotate(8deg) !important;
}

/* kepala panah sederhana */
.hero-handnote::after{
  content:"" !important;

  position:absolute !important;

  left:238px !important;
  top:65px !important;

  width:8px !important;
  height:8px !important;

  border:none !important;

  border-right:2px solid #2d5fe8 !important;
  border-bottom:2px solid #2d5fe8 !important;

  transform:rotate(42deg) !important;
}


/* =========================================================
   SIMPLE HANDNOTE ARROW
   Replace curved CSS drawing with one clean arrow
   ========================================================= */

.hero-handnote::before{
  content:"↘" !important;

  position:absolute !important;

  left:218px !important;
  top:34px !important;

  width:auto !important;
  height:auto !important;

  border:none !important;
  border-radius:0 !important;

  color:#2d5fe8 !important;

  font-family:
    "Segoe Print",
    "Bradley Hand",
    cursive !important;

  font-size:28px !important;
  font-weight:400 !important;
  line-height:1 !important;

  transform:rotate(8deg) !important;
}

/* hapus kepala panah lama */
.hero-handnote::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   HANDNOTE SVG ARROW
   Real SVG arrow. Old pseudo arrows disabled.
   ========================================================= */

.hero-handnote::before,
.hero-handnote::after{
  content:none !important;
  display:none !important;
}

/* posisi panah tepat di bawah note */
.hero-note-arrow{
  position:absolute;

  left:245px;
  top:-4px;

  width:112px;
  height:98px;

  z-index:19;

  overflow:visible;

  pointer-events:none;
}

/* garis panah */
.hero-note-arrow-line{
  fill:none;
  stroke:#2d5fe8;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* kepala panah */
.hero-note-arrow-head{
  fill:none;
  stroke:#2d5fe8;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:1100px){
  .hero-note-arrow{
    left:215px;
    top:0;

    width:92px;
    height:82px;
  }
}

@media(max-width:620px){
  .hero-note-arrow{
    display:none;
  }
}


/* =========================================================
   HERO NOTE ARROW TUNE
   Smaller arrow, beside note, points to dashboard
   ========================================================= */
.hero-note-arrow{
  position:absolute;
  left:188px !important;
  top:22px !important;
  width:92px !important;
  height:78px !important;
  z-index:19;
  overflow:visible;
  pointer-events:none;
}

.hero-note-arrow-line,
.hero-note-arrow-head{
  fill:none;
  stroke:#2d5fe8;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:1100px){
  .hero-note-arrow{
    left:170px !important;
    top:20px !important;
    width:82px !important;
    height:70px !important;
  }
}


/* =========================================================
   HANDNOTE ARROW FINAL POSITION
   Small arrow beside note, pointing into dashboard body
   ========================================================= */

.hero-note-arrow{
  position:absolute !important;

  left:292px !important;
  top:-18px !important;

  width:72px !important;
  height:58px !important;

  z-index:19 !important;

  overflow:visible !important;
  pointer-events:none !important;
}

.hero-note-arrow-line,
.hero-note-arrow-head{
  fill:none !important;

  stroke:#2d5fe8 !important;
  stroke-width:2 !important;

  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

@media(max-width:1100px){
  .hero-note-arrow{
    left:252px !important;
    top:-12px !important;

    width:62px !important;
    height:50px !important;
  }
}


/* ===== HERO ARROW LEFT SHIFT HOTFIX ===== */
.hero-note-arrow{
  left: 245px !important;
  right: auto !important;
  transform: none !important;
}

@media (max-width: 1100px){
  .hero-note-arrow{
    left: 215px !important;
    right: auto !important;
    transform: none !important;
  }
}

/* ===== HANDNOTE ARROW LEFT FINAL ===== */
.hero-note-arrow{
  left:195px !important;
  top:22px !important;
}

@media(max-width:1100px){
  .hero-note-arrow{
    left:175px !important;
  }
}


/* ===== ARROW POSITION FIX ONLY ===== */
.hero-note-arrow{
  left:195px !important;
  top:-18px !important;
}

@media(max-width:1100px){
  .hero-note-arrow{
    left:175px !important;
    top:-12px !important;
  }
}


/* =========================================================
   HANDNOTE FONT - CAVEAT
   Google Font by Impallari Type
   ========================================================= */

.hero-handnote{
  font-family:"Caveat", cursive !important;
  font-weight:400 !important;
  font-size:17px !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
}


/* =========================================================
   LOCAL CAVEAT
   Official Google Fonts Caveat / Impallari Type
   ========================================================= */

@font-face{
  font-family:"Caveat";
  src:url("./assets/fonts/Caveat-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

.hero-handnote{
  font-family:"Caveat", cursive !important;
  font-weight:400 !important;
}


/* =========================================================
   HERO DASHBOARD SETTINGS SUBMENU
   Scope: mock dashboard sidebar only
   ========================================================= */

.mock-settings-menu{
  margin-top:2px;
}

.mock-settings-head{
  display:grid;
  grid-template-columns:16px 1fr 16px;
  align-items:center;
  gap:6px;

  padding:8px 9px;

  border-radius:9px;

  background:#edf4ff;
  color:#216fe8;

  font-size:9px;
  font-weight:800;
}

.mock-settings-icon{
  font-size:9px;
  line-height:1;
}

.mock-settings-chevron{
  text-align:right;
  font-size:11px;
  line-height:1;
}

.mock-settings-submenu{
  display:grid;
  gap:0;

  padding:5px 0 0 25px;
}

.mock-settings-submenu div{
  padding:5px 4px !important;

  color:#657286 !important;

  background:transparent !important;

  border-radius:0 !important;

  font-size:8px !important;
  font-weight:500 !important;
}

/* jangan biarkan inherited active style masuk submenu */
.real-sidebar nav .mock-settings-submenu div{
  background:transparent !important;
  color:#657286 !important;
  font-weight:500 !important;
}

/* tablet */
@media(max-width:1100px){
  .mock-settings-head{
    grid-template-columns:14px 1fr 14px;
    padding:6px 7px;
    font-size:7px;
  }

  .mock-settings-submenu{
    padding-left:19px;
  }

  .mock-settings-submenu div{
    padding:4px 3px !important;
    font-size:6.5px !important;
  }
}


/* =========================================================
   HERO DASHBOARD SETTINGS SUBMENU
   Scope: mock dashboard sidebar only
   ========================================================= */

.mock-settings-menu{
  margin-top:2px;
}

.mock-settings-head{
  display:grid;
  grid-template-columns:16px 1fr 16px;
  align-items:center;
  gap:6px;

  padding:8px 9px;

  border-radius:9px;

  background:#edf4ff;
  color:#216fe8;

  font-size:9px;
  font-weight:800;
}

.mock-settings-icon{
  font-size:9px;
  line-height:1;
}

.mock-settings-chevron{
  text-align:right;
  font-size:11px;
  line-height:1;
}

.mock-settings-submenu{
  display:grid;
  gap:0;

  padding:5px 0 0 25px;
}

.mock-settings-submenu div{
  padding:5px 4px !important;

  color:#657286 !important;

  background:transparent !important;

  border-radius:0 !important;

  font-size:8px !important;
  font-weight:500 !important;
}

/* jangan biarkan inherited active style masuk submenu */
.real-sidebar nav .mock-settings-submenu div{
  background:transparent !important;
  color:#657286 !important;
  font-weight:500 !important;
}

/* tablet */
@media(max-width:1100px){
  .mock-settings-head{
    grid-template-columns:14px 1fr 14px;
    padding:6px 7px;
    font-size:7px;
  }

  .mock-settings-submenu{
    padding-left:19px;
  }

  .mock-settings-submenu div{
    padding:4px 3px !important;
    font-size:6.5px !important;
  }
}


/* =========================================================
   HERO DASHBOARD SIDEBAR SETTINGS
   ========================================================= */

.mock-settings-wrap{
  margin-top:2px;
}

.mock-settings-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  padding:8px 9px !important;

  border-radius:9px !important;

  background:#edf4ff !important;
  color:#216fe8 !important;

  font-size:9px !important;
  font-weight:800 !important;
}

.mock-settings-left{
  display:flex;
  align-items:center;
  gap:7px;
}

.mock-settings-chevron{
  font-size:11px;
  line-height:1;
}

.mock-settings-submenu{
  display:grid;
  gap:0;

  padding:5px 0 0 26px;
}

.mock-settings-submenu div{
  padding:5px 4px !important;

  background:transparent !important;
  color:#667386 !important;

  border-radius:0 !important;

  font-size:8px !important;
  font-weight:500 !important;
}

.real-sidebar nav .mock-settings-submenu div{
  background:transparent !important;
  color:#667386 !important;
  font-weight:500 !important;
}

@media(max-width:1100px){

  .mock-settings-head{
    padding:6px 7px !important;
    font-size:7px !important;
  }

  .mock-settings-submenu{
    padding-left:20px;
  }

  .mock-settings-submenu div{
    padding:4px 3px !important;
    font-size:6.5px !important;
  }
}


/* =========================================================
   HERO SETTINGS SUBMENU VISIBILITY FIX
   ========================================================= */

.real-sidebar{
  overflow:visible !important;
}

.real-sidebar nav{
  overflow:visible !important;
}

.mock-settings-wrap{
  overflow:visible !important;
}

.mock-settings-submenu{
  display:grid !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;

  padding:6px 0 0 26px !important;
}

.mock-settings-submenu div{
  display:block !important;

  min-height:auto !important;

  padding:5px 4px !important;

  background:transparent !important;
  color:#667386 !important;

  font-size:8px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
}

/* sedikit rapatkan sidebar supaya submenu muat */
.real-sidebar nav{
  gap:2px !important;
}

.real-sidebar nav > div:not(.mock-settings-wrap){
  padding-top:7px !important;
  padding-bottom:7px !important;
}


/* =========================================================
   SETTINGS SUBMENU WRAPPER FIX
   Override generic .real-sidebar nav div flex rule
   ========================================================= */

.real-sidebar nav .mock-settings-wrap{
  display:block !important;
  width:100% !important;

  margin:2px 0 0 !important;
  padding:0 !important;

  background:transparent !important;
  color:inherit !important;

  border-radius:0 !important;

  overflow:visible !important;
}

.real-sidebar nav .mock-settings-head{
  display:flex !important;
  width:100% !important;

  align-items:center !important;
  justify-content:space-between !important;

  padding:8px 9px !important;

  background:#edf4ff !important;
  color:#216fe8 !important;

  border-radius:9px !important;
}

.real-sidebar nav .mock-settings-submenu{
  display:block !important;
  width:100% !important;

  padding:5px 0 0 27px !important;
  margin:0 !important;

  overflow:visible !important;
}

.real-sidebar nav .mock-settings-submenu > div{
  display:block !important;

  width:auto !important;

  padding:5px 3px !important;
  margin:0 !important;

  background:transparent !important;
  color:#667386 !important;

  font-size:8px !important;
  font-weight:500 !important;
  line-height:1.15 !important;
}



/* HERO MOBILE STORE ROTATOR START */
.hero-phone-mock.rotating-soft,
.mobile-screen.rotating-soft,
.phone-screen.rotating-soft{
  transition:opacity .28s ease, transform .28s ease;
  opacity:.92;
  transform:translateY(1px);
}
/* HERO MOBILE STORE ROTATOR END */


/* HERO MOBILE ROTATOR V2 START */
.hero-phone-mock,
.mobile-screen,
.phone-screen{
  position:relative;
}

.mobile-rotator-fade{
  opacity:.82;
  transition:opacity .22s ease, transform .22s ease;
  transform:translateY(1px);
}

.mobile-thumb-overlay{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:72px;
  height:72px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  line-height:1;
  pointer-events:none;
  background:rgba(255,255,255,.84);
  box-shadow:0 10px 24px rgba(17,24,39,.10);
  z-index:3;
}

.mobile-thumb-theme-fashion{ background:linear-gradient(135deg,#eef2ff,#ede9fe); }
.mobile-thumb-theme-sayur{ background:linear-gradient(135deg,#ecfdf5,#dcfce7); }
.mobile-thumb-theme-minuman{ background:linear-gradient(135deg,#eff6ff,#dbeafe); }
.mobile-thumb-theme-makanan{ background:linear-gradient(135deg,#fff7ed,#ffedd5); }

.mobile-cat-emoji{
  display:block;
  font-size:18px;
  line-height:1;
  margin-bottom:4px;
}
.mobile-cat-label{
  display:block;
  font-size:10px;
  line-height:1.1;
  white-space:nowrap;
}
/* HERO MOBILE ROTATOR V2 END */

/* =========================================================
   MOBILE STORE ROTATOR V3
   ========================================================= */

.mobile-store{
  transition:
    opacity .25s ease,
    transform .25s ease !important;
}

.mobile-store.store-changing{
  opacity:.72 !important;
  transform:translateY(2px) scale(.995) !important;
}


/* BANNER THEMES */

.mobile-banner{
  transition:
    background .35s ease,
    box-shadow .35s ease !important;
}

.mobile-banner.store-fashion{
  background:
    linear-gradient(135deg,#7257e8,#a76cf1) !important;
}

.mobile-banner.store-sayur{
  background:
    linear-gradient(135deg,#129b73,#42bb66) !important;
}

.mobile-banner.store-minuman{
  background:
    linear-gradient(135deg,#98683e,#d49a58) !important;
}

.mobile-banner.store-makanan{
  background:
    linear-gradient(135deg,#e06b38,#f6a53a) !important;
}


/* PRODUCT THUMBNAIL THEMES */

.product-visual{
  transition:
    background .35s ease,
    transform .35s ease !important;

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

  font-size:38px !important;
}


/* fashion */

.store-product-fashion-1{
  background:#edf3ff !important;
}

.store-product-fashion-2{
  background:#f4eeff !important;
}


/* sayur */

.store-product-sayur-1{
  background:#e9f9ef !important;
}

.store-product-sayur-2{
  background:#fff1eb !important;
}


/* minuman */

.store-product-minuman-1{
  background:#f6eee7 !important;
}

.store-product-minuman-2{
  background:#f4ecff !important;
}


/* makanan */

.store-product-makanan-1{
  background:#fff1e8 !important;
}

.store-product-makanan-2{
  background:#fff7dc !important;
}


/* =========================================================
   MOBILE FASHION STATIC
   ========================================================= */

/* banner medium size */
.mobile-banner{
  min-height:78px !important;
  margin-top:9px !important;
  padding:10px 11px !important;

  border-radius:13px !important;

  background:
    linear-gradient(135deg,#7057e8,#8d6ff1) !important;
}

.mobile-banner strong{
  font-size:10px !important;
  line-height:1.18 !important;
}

.mobile-banner button{
  margin-top:7px !important;

  padding:4px 7px !important;

  font-size:5.5px !important;
}

.mobile-banner > span{
  font-size:23px !important;
}

/* category fashion */
.mobile-categories{
  margin-top:9px !important;
}

.mobile-categories i{
  width:25px !important;
  height:25px !important;

  font-size:11px !important;
}

.mobile-categories small{
  font-size:4.6px !important;
}

/* fashion product thumbnails */
.product-visual.fashion-product-1{
  background:#eaf2ff !important;
}

.product-visual.fashion-product-2{
  background:#f4edff !important;
}

.product-visual{
  height:76px !important;

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

  font-size:35px !important;
}

/* remove rotator transition residue */
.mobile-store{
  opacity:1 !important;
  transform:none !important;
}

.mobile-store.store-changing{
  opacity:1 !important;
  transform:none !important;
}


/* =========================================================
   BABY FASHION BRAND ALIGNMENT
   ========================================================= */

.mobile-logo{
  width:30px !important;
  height:30px !important;

  font-size:9px !important;
  font-weight:800 !important;
}

/* Kaos Basic */
.product-visual.fashion-product-1{
  background:
    linear-gradient(135deg,#edf3ff,#e5edff) !important;
}

/* Celana Chino */
.product-visual.fashion-product-2{
  background:
    linear-gradient(135deg,#f5efff,#eee7ff) !important;
}

.product-visual{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:40px !important;
  line-height:1 !important;
}


/* =========================================================
   BABY FASHION - MOBILE BANNER MEDIUM + PRODUCT FIX
   ========================================================= */

.mobile-banner{
  padding:14px 16px !important;
  min-height:auto !important;
  border-radius:18px !important;
  align-items:center !important;
}

.mobile-banner strong{
  font-size:12px !important;
  line-height:1.35 !important;
}

.mobile-banner > span{
  font-size:28px !important;
  line-height:1 !important;
}

.mobile-banner button{
  display:none !important;
}

.mobile-products .product-visual{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:38px !important;
  line-height:1 !important;
}

.mobile-products .product-visual.fashion-product-1{
  background:linear-gradient(135deg,#f7f0ff,#eee5ff) !important;
}

.mobile-products .product-visual.fashion-product-2{
  background:linear-gradient(135deg,#fff1f7,#ffe8f1) !important;
}


/* =========================================================
   BABY FASHION MOBILE BANNER - STATIC IMAGE
   ========================================================= */

.mobile-banner.fashion-banner-image{
  display:block !important;
  width:100% !important;

  aspect-ratio:2.22 / 1 !important;
  height:auto !important;
  min-height:0 !important;

  margin:9px 0 0 !important;
  padding:0 !important;

  border-radius:14px !important;
  overflow:hidden !important;

  background-image:url("./assets/banners/banner-fashion.png") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;

  box-shadow:none !important;
}

.mobile-banner.fashion-banner-image::before,
.mobile-banner.fashion-banner-image::after{
  display:none !important;
}


/* =========================================================
   GOTONG ROYONG
   CANONICAL DESKTOP RESPONSIVE V1

   RULE:
   - Mac desktop layout is canonical
   - Never scale whole hero
   - Never reposition dashboard / phone / handnote by height
   - Short screens adjust LEFT COPY only
   ========================================================= */

html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}


/* =========================================================
   DESKTOP CANONICAL
   ========================================================= */

@media (min-width:1101px){

  .hero-v2{
    width:min(1380px,calc(100% - 48px)) !important;

    margin-left:auto !important;
    margin-right:auto !important;

    transform:none !important;
    transform-origin:initial !important;
  }

}


/* =========================================================
   SHORT DESKTOP / TV

   IMPORTANT:
   Only lift LEFT content.
   Right visual, phone, dashboard, handwriting and arrow
   retain the exact desktop geometry.
   ========================================================= */

@media (min-width:1101px) and (max-height:850px){

  .hero-v2{
    transform:none !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .hero-v2 .hero-copy{
    margin-top:-108px !important;
  }

}


/* Typical short TV/browser viewport */
@media (min-width:1101px) and (max-height:780px){

  .hero-v2 .hero-copy{
    margin-top:-122px !important;
  }

}


/* Very short desktop viewport */
@media (min-width:1101px) and (max-height:700px){

  .hero-v2 .hero-copy{
    margin-top:-132px !important;
  }

}


/* =========================================================
   LARGE / FULL HD / TV
   Same density as Mac — do not enlarge or shrink.
   ========================================================= */

@media (min-width:1600px){

  .hero-v2{
    width:1380px !important;
    max-width:calc(100% - 64px) !important;

    margin-left:auto !important;
    margin-right:auto !important;

    transform:none !important;
  }

}


/* =========================================================
   TABLET / MOBILE
   Existing original responsive CSS stays authoritative.
   ========================================================= */

@media (max-width:1100px){

  .hero-v2{
    transform:none !important;
  }

}


/* =========================================================
   TV ↔ MAC DESKTOP ALIGNMENT
   Preserve element sizes and right-side geometry.
   Only normalize hero top spacing by viewport width.
   ========================================================= */

/* Canonical desktop */
@media (min-width:1101px){

  .hero-v2{
    transform:none !important;
    margin-top:0 !important;
  }

}


/* TV / 1366-ish desktop width
   Add breathing room so composition matches Mac feel */
@media (min-width:1101px) and (max-width:1500px){

  .hero-v2{
    padding-top:34px !important;
  }

  .hero-v2 .hero-copy{
    margin-top:-92px !important;
  }

}


/* Larger desktop / Mac */
@media (min-width:1501px){

  .hero-v2{
    padding-top:58px !important;
  }

  .hero-v2 .hero-copy{
    margin-top:-92px !important;
  }

}


/* Do not let screen height change handwritten geometry */
@media (min-width:1101px){

  .hero-handnote{
    top:-50px !important;
  }

  .hero-note-arrow{
    top:-18px !important;
  }

}


/* =========================================================
   TV HERO LIFT FINAL
   TV: move WHOLE hero upward.
   Mac: keep canonical desktop position.
   No scaling. No internal geometry changes.
   ========================================================= */

/* Remove artificial top padding from previous patch */
@media (min-width:1101px){

  .hero-v2{
    padding-top:0 !important;
    transform:none !important;
  }

}


/* TV / 1366-ish desktop */
@media (min-width:1101px) and (max-width:1500px){

  .hero-v2{
    margin-top:-32px !important;
    padding-top:0 !important;
  }

  /* Restore canonical copy relationship inside hero */
  .hero-v2 .hero-copy{
    margin-top:-92px !important;
  }

}


/* Mac / larger desktop stays canonical */
@media (min-width:1501px){

  .hero-v2{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  .hero-v2 .hero-copy{
    margin-top:-92px !important;
  }

}


/* =========================================================
   TV HERO LIFT FINE TUNE
   Reduce lift so handwritten stays visible
   ========================================================= */

@media (min-width:1101px) and (max-width:1500px){

  .hero-v2{
    margin-top:-16px !important;
  }

}


/* =========================================================
   FINAL DESKTOP HERO FINE TUNE
   Move whole hero slightly downward on desktop
   ========================================================= */

@media (min-width:1101px){

  .hero-v2{
    position:relative !important;
    top:10px !important;
  }

}


/* =========================================================
   GOTONG ROYONG MOBILE HERO VISUAL V1
   Keep all existing elements.
   Only reorganize dashboard + phone + note on mobile.
   ========================================================= */

@media (max-width:620px){

  /* -----------------------------------------
     HERO STACK
     ----------------------------------------- */

  .hero-v2{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding-left:16px !important;
    padding-right:16px !important;
    transform:none !important;
  }

  .hero-v2 .hero-copy{
    width:100% !important;
    margin:0 !important;
    transform:none !important;
  }


  /* -----------------------------------------
     RIGHT VISUAL BECOMES SECOND MOBILE BLOCK
     ----------------------------------------- */

  .hero-visual{
    position:relative !important;

    width:100% !important;
    height:520px !important;

    margin:52px auto 12px !important;
    padding:0 !important;

    overflow:visible !important;
    transform:none !important;
  }


  /* -----------------------------------------
     HANDWRITTEN NOTE
     Keep it visible above dashboard
     ----------------------------------------- */

  .hero-handnote{
    display:block !important;
    position:absolute !important;

    left:18px !important;
    top:-34px !important;

    width:250px !important;
    max-width:250px !important;

    margin:0 !important;

    font-size:17px !important;
    line-height:1.06 !important;

    z-index:20 !important;
    transform:none !important;
  }

  .hero-note-arrow{
    display:block !important;
    position:absolute !important;

    left:210px !important;
    top:-20px !important;

    width:76px !important;
    height:60px !important;

    z-index:19 !important;

    transform:rotate(7deg) !important;
    transform-origin:center !important;
  }


  /* -----------------------------------------
     DASHBOARD
     Background layer
     ----------------------------------------- */

  .real-dashboard{
    position:absolute !important;

    left:-108px !important;
    top:52px !important;

    width:640px !important;
    max-width:none !important;

    margin:0 !important;

    transform:scale(.62) !important;
    transform-origin:top left !important;

    animation:none !important;

    z-index:5 !important;
  }


  /* -----------------------------------------
     PHONE
     Front layer
     ----------------------------------------- */

  .real-phone{
    position:absolute !important;

    right:-18px !important;
    top:72px !important;
    bottom:auto !important;
    left:auto !important;

    width:218px !important;

    margin:0 !important;

    transform:scale(.88) !important;
    transform-origin:top right !important;

    animation:none !important;

    z-index:12 !important;
  }


  /* -----------------------------------------
     SUBDOMAIN BADGE
     ----------------------------------------- */

  .domain-slide-badge{
    position:absolute !important;

    left:50% !important;
    bottom:18px !important;

    width:auto !important;
    min-width:235px !important;
    max-width:88% !important;

    margin:0 !important;

    transform:translateX(-50%) !important;

    z-index:25 !important;
  }


  /* -----------------------------------------
     REMOVE EXCESS EMPTY SPACE
     AFTER VISUAL COMPOSITION
     ----------------------------------------- */

  .hero-v2 + section{
    margin-top:0 !important;
  }

}


/* Slightly narrow phones */
@media (max-width:390px){

  .hero-visual{
    height:500px !important;
    margin-top:48px !important;
  }

  .real-dashboard{
    left:-125px !important;
    transform:scale(.59) !important;
  }

  .real-phone{
    right:-24px !important;
    transform:scale(.84) !important;
  }

  .hero-handnote{
    left:12px !important;
    font-size:16px !important;
  }

  .hero-note-arrow{
    left:196px !important;
  }

}


/* Very narrow phones */
@media (max-width:350px){

  .hero-visual{
    height:480px !important;
  }

  .real-dashboard{
    left:-138px !important;
    transform:scale(.56) !important;
  }

  .real-phone{
    right:-30px !important;
    transform:scale(.80) !important;
  }

}


/* =========================================================
   MOBILE SHOWCASE V2
   Dashboard + Phone compact composition
   ========================================================= */

@media (max-width:620px){

  /* Container visual dipadatkan */
  .hero-visual{
    position:relative !important;

    width:100% !important;
    height:430px !important;

    margin:46px auto 0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  /* =====================================================
     HANDWRITTEN
     Tetap ada, jangan dihapus
     ===================================================== */

  .hero-handnote{
    left:18px !important;
    top:-40px !important;

    width:290px !important;
    max-width:290px !important;

    font-size:17px !important;
    line-height:1.08 !important;

    z-index:30 !important;
  }

  .hero-note-arrow{
    left:245px !important;
    top:-26px !important;

    width:74px !important;
    height:58px !important;

    z-index:29 !important;
  }


  /* =====================================================
     DASHBOARD
     Lebih utuh terlihat dari kiri
     ===================================================== */

  .real-dashboard{
    position:absolute !important;

    left:-22px !important;
    top:54px !important;

    width:590px !important;
    max-width:none !important;

    margin:0 !important;

    transform:scale(.67) !important;
    transform-origin:top left !important;

    animation:none !important;

    z-index:5 !important;
  }


  /* =====================================================
     PHONE
     Lebih kecil dan lebih proporsional
     ===================================================== */

  .real-phone{
    position:absolute !important;

    right:-4px !important;
    top:74px !important;
    bottom:auto !important;
    left:auto !important;

    width:198px !important;

    margin:0 !important;

    transform:scale(.82) !important;
    transform-origin:top right !important;

    animation:none !important;

    z-index:15 !important;
  }


  /* =====================================================
     SUBDOMAIN
     Di bawah dashboard + phone, bukan di tengah
     ===================================================== */

  .domain-slide-badge{
    position:absolute !important;

    left:50% !important;
    bottom:-8px !important;

    min-width:245px !important;
    max-width:88% !important;

    margin:0 !important;

    transform:translateX(-50%) !important;

    z-index:40 !important;
  }


  /* =====================================================
     RAPATKAN KE SECTION BERIKUTNYA
     ===================================================== */

  .hero-v2{
    min-height:auto !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }

  .hero-v2 + section{
    margin-top:0 !important;
    padding-top:34px !important;
  }

}


/* HP sedikit lebih sempit */
@media (max-width:390px){

  .hero-visual{
    height:415px !important;
  }

  .real-dashboard{
    left:-32px !important;
    transform:scale(.64) !important;
  }

  .real-phone{
    right:-10px !important;
    width:192px !important;
    transform:scale(.80) !important;
  }

  .domain-slide-badge{
    min-width:225px !important;
  }

}


/* HP sangat sempit */
@media (max-width:350px){

  .hero-visual{
    height:400px !important;
  }

  .real-dashboard{
    left:-42px !important;
    transform:scale(.61) !important;
  }

  .real-phone{
    right:-14px !important;
    width:186px !important;
    transform:scale(.78) !important;
  }

}


/* =========================================================
   MOBILE SHOWCASE TUNE V3
   - dashboard lebih kecil
   - dashboard tetap miring
   - handwritten diturunkan
   ========================================================= */
@media (max-width:620px){

  .hero-visual{
    height: 500px !important;
    margin-top: 28px !important;
    overflow: visible !important;
  }

  .hero-handnote{
    top: 10px !important;
    left: 22px !important;
    width: 300px !important;
    max-width: 300px !important;
    font-size: 17px !important;
    line-height: 1.08 !important;
    z-index: 30 !important;
  }

  .hero-note-arrow{
    top: 26px !important;
    left: 250px !important;
    width: 78px !important;
    height: 62px !important;
    z-index: 29 !important;
  }

  .real-dashboard{
    left: -34px !important;
    top: 86px !important;
    width: 690px !important;
    max-width: none !important;
    transform: rotate(-3.2deg) scale(.50) !important;
    transform-origin: top left !important;
    z-index: 5 !important;
  }

  .real-phone{
    right: -6px !important;
    top: 132px !important;
    width: 195px !important;
    transform: scale(.82) !important;
    transform-origin: top right !important;
    z-index: 15 !important;
  }

  .domain-slide-badge{
    left: 49% !important;
    bottom: 30px !important;
    transform: translateX(-50%) !important;
    z-index: 40 !important;
  }
}

@media (max-width:390px){

  .hero-visual{
    height: 490px !important;
  }

  .hero-handnote{
    top: 14px !important;
    left: 18px !important;
    width: 286px !important;
    max-width: 286px !important;
  }

  .hero-note-arrow{
    top: 32px !important;
    left: 236px !important;
    width: 74px !important;
    height: 58px !important;
  }

  .real-dashboard{
    left: -38px !important;
    top: 92px !important;
    width: 690px !important;
    transform: rotate(-3.2deg) scale(.485) !important;
  }

  .real-phone{
    right: -8px !important;
    top: 138px !important;
    width: 190px !important;
    transform: scale(.80) !important;
  }

  .domain-slide-badge{
    bottom: 26px !important;
  }
}

@media (max-width:350px){

  .hero-visual{
    height: 478px !important;
  }

  .hero-handnote{
    top: 18px !important;
    left: 14px !important;
    width: 270px !important;
    max-width: 270px !important;
    font-size: 16px !important;
  }

  .hero-note-arrow{
    top: 36px !important;
    left: 222px !important;
    width: 68px !important;
    height: 54px !important;
  }

  .real-dashboard{
    left: -42px !important;
    top: 96px !important;
    width: 690px !important;
    transform: rotate(-3deg) scale(.47) !important;
  }

  .real-phone{
    right: -10px !important;
    top: 142px !important;
    width: 184px !important;
    transform: scale(.78) !important;
  }

  .domain-slide-badge{
    bottom: 24px !important;
  }
}


/* =========================================================
   SHRINK MOBILE DASHBOARD ONLY
   ========================================================= */
@media (max-width:620px){
  .real-dashboard{
    left: -56px !important;
    top: 104px !important;
    width: 720px !important;
    max-width: none !important;
    transform: rotate(-3.2deg) scale(.42) !important;
    transform-origin: top left !important;
  }
}

@media (max-width:390px){
  .real-dashboard{
    left: -60px !important;
    top: 108px !important;
    width: 720px !important;
    max-width: none !important;
    transform: rotate(-3.2deg) scale(.40) !important;
    transform-origin: top left !important;
  }
}

@media (max-width:350px){
  .real-dashboard{
    left: -64px !important;
    top: 112px !important;
    width: 720px !important;
    max-width: none !important;
    transform: rotate(-3deg) scale(.38) !important;
    transform-origin: top left !important;
  }
}


/* =========================================================
   MOBILE DASHBOARD SHRINK CORRECTION
   Dashboard only — no other element touched
   ========================================================= */

@media (max-width:620px){
  .real-dashboard{
    width:690px !important;
    transform:rotate(-3.2deg) scale(.36) !important;
    transform-origin:top left !important;
  }
}

@media (max-width:390px){
  .real-dashboard{
    width:690px !important;
    transform:rotate(-3.2deg) scale(.34) !important;
    transform-origin:top left !important;
  }
}

@media (max-width:350px){
  .real-dashboard{
    width:690px !important;
    transform:rotate(-3deg) scale(.32) !important;
    transform-origin:top left !important;
  }
}


/* =========================================================
   MOBILE DASHBOARD SHELL AUTHORITY
   Correct model:
   - real-dashboard stays full-size inside shell
   - macbook-shell is scaled as one complete dashboard visual
   ========================================================= */

@media (max-width:620px){

  /* -------------------------------------------------------
     RESTORE INNER DASHBOARD
     ------------------------------------------------------- */

  .macbook-shell .real-dashboard{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    transform:none !important;
    transform-origin:center center !important;

    animation:none !important;

    grid-template-columns:150px minmax(0,1fr) !important;

    border-radius:22px !important;
  }


  /* -------------------------------------------------------
     SCALE WHOLE DASHBOARD SHELL
     ------------------------------------------------------- */

  .macbook-shell{
    position:absolute !important;

    left:18px !important;
    top:92px !important;

    width:760px !important;
    height:455px !important;

    transform:
      perspective(950px)
      rotateY(-12deg)
      rotateZ(-0.35deg)
      scale(.43) !important;

    transform-origin:top left !important;

    animation:none !important;

    z-index:5 !important;
  }

}


/* narrower phones */
@media (max-width:390px){

  .macbook-shell{
    left:14px !important;
    top:96px !important;

    transform:
      perspective(950px)
      rotateY(-12deg)
      rotateZ(-0.35deg)
      scale(.40) !important;
  }

}


/* very narrow phones */
@media (max-width:350px){

  .macbook-shell{
    left:10px !important;
    top:100px !important;

    transform:
      perspective(950px)
      rotateY(-11deg)
      rotateZ(-0.3deg)
      scale(.37) !important;
  }

}


/* =========================================================
   MOBILE HERO SHOWCASE TUNING V2
   Goal:
   - dashboard lebih besar
   - area kiri s/d total laba bersih terlihat
   - sisi kanan biar tertutup phone
   - phone lebih besar tapi tidak kepotong
   ========================================================= */

@media (max-width: 620px){

  /* area showcase jangan terlalu pendek */
  .hero-visual,
  .hero-showcase,
  .hero-media,
  .hero-stage{
    min-height: 760px !important;
    overflow: hidden !important;
  }

  /* tulisan handwritten tetap aman */
  .hero-handnote{
    top: 28px !important;
    left: 22px !important;
    right: auto !important;
    z-index: 9 !important;
  }

  .hero-note-arrow{
    top: 58px !important;
    left: 160px !important;
    right: auto !important;
    z-index: 9 !important;
  }

  /* dashboard utuh di dalam shell */
  .macbook-shell .real-dashboard{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    animation: none !important;
    grid-template-columns: 150px minmax(0,1fr) !important;
    border-radius: 22px !important;
  }

  /* BESARKAN dashboard sebagai 1 objek utuh */
  .macbook-shell{
    position: absolute !important;
    left: -6px !important;
    top: 148px !important;

    width: 760px !important;
    height: 455px !important;

    transform:
      perspective(950px)
      rotateY(-12deg)
      rotateZ(-0.35deg)
      scale(.58) !important;

    transform-origin: top left !important;
    animation: none !important;
    z-index: 4 !important;
  }

  /* badge subdomain ikut naik dikit */
  .domain-slide-badge{
    position: absolute !important;
    left: 108px !important;
    top: 405px !important;
    z-index: 8 !important;
  }

  /* phone dibesarkan, tetap utuh, menutup area kanan dashboard */
  .real-phone{
    position: absolute !important;
    right: 6px !important;
    top: 176px !important;

    transform: scale(1.10) !important;
    transform-origin: top right !important;

    z-index: 10 !important;
  }
}

@media (max-width: 390px){

  .hero-visual,
  .hero-showcase,
  .hero-media,
  .hero-stage{
    min-height: 730px !important;
  }

  .hero-handnote{
    top: 24px !important;
    left: 18px !important;
  }

  .hero-note-arrow{
    top: 54px !important;
    left: 148px !important;
  }

  .macbook-shell{
    left: -12px !important;
    top: 150px !important;
    transform:
      perspective(950px)
      rotateY(-12deg)
      rotateZ(-0.35deg)
      scale(.55) !important;
  }

  .domain-slide-badge{
    left: 92px !important;
    top: 395px !important;
  }

  .real-phone{
    right: 2px !important;
    top: 182px !important;
    transform: scale(1.04) !important;
  }
}

@media (max-width: 350px){

  .hero-visual,
  .hero-showcase,
  .hero-media,
  .hero-stage{
    min-height: 700px !important;
  }

  .hero-handnote{
    top: 22px !important;
    left: 14px !important;
  }

  .hero-note-arrow{
    top: 50px !important;
    left: 138px !important;
  }

  .macbook-shell{
    left: -18px !important;
    top: 152px !important;
    transform:
      perspective(950px)
      rotateY(-11.5deg)
      rotateZ(-0.3deg)
      scale(.51) !important;
  }

  .domain-slide-badge{
    left: 84px !important;
    top: 385px !important;
  }

  .real-phone{
    right: 0 !important;
    top: 188px !important;
    transform: scale(.98) !important;
  }
}


/* =========================================================
   MOBILE SHOWCASE POSITION CORRECTION
   - dashboard geser kanan
   - sisi kanan boleh crop
   - phone masuk lagi dan overlap sisi kanan dashboard
   ========================================================= */

@media (max-width:620px){

  /* dashboard: geser ke kanan agar sidebar kiri utuh */
  .macbook-shell{
    left: 28px !important;
    top: 148px !important;
  }

  /* phone: tarik masuk ke viewport + overlap dashboard */
  .real-phone{
    right: 18px !important;
    top: 184px !important;

    width: 205px !important;

    transform: scale(1.06) !important;
    transform-origin: top right !important;

    z-index: 20 !important;
  }

  /* badge jangan nutup KPI */
  .domain-slide-badge{
    left: 130px !important;
    top: 418px !important;
    z-index: 18 !important;
  }

}


/* layar HP lebih sempit */
@media (max-width:390px){

  .macbook-shell{
    left: 22px !important;
  }

  .real-phone{
    right: 12px !important;
    top: 188px !important;

    width: 198px !important;

    transform: scale(1.02) !important;
  }

  .domain-slide-badge{
    left: 116px !important;
    top: 410px !important;
  }

}


/* HP sangat sempit */
@media (max-width:350px){

  .macbook-shell{
    left: 16px !important;
  }

  .real-phone{
    right: 8px !important;
    top: 192px !important;

    width: 190px !important;

    transform: scale(.98) !important;
  }

  .domain-slide-badge{
    left: 104px !important;
    top: 400px !important;
  }

}


/* =========================================================
   MOBILE POSITION FINE TUNE
   - dashboard sedikit ke kiri
   - handwritten + arrow sedikit naik
   - no size changes
   ========================================================= */

@media (max-width:620px){

  .macbook-shell{
    left:18px !important;
  }

  .hero-handnote{
    top:16px !important;
  }

  .hero-note-arrow{
    top:44px !important;
  }

}

@media (max-width:390px){

  .macbook-shell{
    left:12px !important;
  }

  .hero-handnote{
    top:12px !important;
  }

  .hero-note-arrow{
    top:40px !important;
  }

}

@media (max-width:350px){

  .macbook-shell{
    left:6px !important;
  }

  .hero-handnote{
    top:8px !important;
  }

  .hero-note-arrow{
    top:36px !important;
  }

}


/* =========================================================
   MOBILE POSITION FINE TUNE V2
   Only position changes:
   - dashboard visibly left
   - handwritten visibly up
   - arrow follows handwritten
   ========================================================= */

@media (max-width:620px){

  .macbook-shell{
    left:-6px !important;
  }

  .hero-handnote{
    top:-14px !important;
  }

  .hero-note-arrow{
    top:12px !important;
  }

}

@media (max-width:390px){

  .macbook-shell{
    left:-10px !important;
  }

  .hero-handnote{
    top:-18px !important;
  }

  .hero-note-arrow{
    top:8px !important;
  }

}

@media (max-width:350px){

  .macbook-shell{
    left:-12px !important;
  }

  .hero-handnote{
    top:-20px !important;
  }

  .hero-note-arrow{
    top:6px !important;
  }

}


/* =========================================================
   MOBILE POSITION FINE TUNE V3
   - dashboard sedikit ke kanan
   - handwritten naik lagi
   - phone naik dan overlap dashboard lebih besar
   - no size changes
   ========================================================= */

@media (max-width:620px){

  .macbook-shell{
    left: 12px !important;
  }

  .hero-handnote{
    top: -34px !important;
  }

  .hero-note-arrow{
    top: -2px !important;
  }

  .real-phone{
    top: 132px !important;
    right: 6px !important;
  }

}

@media (max-width:390px){

  .macbook-shell{
    left: 10px !important;
  }

  .hero-handnote{
    top: -38px !important;
  }

  .hero-note-arrow{
    top: -6px !important;
  }

  .real-phone{
    top: 128px !important;
    right: 4px !important;
  }

}

@media (max-width:350px){

  .macbook-shell{
    left: 8px !important;
  }

  .hero-handnote{
    top: -42px !important;
  }

  .hero-note-arrow{
    top: -10px !important;
  }

  .real-phone{
    top: 124px !important;
    right: 2px !important;
  }

}


/* =========================================================
   MOBILE HANDWRITTEN UP ONLY
   - handwritten lebih ke atas
   - arrow ikut naik
   - dashboard & phone tidak diubah
   ========================================================= */

@media (max-width:620px){
  .hero-handnote{
    top:-56px !important;
  }

  .hero-note-arrow{
    top:-24px !important;
  }
}

@media (max-width:390px){
  .hero-handnote{
    top:-60px !important;
  }

  .hero-note-arrow{
    top:-28px !important;
  }
}

@media (max-width:350px){
  .hero-handnote{
    top:-64px !important;
  }

  .hero-note-arrow{
    top:-32px !important;
  }
}


/* =========================================================
   MOBILE PHONE SHIFT LEFT ONLY
   - phone geser ke kiri
   - size tetap
   - dashboard tetap
   ========================================================= */

@media (max-width:620px){
  .real-phone{
    right:42px !important;
  }
}

@media (max-width:390px){
  .real-phone{
    right:38px !important;
  }
}

@media (max-width:350px){
  .real-phone{
    right:34px !important;
  }
}


/* =========================================================
   DESKTOP PHONE AUTHORITY
   - phone is now independent from macbook-shell
   - preserve internal phone proportions
   - desktop only
   ========================================================= */

@media (min-width:1101px){

  .real-phone{
    width:230px !important;

    right:18px !important;
    bottom:18px !important;
    top:auto !important;
    left:auto !important;

    transform:scale(.78) !important;
    transform-origin:right bottom !important;

    animation:none !important;

    z-index:20 !important;
  }

}


/* =========================================================
   DESKTOP TILT LIKE REFERENCE
   - dashboard perspective like reference image
   - phone straight
   - phone overlaps right-center table area
   - admin top-right must stay visible
   ========================================================= */

@media (min-width:1101px){

  .hero-v2{
    min-height: calc(100vh - 88px) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: hidden !important;
    align-items: center !important;
  }

  .hero-v2 .hero-copy{
    margin-top: -36px !important;
  }

  .hero-product-showcase{
    min-height: min(560px, calc(100vh - 164px)) !important;
    padding-top: 18px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .macbook-shell{
    top: 92px !important;
    left: 8px !important;
    width: 91% !important;
    height: 430px !important;
    overflow: hidden !important;

    transform:
      perspective(1550px)
      rotateY(-18deg)
      rotateX(1deg)
      rotateZ(-0.55deg) !important;
    transform-origin: left center !important;
    animation: none !important;
  }

  .real-phone{
    width: 230px !important;
    left: auto !important;
    top: auto !important;
    right: 86px !important;
    bottom: 18px !important;

    transform: scale(.68) rotate(0deg) !important;
    transform-origin: right bottom !important;

    animation: none !important;
    z-index: 20 !important;
  }

  .hero-handnote{
    top: -6px !important;
    z-index: 26 !important;
  }

  .hero-note-arrow{
    top: 22px !important;
    z-index: 26 !important;
  }

  .domain-slide-badge{
    left: 94px !important;
    bottom: 14px !important;
    top: auto !important;
    z-index: 22 !important;
  }
}


/* TV / 1366-ish */
@media (min-width:1101px) and (max-width:1500px){

  .hero-v2 .hero-copy{
    margin-top: -28px !important;
  }

  .hero-product-showcase{
    min-height: min(525px, calc(100vh - 148px)) !important;
    padding-top: 20px !important;
  }

  .macbook-shell{
    top: 98px !important;
    left: 0 !important;
    width: 90% !important;
    height: 405px !important;

    transform:
      perspective(1480px)
      rotateY(-17deg)
      rotateX(1deg)
      rotateZ(-0.45deg) !important;
  }

  .real-phone{
    right: 78px !important;
    bottom: 12px !important;
    transform: scale(.65) rotate(0deg) !important;
  }

  .hero-handnote{
    top: 2px !important;
  }

  .hero-note-arrow{
    top: 30px !important;
  }

  .domain-slide-badge{
    bottom: 8px !important;
  }
}


/* Mac / larger desktop */
@media (min-width:1501px){

  .hero-v2 .hero-copy{
    margin-top: -34px !important;
  }

  .hero-product-showcase{
    min-height: min(575px, calc(100vh - 170px)) !important;
    padding-top: 14px !important;
  }

  .macbook-shell{
    top: 88px !important;
    left: 10px !important;
    width: 92% !important;
    height: 442px !important;

    transform:
      perspective(1600px)
      rotateY(-18deg)
      rotateX(1deg)
      rotateZ(-0.55deg) !important;
  }

  .real-phone{
    right: 92px !important;
    bottom: 18px !important;
    transform: scale(.69) rotate(0deg) !important;
  }

  .hero-handnote{
    top: -8px !important;
  }

  .hero-note-arrow{
    top: 20px !important;
  }

  .domain-slide-badge{
    bottom: 14px !important;
  }
}

/* =========================================================
   DESKTOP DASHBOARD PERSPECTIVE CLEAN
   - side perspective only
   - no diving / falling effect
   - phone untouched
   ========================================================= */

@media (min-width:1101px){

  .macbook-shell{
    transform:
      perspective(1500px)
      rotateY(-11deg)
      rotateX(0deg)
      rotateZ(0deg) !important;

    transform-origin: left center !important;
    animation: none !important;
  }

}


/* TV / 1366-ish */
@media (min-width:1101px) and (max-width:1500px){

  .macbook-shell{
    transform:
      perspective(1450px)
      rotateY(-10deg)
      rotateX(0deg)
      rotateZ(0deg) !important;
  }

}


/* Mac / larger desktop */
@media (min-width:1501px){

  .macbook-shell{
    transform:
      perspective(1550px)
      rotateY(-11deg)
      rotateX(0deg)
      rotateZ(0deg) !important;
  }

}

/* =========================================================
   DESKTOP DASHBOARD REFERENCE PERSPECTIVE
   - pure Y perspective
   - right side comes toward viewer
   - no rotateX
   - no rotateZ
   - match supplied reference geometry
   ========================================================= */

@media (min-width:1101px){

  .macbook-shell{
    transform:
      perspective(950px)
      rotateY(-16deg) !important;

    transform-origin: left center !important;
    animation: none !important;
  }

}


/* TV / 1366-ish */
@media (min-width:1101px) and (max-width:1500px){

  .macbook-shell{
    transform:
      perspective(900px)
      rotateY(-15deg) !important;

    transform-origin: left center !important;
  }

}


/* Mac / larger desktop */
@media (min-width:1501px){

  .macbook-shell{
    transform:
      perspective(1000px)
      rotateY(-16deg) !important;

    transform-origin: left center !important;
  }

}

/* =========================================================
   DESKTOP DASHBOARD PERSPECTIVE OVERFLOW FIX
   - keep current perspective
   - allow transformed bottom edge to remain visible
   - desktop only
   ========================================================= */

@media (min-width:1101px){

  .hero-product-showcase{
    overflow: visible !important;
  }

  .macbook-shell{
    overflow: visible !important;
  }

  .macbook-shell .real-dashboard{
    overflow: hidden !important;
  }

}

/* =========================================================
   DESKTOP DASHBOARD RIGHT ROUND FIX
   - make right side as rounded as left side
   - keep current tilt / phone / layout
   ========================================================= */

@media (min-width:1101px){

  .macbook-shell{
    border-radius: 30px !important;
  }

  .macbook-shell .real-dashboard{
    border-radius: 30px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 30px) !important;
  }

}

/* =========================================================
   DESKTOP SHELL FIT SYMMETRIC
   - measured fix from console
   - RIGHT_OVERFLOW ~60px
   - create visible right radius
   - keep current tilt
   ========================================================= */

@media (min-width:1101px){

  .macbook-shell{
    left: 12px !important;
    width: calc(100% - 72px) !important;
  }

}


/* TV / 1366-ish */
@media (min-width:1101px) and (max-width:1500px){

  .macbook-shell{
    left: 12px !important;
    width: calc(100% - 72px) !important;
  }

}


/* Mac / larger desktop */
@media (min-width:1501px){

  .macbook-shell{
    left: 14px !important;
    width: calc(100% - 76px) !important;
  }

}

/* =========================================================
   DESKTOP DASHBOARD MEASURED FIT
   - measured RIGHT_OVERFLOW = 77.2px
   - preserve current perspective
   - expose both left + right rounded corners
   ========================================================= */

@media (min-width:1101px){

  .macbook-shell{
    left: 12px !important;
    width: calc(100% - 145px) !important;
  }

}


/* TV / 1366-ish */
@media (min-width:1101px) and (max-width:1500px){

  .macbook-shell{
    left: 12px !important;
    width: calc(100% - 145px) !important;
  }

}


/* larger desktop */
@media (min-width:1501px){

  .macbook-shell{
    left: 14px !important;
    width: calc(100% - 150px) !important;
  }

}

/* =========================================================
   DESKTOP LEFT COPY DROP FIX
   - move left hero content slightly downward
   - ensure eyebrow badge is fully visible
   - dashboard / phone untouched
   ========================================================= */

@media (min-width:1101px){

  .hero-v2{
    padding-top: 18px !important;
  }

  .hero-v2 .hero-copy{
    margin-top: 18px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .hero-v2 .hero-copy .eyebrow{
    margin-top: 0 !important;
    display: inline-flex !important;
  }

}


/* TV / 1366-ish */
@media (min-width:1101px) and (max-width:1500px){

  .hero-v2{
    padding-top: 20px !important;
  }

  .hero-v2 .hero-copy{
    margin-top: 22px !important;
  }

}


/* Mac / larger desktop */
@media (min-width:1501px){

  .hero-v2{
    padding-top: 16px !important;
  }

  .hero-v2 .hero-copy{
    margin-top: 16px !important;
  }

}

/* =========================================================
   DESKTOP LEFT COPY DROP FIX
   - move left hero content slightly downward
   - ensure eyebrow badge is fully visible
   - dashboard / phone untouched
   ========================================================= */

@media (min-width:1101px){

  .hero-v2{
    padding-top: 18px !important;
  }

  .hero-v2 .hero-copy{
    margin-top: 18px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .hero-v2 .hero-copy .eyebrow{
    margin-top: 0 !important;
    display: inline-flex !important;
  }

}


/* TV / 1366-ish */
@media (min-width:1101px) and (max-width:1500px){

  .hero-v2{
    padding-top: 20px !important;
  }

  .hero-v2 .hero-copy{
    margin-top: 22px !important;
  }

}


/* Mac / larger desktop */
@media (min-width:1501px){

  .hero-v2{
    padding-top: 16px !important;
  }

  .hero-v2 .hero-copy{
    margin-top: 16px !important;
  }

}

/* =========================================================
   SHORT DESKTOP / TV ONE-SCREEN FIT
   - Mac / large desktop stays untouched
   - compress vertical density only on short TV/browser
   - dashboard geometry untouched
   ========================================================= */

@media
  (min-width:1101px)
  and (max-width:1500px)
  and (max-height:820px){

  .hero-v2{
    min-height: calc(100vh - 72px) !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
    overflow: hidden !important;
  }

  .hero-v2 .hero-copy{
    margin-top: 4px !important;
  }

  .hero-v2 .hero-copy .eyebrow{
    margin-bottom: 12px !important;
  }

  .hero-v2 .hero-copy h1{
    font-size: clamp(48px, 4.7vw, 64px) !important;
    line-height: .96 !important;
    margin-bottom: 16px !important;
  }

  .hero-v2 .hero-copy > p{
    font-size: 16px !important;
    line-height: 1.42 !important;
    margin-bottom: 20px !important;
  }

  .hero-mini-features{
    row-gap: 14px !important;
    margin-bottom: 18px !important;
  }

  .hero-actions{
    margin-top: 14px !important;
  }

  .hero-trust{
    margin-top: 12px !important;
  }

}


/* very short TV/browser */
@media
  (min-width:1101px)
  and (max-width:1500px)
  and (max-height:700px){

  .hero-v2{
    padding-top: 2px !important;
  }

  .hero-v2 .hero-copy{
    margin-top: 0 !important;
  }

  .hero-v2 .hero-copy .eyebrow{
    margin-bottom: 9px !important;
  }

  .hero-v2 .hero-copy h1{
    font-size: clamp(44px, 4.35vw, 58px) !important;
    margin-bottom: 12px !important;
  }

  .hero-v2 .hero-copy > p{
    font-size: 15px !important;
    line-height: 1.36 !important;
    margin-bottom: 14px !important;
  }

  .hero-mini-features{
    row-gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .hero-actions{
    margin-top: 10px !important;
  }

  .hero-trust{
    margin-top: 8px !important;
  }

}

/* =========================================================
   SHORT DESKTOP / TV SHOWCASE LIFT
   - move whole right composition as one object
   - preserve dashboard / phone / badge / handwritten geometry
   - expose dashboard bottom perspective
   - Mac untouched
   ========================================================= */

@media
  (min-width:1101px)
  and (max-width:1500px)
  and (max-height:820px){

  .hero-product-showcase{
    transform: translateY(-30px) !important;
    transform-origin: center center !important;
    overflow: visible !important;
  }

}


/* very short TV/browser */
@media
  (min-width:1101px)
  and (max-width:1500px)
  and (max-height:700px){

  .hero-product-showcase{
    transform: translateY(-34px) !important;
  }

}

/* =========================================================
   SHORT DESKTOP / TV CHILD VISUAL LIFT
   - lift dashboard + phone only
   - handwritten stays fixed
   - preserve absolute positioning
   - Mac untouched
   ========================================================= */

@media
  (min-width:1101px)
  and (max-width:1500px)
  and (max-height:820px){

  .macbook-shell{
    translate: 0 -8px !important;
  }

  .real-phone{
    translate: 0 -8px !important;
  }

  .domain-slide-badge{
    translate: 0 -6px !important;
  }

  .hero-handnote,
  .hero-note-arrow{
    translate: none !important;
  }

}


/* very short TV/browser */
@media
  (min-width:1101px)
  and (max-width:1500px)
  and (max-height:700px){

  .macbook-shell{
    translate: 0 -10px !important;
  }

  .real-phone{
    translate: 0 -10px !important;
  }

  .domain-slide-badge{
    translate: 0 -8px !important;
  }

  .hero-handnote,
  .hero-note-arrow{
    translate: none !important;
  }

}

/* =========================================================
   MAC DESKTOP DASHBOARD WIDEN
   - widen right dashboard area on Mac-like desktop
   - reduce empty right space
   - TV untouched
   - mobile untouched
   ========================================================= */

@media
  (min-width:1400px)
  and (max-width:1900px)
  and (min-height:850px){

  .macbook-shell{
    width: 950px !important;
    max-width: 950px !important;
  }

  .real-dashboard{
    width: 100% !important;
    max-width: 100% !important;
  }

}

/* =========================================================
   MAC 1280 SHORT-VIEWPORT DASHBOARD WIDTH AUTHORITY
   - actual detected viewport: 1280 x 402
   - widen dashboard to the right
   - TV 1360 untouched
   - mobile untouched
   ========================================================= */

@media
  (min-width:1200px)
  and (max-width:1320px)
  and (max-height:500px){

  .macbook-shell{
    width:630px !important;
    max-width:630px !important;
  }

  .macbook-shell .real-dashboard{
    width:100% !important;
    max-width:100% !important;
  }

}

/* =========================================================
   MOBILE CROSS-BROWSER AUTHORITY
   - one horizontal system
   - one transform system
   - no mobile float animation drift
   - desktop untouched
   ========================================================= */

@media (max-width:620px){

  .hero-product-showcase{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .real-phone{
    left: auto !important;
    right: 18px !important;

    width: clamp(154px, 43.5vw, 178px) !important;

    top: 46px !important;
    bottom: auto !important;

    z-index: 20 !important;

    animation: none !important;
    transform: rotate(2.5deg) !important;
    transform-origin: center center !important;
    will-change: auto !important;
  }

  /* phone vertical density authority */
  .real-phone .mobile-store{
    min-height: 0 !important;
    padding: 18px 9px 7px !important;
  }

  .real-phone .mobile-header{
    margin-top: 1px !important;
  }

  .real-phone .mobile-logo{
    width: 25px !important;
    height: 25px !important;
  }

  .real-phone .mobile-search{
    margin-top: 8px !important;
    padding: 6px 8px !important;
  }

  .real-phone .mobile-banner.fashion-banner-image{
    margin-top: 7px !important;
  }

  .real-phone .mobile-categories{
    margin-top: 7px !important;
  }

  .real-phone .mobile-categories i{
    width: 21px !important;
    height: 21px !important;
  }

  .real-phone .mobile-section-title{
    margin-top: 8px !important;
  }

  .real-phone .mobile-products{
    margin-top: 4px !important;
  }

  .real-phone .mobile-products .product-visual{
    height: 60px !important;
  }

  .real-phone .mobile-products > div{
    padding-bottom: 4px !important;
  }

  .real-phone .mobile-bottom{
    margin-top: 6px !important;
    padding-top: 4px !important;
  }

}


@media (max-width:390px){

  .real-phone{
    left: auto !important;
    right: 16px !important;

    top: 44px !important;
    bottom: auto !important;

    animation: none !important;
    transform: rotate(2.5deg) !important;
  }

}


@media (max-width:350px){

  .real-phone{
    left: auto !important;
    right: 14px !important;

    top: 42px !important;
    bottom: auto !important;

    animation: none !important;
    transform: rotate(2.5deg) !important;
  }

}

/* =========================================================
   FINAL HERO LEFT-RIGHT BALANCE AUTHORITY
   Target Mac viewport: ~1280 x 402

   LEFT  = equal visual territory
   RIGHT = equal visual territory

   Dashboard shell remains fixed 630px.
   No horizontal showcase translation.
   ========================================================= */

@media
  (min-width:1200px)
  and (max-width:1320px)
  and (max-height:500px){

  /*
     REFERENCE BALANCE
     Target: visual composition seperti reference image.
     Dashboard geometry tetap LOCKED 630px.
  */
  .hero-v2{
    display:grid !important;

    width:calc(100% - 144px) !important;
    max-width:none !important;

    margin-left:auto !important;
    margin-right:auto !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    column-gap:20px !important;
    align-items:center !important;
  }

  .hero-v2 .hero-copy{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .hero-product-showcase{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    justify-self:stretch !important;

    transform:translateY(-34px) !important;
    translate:none !important;

    left:auto !important;
    right:auto !important;

    overflow:visible !important;
  }

  /*
     Dashboard size tidak berubah.
     Hanya kembali ke anchor natural di right track.
  */
  .macbook-shell{
    width:630px !important;
    max-width:630px !important;

    left:12px !important;
    translate:60px -10px !important;

    overflow:visible !important;
  }

  .macbook-shell .real-dashboard{
    width:100% !important;
    max-width:100% !important;
  }

  /*
     Seluruh pasangan visual kanan kembali ke koordinat natural.
     Tidak lagi dipaksa +60px.
  */
  .real-phone{
    translate:60px -10px !important;
  }

  .domain-slide-badge{
    translate:60px -8px !important;
  }

  .hero-handnote{
    translate:60px 0 !important;
  }

  .hero-note-arrow{
    translate:60px 0 !important;
  }


  /* FINAL SECTION BALANCE LOCK */
  .hero-v2 .hero-copy{
    translate:25px 0 !important;
  }

  .hero-product-showcase{
    translate:25px 0 !important;
  }

}

/* =========================================================
   DESKTOP HERO SECTION BALANCE LOCK
   Canonical target: 1280px desktop width
   Independent from viewport height.
   ========================================================= */
@media (min-width:1200px) and (max-width:1320px){

  .hero-v2 .hero-copy{
    translate:25px 0 !important;
  }

  .hero-product-showcase{
    translate:25px 0 !important;
  }

}

/* =========================================================
   TV 32" HERO SECTION BALANCE LOCK
   Canonical target: ~1360px desktop width
   LEFT  = +25px
   RIGHT = +5px

   Mac 1280px authority remains separate.
   ========================================================= */
@media (min-width:1321px) and (max-width:1500px){

  .hero-v2 .hero-copy{
    translate:25px 0 !important;
  }

  .hero-product-showcase{
    translate:5px 0 !important;
  }

}

/* =========================================================
   HERO PHONE SCALE LOCK
   Final visual balance with dashboard.
   ========================================================= */
@media (min-width:1200px) and (max-width:1500px){

  .real-phone{
    scale:1.24 !important;
  }

}

/* ===== MOBILE COMBINED HERO FINAL LOCK BEGIN ===== */

@media (max-width:620px){

  /*
   * FLOW:
   * badge/headline/desc
   * visual dashboard + storefront
   * CTA
   * features
   * trust
   */

  .hero-product-showcase{
    position:relative !important;

    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;

    height:440px !important;
    min-height:440px !important;

    margin:16px auto 18px !important;

    overflow:visible !important;

    transform:none !important;
    translate:none !important;
  }


  /* ======================================================
     DASHBOARD
     Full desktop object, miniaturized as ONE object.
     Do not scale .real-dashboard separately.
     ====================================================== */

  .hero-product-showcase .macbook-shell{
    position:absolute !important;

    left:4px !important;
    top:104px !important;

    width:630px !important;
    max-width:630px !important;
    height:455px !important;

    transform:
      perspective(1200px)
      rotateY(-10deg)
      rotateZ(-0.2deg)
      scale(.50) !important;

    transform-origin:top left !important;

    animation:none !important;
    z-index:2 !important;

    overflow:visible !important;
  }

  .hero-product-showcase .macbook-shell .real-dashboard{
    width:100% !important;
    max-width:100% !important;

    transform:none !important;
    filter:none !important;
  }


  /* ======================================================
     STOREFRONT PHONE
     Wide native body, then scale whole object.
     Internal layout remains proportional.
     ====================================================== */

  .hero-product-showcase .real-phone{
    position:absolute !important;

    left:auto !important;
    right:-2px !important;

    top:100px !important;
    bottom:auto !important;

    width:240px !important;
    max-width:240px !important;

    padding:9px !important;

    border:3px solid #171a20 !important;
    border-radius:32px !important;

    scale:.72 !important;
    transform:none !important;
    transform-origin:top right !important;

    animation:none !important;

    z-index:8 !important;
  }

  .hero-product-showcase .real-phone .mobile-store{
    width:100% !important;
    max-width:100% !important;

    min-height:0 !important;

    transform:none !important;
  }

  .hero-product-showcase .phone-island{
    left:50% !important;
    transform:translateX(-50%) !important;
  }


  /* ======================================================
     HANDWRITTEN
     ====================================================== */

  .hero-product-showcase .hero-handnote{
    display:block !important;

    position:absolute !important;
    left:12px !important;
    right:auto !important;

    top:12px !important;
    bottom:auto !important;

    width:230px !important;

    font-size:15px !important;
    line-height:1.28 !important;
    font-weight:700 !important;

    translate:none !important;

    z-index:10 !important;
  }

  .hero-product-showcase .hero-note-arrow{
    display:block !important;

    position:absolute !important;
    left:98px !important;
    right:auto !important;

    top:38px !important;
    bottom:auto !important;

    width:70px !important;

    translate:none !important;

    z-index:10 !important;
  }


  /* ======================================================
     SUBDOMAIN
     Text only. Position is calculated by JS against the
     rendered dashboard so it stays inside the dashboard.
     ====================================================== */

  .hero-product-showcase .domain-slide-badge{
    position:absolute !important;

    right:auto !important;
    bottom:auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:230px !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    background-image:none !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    transform:none !important;
    translate:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;

    z-index:5 !important;
  }

  .hero-product-showcase .domain-slide-badge > :first-child{
    margin:0 !important;

    font-size:8px !important;
    line-height:1.15 !important;
    font-weight:500 !important;

    color:#8d96a8 !important;
  }

  .hero-product-showcase .domain-slide-badge > :last-child{
    margin:0 !important;

    font-size:10px !important;
    line-height:1.15 !important;
    font-weight:600 !important;

    color:#303746 !important;
  }


  /* ======================================================
     CTA directly below visual
     ====================================================== */

  .hero-v2 .hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;

    position:relative !important;

    margin-top:18px !important;

    z-index:10 !important;
  }


  /* ======================================================
     FEATURES after CTA
     ====================================================== */

  .hero-v2 .hero-mini-features{
    margin-top:22px !important;
  }

}

/* ===== MOBILE COMBINED HERO FINAL LOCK END ===== */

/* ===== DESKTOP HANDNOTE ARROW LOCK BEGIN ===== */
@media (min-width:621px){
  .hero-note-arrow{
    left:110px !important;
    top:20px !important;
  }
}
/* ===== DESKTOP HANDNOTE ARROW LOCK END ===== */

/* ===== CTA CENTER LOCK BEGIN ===== */

.hero-actions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin-top:28px !important;
}

.hero-actions .btn{
  margin-left:auto !important;
  margin-right:auto !important;
}

.trust-row{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:28px !important;
  flex-wrap:wrap !important;
  width:100% !important;
  margin-top:16px !important;
  text-align:center !important;
}

.trust-row span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

.hero-copy .hero-actions,
.hero-copy .trust-row{
  align-self:center !important;
}

@media(max-width:768px){
  .hero-actions{
    margin-top:22px !important;
  }

  .trust-row{
    gap:12px 20px !important;
    margin-top:14px !important;
  }
}

/* ===== CTA CENTER LOCK END ===== */

/* ===== MOBILE CTA CENTER LOCK BEGIN ===== */

@media(max-width:620px){

  .hero-v2 .hero-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .hero-v2 .hero-actions .btn{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-v2 .trust-row{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    gap:10px 16px !important;
    flex-wrap:wrap !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .hero-v2 .trust-row span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }

}

/* ===== MOBILE CTA CENTER LOCK END ===== */

/* ===== PUBLIC TRIAL REGISTER UI BEGIN ===== */

.trial-register-section{
  padding:110px 0;
  text-align:left;
}

.trial-register-layout{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(420px,.72fr);
  align-items:center;
  gap:80px;
}

.trial-register-copy h2{
  max-width:650px;
  margin:18px 0 0;
  font-size:clamp(42px,5vw,64px);
  line-height:1;
  letter-spacing:-.055em;
}

.trial-register-desc{
  max-width:580px;
  margin:22px 0 0 !important;
  color:#e8e6ff !important;
  font-size:16px;
  line-height:1.7;
}

.trial-benefits{
  display:grid;
  gap:16px;
  margin-top:34px;
}

.trial-benefits > div{
  display:grid;
  grid-template-columns:30px 1fr;
  column-gap:10px;
  align-items:start;
}

.trial-benefits > div > span{
  grid-row:1 / span 2;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  font-size:12px;
  font-weight:800;
}

.trial-benefits strong{
  font-size:14px;
  font-weight:600;
}

.trial-benefits small{
  margin-top:4px;
  color:#d8d5ff;
  font-size:12px;
  line-height:1.5;
}

.trial-register-card{
  padding:28px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:26px;
  background:#fff;
  color:#1b1d27;
  box-shadow:0 30px 80px rgba(29,24,94,.23);
}

.trial-form-head{
  margin-bottom:22px;
}

.trial-form-head strong{
  display:block;
  font-size:21px;
  font-weight:650;
  letter-spacing:-.025em;
}

.trial-form-head span{
  display:block;
  margin-top:6px;
  color:#89909e;
  font-size:12px;
}

.trial-field{
  margin-bottom:15px;
}

.trial-field label{
  display:block;
  margin-bottom:7px;
  color:#434957;
  font-size:12px;
  font-weight:500;
}

.trial-field input{
  width:100%;
  height:46px;
  padding:0 13px;
  border:1px solid #dfe3ea;
  border-radius:11px;
  background:#fff;
  color:#20232d;
  outline:none;
  font:inherit;
  font-size:13px;
  transition:border-color .16s ease, box-shadow .16s ease;
}

.trial-field input:focus{
  border-color:#6c63ff;
  box-shadow:0 0 0 4px rgba(108,99,255,.09);
}

.trial-slug-wrap{
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid #dfe3ea;
  border-radius:11px;
  background:#fff;
}

.trial-slug-wrap:focus-within{
  border-color:#6c63ff;
  box-shadow:0 0 0 4px rgba(108,99,255,.09);
}

.trial-slug-wrap input{
  min-width:0;
  border:0;
  border-radius:0;
  box-shadow:none !important;
}

.trial-slug-wrap span{
  padding-right:13px;
  color:#9097a5;
  font-size:11px;
  white-space:nowrap;
}

.trial-domain-preview{
  display:block;
  margin-top:7px;
  color:#7a8190;
  font-size:11px;
  overflow-wrap:anywhere;
}

.trial-submit{
  width:100%;
  min-height:49px;
  margin-top:5px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#6258f2,#7a70ff);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:600;
  box-shadow:0 12px 28px rgba(95,85,238,.24);
  cursor:pointer;
}

.trial-submit:disabled{
  opacity:.58;
  cursor:wait;
}

.trial-message{
  min-height:18px;
  margin-top:11px;
  text-align:center;
  font-size:12px;
}

.trial-message.error{
  color:#d64e5d;
}

.trial-message.success{
  color:#16845e;
}

.trial-form-note{
  margin-top:3px;
  text-align:center;
  color:#9aa0ac;
  font-size:10px;
}

.trial-success{
  padding:24px 6px;
  text-align:center;
}

.trial-success[hidden]{
  display:none !important;
}

.trial-success-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:999px;
  background:#eaf9f3;
  color:#159266;
  font-size:24px;
  font-weight:800;
}

.trial-success-eyebrow{
  display:block;
  color:#159266;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.trial-success h3{
  margin:9px 0 8px;
  font-size:26px;
  letter-spacing:-.035em;
}

.trial-success-domain{
  display:inline-block;
  color:#5f55ee;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  overflow-wrap:anywhere;
}

.trial-success p{
  margin:17px 0 0 !important;
  color:#687080 !important;
  font-size:12px;
}

.trial-success-info{
  margin-top:22px;
  padding:14px;
  border-radius:12px;
  background:#f6f7fa;
  color:#6e7583;
  font-size:11px;
  line-height:1.6;
}

@media(max-width:900px){
  .trial-register-layout{
    grid-template-columns:1fr;
    gap:45px;
  }

  .trial-register-copy{
    text-align:center;
  }

  .trial-register-copy h2,
  .trial-register-desc{
    margin-left:auto;
    margin-right:auto;
  }

  .trial-benefits{
    width:min(440px,100%);
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }

  .trial-register-card{
    width:min(560px,100%);
    margin:0 auto;
  }
}

@media(max-width:620px){
  .trial-register-section{
    padding:72px 0;
  }

  .trial-register-copy h2{
    font-size:40px;
  }

  .trial-register-card{
    padding:22px 17px;
    border-radius:20px;
  }

  .trial-slug-wrap span{
    font-size:10px;
  }
}

/* ===== PUBLIC TRIAL REGISTER UI END ===== */








/* ===== TRIAL DESKTOP VERTICAL POSITION FINAL BEGIN ===== */

@media (min-width: 901px){
  .trial-register-layout{
    align-items:start !important;
  }

  .trial-register-copy{
    align-self:start !important;
    margin-top:0 !important;
    transform:none !important;
  }
}

/* ===== TRIAL DESKTOP VERTICAL POSITION FINAL END ===== */

/* ===== TRIAL CLICK REVEAL BEGIN ===== */

.trial-section-hidden{
  display:none !important;
}

.trial-register-section.trial-section-visible{
  display:block !important;
}

/* ===== TRIAL CLICK REVEAL END ===== */

/* ===== TRIAL FORM COMPACT FINAL BEGIN ===== */

@media (min-width: 901px){

  .trial-register-card{
    padding:24px 26px !important;
  }

  .trial-form-head{
    margin-bottom:18px !important;
  }

  .trial-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 14px;
  }

  .trial-field{
    margin-bottom:0 !important;
  }

  .trial-field-full{
    grid-column:1 / -1;
  }

  .trial-field label{
    margin-bottom:6px !important;
  }

  .trial-field input{
    height:44px !important;
  }

  .trial-submit{
    min-height:46px !important;
    margin-top:14px !important;
  }

  .trial-message{
    min-height:16px !important;
    margin-top:8px !important;
  }

  .trial-form-note{
    margin-top:2px !important;
  }

  .trial-register-section{
    padding-top:72px !important;
    padding-bottom:72px !important;
  }

}

@media (max-width: 900px){

  .trial-form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }

  .trial-field{
    margin-bottom:15px;
  }

}

/* ===== TRIAL FORM COMPACT FINAL END ===== */