/*
 * Laman pemasaran PIXYOSTUDIO (ikut handoff Claude Design).
 * CSS berasingan daripada Tailwind supaya token & reka bentuk laman ini tidak bercampur dengan aplikasi.
 * Tema gelap lalai; tema cerah melalui html[data-mkt-theme=light] (public/js/marketing.js).
 */
:root {
    --m-brand: #FACC15;
    --m-on-brand: #1D1513;
    --m-on-brand-muted: #4A3B22;
    --m-brand-line: rgba(29, 21, 19, .24);
    --m-brand-deep: color-mix(in oklch, #FACC15 80%, black);
    --m-accent: #FACC15;
    --m-bg: #14100F;
    --m-surface: #201917;
    --m-surface-2: #2A221F;
    --m-text: #F3EEEC;
    --m-muted: #ADA29E;
    --m-divider: rgba(243, 238, 236, .14);
    --m-shadow: 0 0 0 1px #3A302C, 0 16px 40px rgba(0, 0, 0, .55);
    --m-pad-x: clamp(20px, 4vw, 48px);
    --m-font: Inter, system-ui, sans-serif;
}
html[data-mkt-theme=light] {
    --m-accent: color-mix(in oklch, #FACC15 55%, black);
    --m-bg: #F8F4F2;
    --m-surface: #FFFFFF;
    --m-surface-2: #F0E8E5;
    --m-text: #1D1513;
    --m-muted: #6B5F5B;
    --m-divider: rgba(29, 21, 19, .13);
    --m-shadow: 0 0 0 1px #E4DAD6, 0 16px 40px rgba(60, 20, 10, .12);
}
html.mkt { scroll-behavior: smooth; color-scheme: dark; }
html.mkt[data-mkt-theme=light] { color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html.mkt { scroll-behavior: auto; } }

body.mkt-body { margin: 0; background: var(--m-bg); color: var(--m-text); font: 400 15px/1.55 var(--m-font); -webkit-font-smoothing: antialiased; }
.mkt-body * { box-sizing: border-box; }
.mkt-body a { color: var(--m-accent); text-decoration: none; transition: color .15s, background-color .15s, opacity .15s; }
.mkt-body a:hover { color: var(--m-text); }
.mkt-body :focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.mkt-body h1, .mkt-body h2 { margin: 0; font-family: var(--m-font); font-weight: 500; }
.mkt-body p { margin: 0; }
.mkt-page { background: var(--m-bg); color: var(--m-text); overflow: hidden; }
.m-wrap { max-width: 1240px; margin: 0 auto; }
.m-muted { color: var(--m-muted); }
.m-accent { color: var(--m-accent); }

/* Butang */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 14px 26px; border-radius: 999px; font-weight: 500; font-size: 15px; cursor: pointer; }
.mkt-body .m-btn-solid { background: var(--m-on-brand); color: var(--m-brand); }
.mkt-body .m-btn-solid:hover { color: var(--m-brand); opacity: .88; }
.mkt-body .m-btn-line { border: 1px solid var(--m-brand-line); color: var(--m-on-brand); }
.mkt-body .m-btn-line:hover { color: var(--m-on-brand); background: rgba(29, 21, 19, .1); }

/* Band jenama (hero, statistik, CTA) */
.m-band { background: var(--m-brand); color: var(--m-on-brand); }
.m-band .m-sub { color: var(--m-on-brand-muted); }

/* Hero */
.m-hero { padding: 0 var(--m-pad-x); }
.m-head { display: flex; align-items: center; gap: 24px; padding: 18px 0; }
/* Logo lutsinar: hitam (garis kuning) di atas band kuning; kaki ikut tema */
.m-logo { display: block; flex: none; line-height: 0; }
.m-logo img { display: block; width: 150px; height: 50px; }
.m-logo-sm img { width: 120px; height: auto; }
/* Kaki: logo kuning (garis hitam) dalam tema gelap, logo hitam dalam tema cerah */
.m-logo-sm .m-logo-light { display: none; }
html[data-mkt-theme=light] .m-logo-sm .m-logo-dark { display: none; }
html[data-mkt-theme=light] .m-logo-sm .m-logo-light { display: block; }
.m-nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.mkt-body .m-nav a { color: var(--m-on-brand-muted); }
.mkt-body .m-nav a:hover { color: var(--m-on-brand); }
.m-head-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.mkt-body .m-login { color: var(--m-on-brand); font-size: 14px; padding: 8px 12px; }
.mkt-body .m-login:hover { color: var(--m-on-brand); text-decoration: underline; }
.mkt-body .m-signup { color: var(--m-on-brand); font: 500 14px var(--m-font); padding: 9px 18px; border: 1px solid var(--m-on-brand); border-radius: 999px; white-space: nowrap; }
.mkt-body .m-signup:hover { color: var(--m-on-brand); background: rgba(29, 21, 19, .12); }
.m-theme-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--m-brand-line); background: transparent; color: var(--m-on-brand); cursor: pointer; font-size: 17px; }
.m-theme-btn:hover { background: rgba(29, 21, 19, .12); }
.m-theme-btn .ph-sun { display: none; }
html[data-mkt-theme=light] .m-theme-btn .ph-sun { display: inline; }
html[data-mkt-theme=light] .m-theme-btn .ph-moon { display: none; }

/* Baris 1 "Picks Your Studio" sentiasa sebaris (saiz ikut lebar lajur); baris 2 "at" + logo */
/* Tajuk hero (Poppins Bold): baris 1 sentiasa sebaris (saiz ikut lebar skrin), baris 2 nama BeresJer lebih tebal & besar */
.m-h1 { font-family: Poppins, var(--m-font) !important; font-weight: 700 !important; font-size: min(clamp(30px, 5.2vw, 68px), calc((100vw - 56px) / 16)) !important; line-height: 1.05; letter-spacing: -.025em; }
.m-h1-line { display: block; white-space: nowrap; }
.m-h1-brand { display: block; margin-top: .08em; font-family: Poppins, var(--m-font); font-weight: 700; font-size: 1.45em; line-height: 1.05; letter-spacing: -.02em; }
/* Susunan hero di tengah */
.m-hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: clamp(40px, 7vw, 88px) 0 clamp(40px, 5vw, 64px); }
.m-hero-center .m-lead { max-width: 720px; }
.m-lead strong { font-weight: 600; color: var(--m-on-brand); }
.m-lead .m-em { font-style: italic; font-weight: 700; }
.m-lead .m-strong { font-weight: 700; }
.m-hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--m-brand-line); background: rgba(29, 21, 19, .06); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-on-brand); }
.m-hero-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-on-brand); }
.m-row-center { justify-content: center; }
.m-lead { font-size: 18px; line-height: 1.55; color: var(--m-on-brand-muted); text-wrap: pretty; }
.m-row { display: flex; gap: 10px; flex-wrap: wrap; }
.m-note { font-size: 13px; color: var(--m-on-brand-muted); }

/* Mockup papan pemuka */
.m-dash-wrap { position: relative; margin-bottom: -120px; }
.m-dash { position: relative; isolation: isolate; background: var(--m-surface); color: var(--m-text); border-radius: 14px 14px 0 0; box-shadow: var(--m-shadow); overflow: hidden; }
/* Bingkai berkilat: cahaya bergerak mengelilingi tepi mockup */
@property --m-shine { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes m-shine-spin { to { --m-shine: 360deg; } }
.m-dash::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--m-shine), transparent 0deg, transparent 250deg, rgba(250, 204, 21, .55) 290deg, #FFFFFF 322deg, #FACC15 338deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: m-shine-spin 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .m-dash::before { animation: none; } }
.m-browser { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--m-divider); }
.m-browser span { width: 9px; height: 9px; border-radius: 50%; background: var(--m-divider); }
.m-browser div { margin-left: 12px; font-size: 12px; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-dash-body { display: flex; }
.m-side { flex: 0 0 190px; padding: 16px 10px; border-right: 1px solid var(--m-divider); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.m-side div { display: flex; align-items: center; gap: 9px; padding: 8px 10px; color: var(--m-muted); border-radius: 8px; }
.m-side .is-on { background: var(--m-surface-2); color: var(--m-text); box-shadow: inset 2px 0 0 var(--m-accent); }
.m-main { flex: 1; min-width: 0; padding: 20px clamp(14px, 2vw, 24px) 150px; display: flex; flex-direction: column; gap: 18px; }
.m-main-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.m-tiny-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); }
.m-today { font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
.m-kpis { display: flex; gap: 24px; }
.m-kpis small { display: block; font-size: 11px; color: var(--m-muted); }
.m-kpis b { font-size: 20px; font-weight: 500; }
.m-sched { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12.5px; }
.m-sched .m-colhead { font-size: 11px; letter-spacing: .08em; color: var(--m-muted); }
.m-sched .m-time { font-size: 11px; color: var(--m-muted); padding-top: 10px; }
.m-cell { padding: 10px 12px; border-radius: 8px; background: var(--m-surface-2); }
.m-cell b { display: block; font-weight: 500; }
.m-cell span { color: var(--m-muted); }
.m-cell.is-brand { background: var(--m-brand); color: var(--m-on-brand); }
.m-cell.is-brand span { color: var(--m-on-brand-muted); }
.m-cell.is-empty { background: none; border: 1px dashed var(--m-divider); color: var(--m-muted); }
.m-sched-list { display: none; flex-direction: column; gap: 8px; font-size: 13px; }
.m-sched-list .m-cell { display: flex; gap: 12px; align-items: center; padding: 12px; }
.m-sched-list .m-cell > span:first-child { font-size: 12px; width: 40px; flex: none; }
.m-float { z-index: 4; position: absolute; right: -12px; bottom: 20px; width: 260px; background: var(--m-surface-2); color: var(--m-text); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--m-shadow); }
.m-float-left { right: auto; left: max(-48px, calc(8px - var(--m-pad-x))); bottom: auto; top: 110px; width: 228px; z-index: 4; }
.m-float-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--m-muted); }
.m-float-top span:first-child { display: flex; gap: 6px; align-items: center; }
.m-float-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--m-muted); }
.m-pill { padding: 3px 9px; border-radius: 6px; background: var(--m-brand); color: var(--m-on-brand); white-space: nowrap; }
.m-spacer { height: 120px; }

/* Seksyen umum */
.m-section { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--m-pad-x); display: flex; flex-direction: column; gap: 40px; }
.m-section.is-sm { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); gap: 36px; }
.m-sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.m-eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); }
.m-h2 { font-size: clamp(30px, 4vw, 46px) !important; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }

/* Masalah owner studio (kad 01–04) */
.m-pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.m-pain { position: relative; overflow: hidden; padding: 24px 24px 30px; border-radius: 18px; border: 1px solid var(--m-divider); display: flex; flex-direction: column; gap: 12px;
    background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklch, var(--m-text) 3%, transparent) 14px 15px), var(--m-surface); transition: border-color .3s, transform .3s; }
.m-pain::after { content: ""; position: absolute; left: 24px; bottom: 0; width: 72px; height: 3px; border-radius: 3px 3px 0 0; background: var(--m-brand); transition: width .35s ease; }
.m-pain:hover { border-color: color-mix(in oklch, var(--m-accent) 45%, transparent); transform: translateY(-3px); }
.m-pain:hover::after { width: calc(100% - 48px); }
.m-pain-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.m-pain-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: var(--m-accent); background: color-mix(in oklch, var(--m-brand) 12%, transparent); border: 1px solid color-mix(in oklch, var(--m-brand) 30%, transparent); }
.m-pain-no { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--m-muted); opacity: .6; }
.m-pain-title { margin: 0; font: 600 18px/1.35 var(--m-font); letter-spacing: -.01em; }
.m-brandword { font-family: Poppins, var(--m-font); font-weight: 700; color: var(--m-text); }
.m-pain-body { font-size: 14px; line-height: 1.55; color: var(--m-muted); }
html.mkt-js .m-pain[data-reveal].is-in { transition: opacity .7s ease, filter .7s ease, transform .3s ease, border-color .3s; }

/* Suis Pelanggan / Pemilik Studio */
.m-aud-wrap { gap: 28px; }
.m-aud-switch-wrap { display: flex; justify-content: center; }
.m-aud-switch { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--m-surface); border: 1px solid var(--m-divider); }
.m-aud-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1.5px solid transparent; background: transparent; color: var(--m-muted); font: 600 15px var(--m-font); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.m-aud-btn i { font-size: 17px; }
.m-aud-btn:hover { color: var(--m-text); }
.m-aud-btn.is-on { color: var(--m-text); background: var(--m-surface-2); border-color: var(--m-brand); box-shadow: 0 0 0 4px color-mix(in oklch, var(--m-brand) 12%, transparent); }
.m-aud-btn.is-on i { color: var(--m-accent); }
.m-aud-panel.m-hide { display: none; }
/* Panel kelebihan (Untuk Pelanggan / Untuk Pemilik Studio) */
.m-benefit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: center; gap: clamp(32px, 5vw, 72px); padding: clamp(28px, 5vw, 64px); border-radius: 24px;
    background: radial-gradient(70% 90% at 0% 30%, color-mix(in oklch, var(--m-brand) 14%, transparent), transparent 70%), radial-gradient(50% 60% at 100% 100%, color-mix(in oklch, var(--m-brand) 6%, transparent), transparent 70%), var(--m-surface); }
.m-benefit-copy { display: flex; flex-direction: column; gap: 16px; max-width: 540px; }
.m-benefit-title { margin: 4px 0 0; font: 700 clamp(32px, 4vw, 48px)/1.1 Poppins, var(--m-font); letter-spacing: -.02em; }
.m-benefit-body { font-size: 17px; line-height: 1.6; color: var(--m-muted); }
.m-benefit-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.m-benefit-list li { display: flex; gap: 14px; align-items: flex-start; }
.m-benefit-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--m-accent); background: color-mix(in oklch, var(--m-brand) 14%, transparent); }
.m-benefit-list b { display: block; font-weight: 600; font-size: 16px; margin-bottom: 3px; }
.m-benefit-list span { font-size: 14px; line-height: 1.55; color: var(--m-muted); }
.m-benefit-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.m-phone-lg { width: 290px; }
.m-confirm { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border-radius: 16px; text-align: center; background: color-mix(in oklch, var(--m-brand) 10%, var(--m-surface)); border: 1px solid color-mix(in oklch, var(--m-brand) 25%, transparent); }
.m-confirm-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--m-brand); color: var(--m-on-brand); font-size: 26px; margin-bottom: 6px; }
.m-confirm b { font-size: 16px; font-weight: 600; }
.m-confirm span { font-size: 12.5px; color: var(--m-muted); }
.m-confirm-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--m-surface-2); font-size: 12.5px; }
.m-confirm-row i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--m-surface); color: var(--m-muted); font-size: 16px; }
.m-confirm-row.is-hl i { background: color-mix(in oklch, var(--m-brand) 18%, transparent); color: var(--m-accent); }
.m-shoot { display: flex; flex-direction: column; gap: 8px; }
.m-shoot > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 10px; padding: 12px; border-radius: 12px; background: var(--m-surface-2); font-size: 12.5px; }
.m-shoot span { color: var(--m-muted); font-size: 12px; padding-top: 1px; }
.m-shoot b { display: block; font-weight: 600; }
.m-shoot small { color: var(--m-muted); font-size: 11.5px; }
.m-shoot em { grid-column: 2; justify-self: start; font-style: normal; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--m-divider); color: var(--m-muted); }
.m-shoot .is-done em { border: 0; background: color-mix(in oklch, #22C55E 20%, transparent); color: #4ADE80; }
.m-shoot .is-now { box-shadow: inset 3px 0 0 var(--m-accent); }
.m-shoot .is-now em { border: 0; background: var(--m-brand); color: var(--m-on-brand); }
.m-studio-mock { width: min(100%, 400px); background: var(--m-bg); box-shadow: var(--m-shadow); }

/* Cara guna & Paparan sistem: tajuk tengah + tab bersegmen */
.m-sec-head.is-center { align-items: center; text-align: center; margin: 0 auto; max-width: 760px; }
.m-sec-sub { font-size: 17px; max-width: 560px; }
.m-seg-wrap { display: flex; justify-content: center; }
.m-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; max-width: 100%; border-radius: 999px; background: var(--m-surface); border: 1px solid var(--m-divider); }
.m-seg .m-tab { border-color: transparent; background: transparent; }
.m-seg .m-tab.is-on { background: var(--m-surface-2); border-color: transparent; color: var(--m-text); }
.m-seg .m-tab.is-on > i { color: var(--m-accent); }
.m-tab-stage.is-glow { background: radial-gradient(60% 90% at 0% 40%, color-mix(in oklch, var(--m-brand) 13%, transparent), transparent 70%), radial-gradient(50% 70% at 100% 100%, color-mix(in oklch, var(--m-brand) 8%, transparent), transparent 70%), var(--m-surface); }
.m-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklch, var(--m-brand) 16%, transparent); border: 1px solid color-mix(in oklch, var(--m-brand) 35%, transparent); color: var(--m-accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.m-pkg { display: flex; flex-direction: column; gap: 12px; }
.m-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-pkg-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--m-divider); }
.m-pkg-row small { font-size: 11px; color: var(--m-muted); }
.m-pkg-row b { font-weight: 500; }
.m-pkg-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.m-pkg-tags span { padding: 4px 10px; border-radius: 999px; background: color-mix(in oklch, var(--m-brand) 14%, transparent); color: var(--m-accent); font-size: 12px; }
.m-ig { display: flex; align-items: center; gap: 12px; }
.m-ig-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--m-brand); color: var(--m-on-brand); font-size: 22px; flex: none; }
.m-ig-meta b { display: block; font-weight: 600; }
.m-ig-meta span { font-size: 12px; color: var(--m-muted); }
.m-ig-bio { display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.m-ig-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklch, var(--m-brand) 16%, transparent); color: var(--m-accent); font-size: 12px; font-weight: 500; }
.m-status { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--m-divider); }
.m-day-list { display: flex; flex-direction: column; gap: 6px; }
.m-day-list div { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--m-surface-2); }
.m-day-list span { font-size: 12px; color: var(--m-muted); }
.m-day-list b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-day-list em { font-style: normal; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--m-divider); color: var(--m-muted); white-space: nowrap; }
.m-day-list em.is-ok { border: 0; background: var(--m-brand); color: var(--m-on-brand); }
.m-day-list .is-empty { background: none; border: 1px dashed var(--m-divider); }
.m-day-list .is-empty b { color: var(--m-muted); font-weight: 400; }

/* Ciri-ciri: blok berselang kiri/kanan */
.m-feat-list { display: flex; flex-direction: column; gap: 20px; }
.m-feat { display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); padding: clamp(22px, 3.5vw, 40px); border-radius: 22px; background: var(--m-surface); border: 1px solid var(--m-divider); transition: border-color .3s; }
.m-feat:hover { border-color: color-mix(in oklch, var(--m-accent) 45%, transparent); }
.m-feat.is-rev { flex-direction: row-reverse; }
.m-feat-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.m-feat-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in oklch, var(--m-brand) 16%, transparent); border: 1px solid color-mix(in oklch, var(--m-brand) 35%, transparent); color: var(--m-accent); font-size: 24px; }
.m-feat-title { margin: 6px 0 0; font: 500 clamp(26px, 3.2vw, 38px)/1.1 var(--m-font); letter-spacing: -.025em; }
.m-feat-copy > p { font-size: 16px; line-height: 1.65; max-width: 520px; }
.m-feat-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.m-feat-points li { display: flex; align-items: center; gap: 10px; }
.m-feat-points i { color: var(--m-accent); font-size: 18px; flex: none; }
.m-feat-visual { flex: 1 1 0; min-width: 0; }
.m-feat-stage { position: relative; min-height: 340px; border-radius: 20px; padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px); display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(120% 90% at 85% 10%, color-mix(in oklch, var(--m-brand) 70%, white) 0%, var(--m-brand) 45%, color-mix(in oklch, var(--m-brand) 82%, black) 100%); }
.m-mock { width: min(100%, 380px); padding: 18px; border-radius: 16px; background: var(--m-surface); color: var(--m-text); box-shadow: 0 24px 50px rgba(29, 21, 19, .35); display: flex; flex-direction: column; gap: 14px; font-size: 13px; transition: transform .4s ease; }
.m-feat:hover .m-mock { transform: translateY(-4px); }
.m-mock-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.m-mock-head b { font-weight: 500; font-size: 14px; }
.m-mock-head span { font-size: 11px; letter-spacing: .06em; color: var(--m-muted); text-transform: uppercase; }
.m-mock-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--m-muted); }
.m-mock-note i { color: var(--m-accent); font-size: 15px; }
.m-mock-note b { color: var(--m-text); font-weight: 600; }
.m-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.m-slot-grid div { padding: 10px 0; border-radius: 8px; border: 1px solid var(--m-divider); display: flex; align-items: center; justify-content: center; gap: 5px; }
.m-slot-grid .is-taken { color: var(--m-muted); text-decoration: line-through; }
.m-slot-grid .is-lock { border-color: var(--m-accent); color: var(--m-accent); background: color-mix(in oklch, var(--m-brand) 12%, transparent); }
.m-pay-amount { font: 500 32px/1 var(--m-font); letter-spacing: -.02em; display: flex; flex-direction: column; gap: 6px; }
.m-pay-amount small { font-size: 12px; letter-spacing: 0; color: var(--m-muted); font-weight: 400; }
.m-pay-methods { display: flex; gap: 6px; flex-wrap: wrap; }
.m-pay-methods span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--m-divider); font-size: 12px; }
.m-status-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--m-muted); }
.m-status-flow .is-ok { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--m-brand); color: var(--m-on-brand); font-weight: 500; }
.m-template { padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--m-surface-2); line-height: 1.6; }
.m-template mark { background: color-mix(in oklch, var(--m-brand) 25%, transparent); color: var(--m-accent); border-radius: 4px; padding: 0 4px; }
.m-wa-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--m-brand); color: var(--m-on-brand); font-weight: 500; }
.m-loc-tabs { display: flex; gap: 6px; }
.m-loc-tabs span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--m-divider); font-size: 12px; color: var(--m-muted); }
.m-loc-tabs .is-on { border-color: var(--m-accent); color: var(--m-accent); }
.m-week { display: flex; flex-direction: column; gap: 6px; }
.m-week div { display: grid; grid-template-columns: 52px repeat(4, 1fr); gap: 6px; align-items: center; }
.m-week small { font-size: 11px; color: var(--m-muted); }
.m-week i { height: 26px; border-radius: 6px; border: 1px dashed var(--m-divider); }
.m-week i.is-b { border: 0; background: var(--m-surface-2); box-shadow: inset 3px 0 0 var(--m-accent); }
.m-move { display: flex; align-items: center; gap: 10px; }
.m-move > i { color: var(--m-accent); font-size: 18px; flex: none; }
.m-move-slot { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--m-divider); display: flex; flex-direction: column; gap: 3px; }
.m-move-slot small { font-size: 11px; color: var(--m-muted); }
.m-move-slot b { font-weight: 500; }
.m-move-slot.is-old b { color: var(--m-muted); text-decoration: line-through; }
.m-move-slot.is-new { border-color: var(--m-accent); background: color-mix(in oklch, var(--m-brand) 12%, transparent); }
.m-kpi-row { display: flex; gap: 24px; }
.m-kpi-row small { display: block; font-size: 11px; color: var(--m-muted); }
.m-kpi-row b { font-size: 20px; font-weight: 500; }
.m-bars { height: 110px; display: flex; align-items: flex-end; gap: 8px; }
.m-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, color-mix(in oklch, var(--m-brand) 45%, transparent), var(--m-brand)); }
.m-chip.m-chip-dark { background: var(--m-on-brand); color: var(--m-brand); }
.m-chip-tr { right: 6%; top: 9%; }
.m-chip-bl { left: 6%; bottom: 9%; }
.m-chip-bl.m-chip-low { left: auto; right: 4%; bottom: 3%; }

/* Muncul bila diskrol (hanya bila JS aktif; tanpa JS kandungan terus kelihatan) */
html.mkt-js [data-reveal] { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .7s ease, transform .7s ease, filter .7s ease; }
html.mkt-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
    html.mkt-js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}
@media (max-width: 899.98px) {
    .m-feat, .m-feat.is-rev { flex-direction: column; align-items: stretch; }
    .m-feat-stage { min-height: 280px; }
}

/* Paparan sistem: tab bertukar sendiri */
.m-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.m-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--m-divider); background: var(--m-surface); color: var(--m-muted); font: 500 14px var(--m-font); cursor: pointer; transition: color .2s, border-color .2s; }
.m-tab > i, .m-tab > span:last-child { position: relative; }
.m-tab:hover { color: var(--m-text); }
.m-tab.is-on { color: var(--m-text); border-color: var(--m-accent); }
.m-tab-bar { position: absolute; inset: 0; background: color-mix(in oklch, var(--m-brand) 22%, transparent); transform: scaleX(0); transform-origin: left; pointer-events: none; transition: transform .1s linear; }
.m-tab-stage { display: grid; border-radius: 14px; background: var(--m-surface); overflow: hidden; }
.m-tab-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); }
.m-tab-panel.is-on { opacity: 1; visibility: visible; }
.m-tab-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 440px; }
.m-tab-card { width: min(100%, 420px); background: var(--m-bg); box-shadow: var(--m-shadow); }
.m-tab-copy { display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.m-tab-title { margin: 0; font: 500 clamp(24px, 3vw, 32px)/1.15 var(--m-font); letter-spacing: -.02em; }
.m-tab-points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.m-tab-points li { display: flex; gap: 8px; align-items: center; }
.m-tab-points i { color: var(--m-accent); }
.m-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--m-brand); color: var(--m-on-brand); font-size: 12.5px; font-weight: 500; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); white-space: nowrap; }
.m-chip-a { right: 6%; top: 14%; }
.m-chip-b { left: 2%; bottom: 10%; }

/* Animasi terapung (ringan, CSS sahaja) */
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes m-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 60% { transform: translateY(-6px); } }
.m-anim-float { animation: m-float 5s ease-in-out infinite; }
.m-anim-float-slow { animation: m-float 7s ease-in-out -2s infinite; }
.m-anim-bounce { animation: m-bounce 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .m-anim-float, .m-anim-float-slow, .m-anim-bounce { animation: none; }
}
.m-phone-stage { padding: 28px 0; border-radius: 14px; background: var(--m-surface); display: flex; justify-content: center; }
.m-phone { width: 264px; max-width: calc(100% - 32px); border-radius: 32px; padding: 10px; background: var(--m-surface-2); box-shadow: var(--m-shadow); }
.m-phone-screen { border-radius: 24px; background: var(--m-bg); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.m-photo { height: 104px; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--m-surface) 0 8px, var(--m-surface-2) 8px 16px); display: flex; align-items: center; justify-content: center; font: 400 11px ui-monospace, Menlo, monospace; color: var(--m-muted); }
.m-studio-name { font-size: 17px; font-weight: 500; }
.m-studio-meta { font-size: 12.5px; color: var(--m-muted); }
.m-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; font-size: 11px; text-align: center; }
.m-days div { padding: 7px 0; border-radius: 8px; border: 1px solid var(--m-divider); color: var(--m-muted); }
.m-days b { display: block; font-size: 14px; color: var(--m-text); font-weight: 500; }
.m-days .is-on { background: var(--m-brand); border-color: var(--m-brand); color: var(--m-on-brand); }
.m-days .is-on b { color: var(--m-on-brand); }
.m-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; font-size: 12px; text-align: center; }
.m-times div { padding: 9px 0; border-radius: 8px; border: 1px solid var(--m-divider); }
.m-times .is-taken { color: var(--m-muted); text-decoration: line-through; }
.m-times .is-on { border-color: var(--m-accent); color: var(--m-accent); }
.m-pay-btn { padding: 12px; border-radius: 8px; background: var(--m-brand); color: var(--m-on-brand); text-align: center; font-weight: 500; font-size: 13.5px; }
.m-panel { padding: 22px; border-radius: 14px; background: var(--m-surface); display: flex; flex-direction: column; font-size: 13px; }
.m-panel-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; }
.m-panel-head b { font-size: 15px; font-weight: 500; }
.m-panel-head span { font-size: 11px; letter-spacing: .08em; color: var(--m-muted); }
.m-pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 10px 0; align-items: center; }
.m-pay-row + .m-pay-row, .m-faq-item + .m-faq-item { position: relative; }
.m-fade-rule { background: linear-gradient(to right, transparent, var(--m-divider) 48px, var(--m-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; }
.m-tag { padding: 2px 8px; border-radius: 6px; background: var(--m-brand); color: var(--m-on-brand); font-size: 11.5px; white-space: nowrap; }
.m-tag.is-wait { background: none; border: 1px solid var(--m-divider); color: var(--m-muted); }
.m-chat { gap: 10px; font-size: 13.5px; }
.m-chat-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--m-muted); }
.m-chat-head i { color: var(--m-accent); font-size: 16px; }
.m-bubble-in { align-self: flex-start; max-width: 90%; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--m-surface-2); line-height: 1.5; }
.m-bubble-out { align-self: flex-end; padding: 8px 14px; border-radius: 14px 4px 14px 14px; background: var(--m-brand); color: var(--m-on-brand); }

/* Band statistik */
.m-stats-band { padding: clamp(56px, 7vw, 96px) var(--m-pad-x); margin-top: clamp(32px, 4vw, 56px); }
.m-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }
.m-stat-num { font: 500 clamp(40px, 5vw, 60px)/1 var(--m-font); letter-spacing: -.03em; }
.m-band-rule { height: 1px; background: linear-gradient(to right, transparent, var(--m-brand-line) 48px, var(--m-brand-line) calc(100% - 48px), transparent); }
.m-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.m-quote { margin: 0; padding: 24px; border-radius: 14px; background: var(--m-brand-deep); display: flex; flex-direction: column; gap: 18px; }
.m-quote p { font-size: 17px; line-height: 1.5; }
.m-quote span { font-size: 13px; color: var(--m-on-brand-muted); }

/* Harga */
.m-price-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.m-toggle { display: flex; border: 1px solid var(--m-divider); border-radius: 8px; overflow: hidden; }
.m-toggle button { border: 0; cursor: pointer; white-space: nowrap; padding: 9px 14px; font: 500 13px var(--m-font); background: transparent; color: var(--m-muted); }
.m-toggle button + button { border-left: 1px solid var(--m-divider); }
.m-toggle button[aria-pressed=true] { color: var(--m-accent); box-shadow: inset 0 0 0 1px var(--m-accent); }
.m-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: stretch; }
.m-plan { position: relative; padding: 28px; border-radius: 20px; background: var(--m-surface); border: 1px solid var(--m-divider); display: flex; flex-direction: column; gap: 20px; }
.m-plan-top { display: flex; flex-direction: column; gap: 8px; }
.m-plan-name { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 24px/1.2 var(--m-font); letter-spacing: -.02em; }
.m-plan-name small { font-size: 11px; font-weight: 600; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklch, var(--m-brand) 16%, transparent); color: var(--m-accent); }
.m-plan-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--m-muted); }
.m-price-block { display: flex; flex-direction: column; gap: 8px; }
.m-was { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--m-muted); }
.m-was s { text-decoration-thickness: 1.5px; }
.m-save { padding: 3px 10px; border-radius: 999px; background: rgba(34, 197, 94, .14); color: #4ADE80; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
html[data-mkt-theme=light] .m-save { color: #15803D; }
.m-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font: 700 clamp(48px, 5vw, 64px)/1 var(--m-font); letter-spacing: -.04em; }
.m-price .m-cur { font-size: 22px; font-weight: 600; letter-spacing: 0; color: var(--m-muted); margin-right: 2px; }
.m-price small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--m-muted); }
.m-plan-limits { align-self: flex-start; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--m-divider); font-size: 12.5px; color: var(--m-muted); }
.m-plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.m-plan-feats li { display: flex; align-items: center; gap: 12px; }
.m-feat-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--m-surface-2); color: var(--m-muted); font-size: 16px; }
.m-plan-feats li.is-head { font-weight: 600; }
.m-plan-feats li.is-head .m-feat-ico { background: var(--m-brand); color: var(--m-on-brand); }
.mkt-body .m-plan-cta { margin-top: auto; padding: 15px; border-radius: 14px; background: var(--m-surface-2); border: 1px solid var(--m-divider); text-align: center; color: var(--m-text); font-weight: 600; font-size: 15px; }
.mkt-body .m-plan-cta:hover { color: var(--m-text); border-color: var(--m-accent); }
.m-plan.is-feat { border: 1.5px solid color-mix(in oklch, var(--m-brand) 70%, transparent); box-shadow: 0 0 0 6px color-mix(in oklch, var(--m-brand) 7%, transparent), 0 24px 60px rgba(0, 0, 0, .35); }
.m-plan.is-feat .m-price { color: var(--m-accent); }
.m-plan.is-feat .m-feat-ico { background: color-mix(in oklch, var(--m-brand) 16%, transparent); color: var(--m-accent); }
.mkt-body .m-plan.is-feat .m-plan-cta { background: var(--m-brand); border-color: var(--m-brand); color: var(--m-on-brand); box-shadow: 0 10px 30px color-mix(in oklch, var(--m-brand) 30%, transparent); }
.mkt-body .m-plan.is-feat .m-plan-cta:hover { opacity: .9; }
.m-price-note { font-size: 13px; color: var(--m-muted); }

/* Soalan lazim */
.m-faq { max-width: 1240px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--m-pad-x) clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; }
.m-faq-list { display: flex; flex-direction: column; }
.m-faq-q { width: 100%; display: flex; justify-content: space-between; gap: 16px; background: none; border: 0; padding: 18px 0; color: var(--m-text); font: 500 16px var(--m-font); text-align: left; cursor: pointer; }
.m-faq-q i { color: var(--m-accent); flex: none; margin-top: 3px; }
.m-faq-a { margin: 0 0 18px !important; color: var(--m-muted); }

/* CTA & kaki */
.m-cta-sec { padding: 0 var(--m-pad-x) clamp(40px, 5vw, 64px); }
.m-cta { max-width: 1240px; margin: 0 auto; border-radius: 14px; padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px); display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.m-cta h2 { font-size: clamp(32px, 5vw, 60px) !important; line-height: 1.02; letter-spacing: -.035em; max-width: 700px; text-wrap: balance; }
.m-cta .m-btn { padding: 14px 22px; }
.m-foot { max-width: 1240px; margin: 0 auto; padding: 24px var(--m-pad-x) 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--m-muted); }
.m-foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.mkt-body .m-foot-links a { color: var(--m-muted); }
.mkt-body .m-foot-links a:hover { color: var(--m-text); }

/* Satu titik putus: < 760px = varian mudah alih */
@media (max-width: 759.98px) {
    .m-nav, .m-login, .m-side, .m-sched, .m-float { display: none !important; }
    .m-sched-list { display: flex; }
    .m-tab-visual { min-height: 0; }
    .m-chip { display: none; }
    .m-aud-switch { display: flex; width: 100%; }
    .m-aud-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 6px; font-size: 13px; white-space: nowrap; }
    .m-aud-btn i { display: none; }
    .m-seg { display: flex; flex-direction: column; width: 100%; border-radius: 18px; }
    .m-seg .m-tab { justify-content: center; }
}

/* Telefon kecil (≤360px): suis 3 pihak masih muat */
@media (max-width: 360px) {
    .m-aud-switch { gap: 2px; padding: 4px; }
    .m-aud-btn { padding: 9px 2px; font-size: 11.5px; letter-spacing: -.01em; }
}