:root{
  --accent:#CA3A06; --accent-dark:#a82b08; --ink:#201C19; --muted:#666360;
  --line:#e6e6e3; --soft:#F6F5F4; --tint:#fdeee8; --white:#fff;
  --max:1184px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.5;font-size:15px}
h1,h2,h3{font-family:'Manrope','DM Sans',sans-serif;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{
	font-size:11px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--accent);
	margin-bottom:14px;
	display:block;
	}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 14px 'DM Sans',sans-serif;
    padding: 11px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s;
}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:rgba(0,0,0,.25);color:#fff;}
.btn-white{background:#fff;color:var(--ink)}
.btn-sm{padding:10px 24px;}

.btn-primary:hover {
    border-color: transparent!important;
}
.btn-primary:active{
	background:var(--accent);
	color:#fff
	}
	.btn-primary:active{
		background:var(--accent-dark);
		}

.btn-primary:focus-visible {
    border-color: transparent!important;
	outline:none;
	box-shadow:none;
}
a.btn.btn-ghost {
    border: 1px solid #ffffff40;
}
a.btn.btn-ghost:hover {
    border: 1px solid #fff;
	background-color:#fff;
	color:#201C19;
	transition: background .2s;
}
a.btn.btn-white:hover {
    background-color:#ffffff70;
	color:#201C19;
}


.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:48px;max-width:1100px}
.brand{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:500}
.brand img{height:22px}
.nav{display:flex;gap:30px;font-size:11px;font-weight:500}
.nav a:hover{color:var(--accent)}

.hero{
	position:relative;
	min-height:600px;
	color:#fff;
	background:#1c1510 url('/images/texts-merchant/hero-banner.svg') center/cover;
	overflow:hidden;
	align-content: center;
	}

.hero .wrap{position:relative;padding-top:42px;padding-bottom:42px;max-width:1100px}
.hero .eyebrow
{color:#fff;
font-size:11px;
margin-bottom:18px;
}
.hero .eyebrow::before{content:"• ";color:var(--accent)}
.hero h1{
	font-size:54px;
	font-weight:800;
	margin-bottom:14px;
	}
.hero p {
    font-size: 16px;
    max-width: 230px;
    color: #DFDDDC;
    margin-bottom: 30px;
	max-width: 42%;
}
.hero .actions{
	display:flex;gap:15px;
	margin-bottom:12px;
	}
.hero .note {
    font-size: 12px;
    color: #DFDDDC;
    display: flex;
    gap: 5px;
    margin-top: 20px;
}
.hero-badge{position:absolute;right:max(24px,calc(50% - 480px));bottom:20px;background:#fff;color:var(--ink);padding:9px 14px;border-radius:6px;display:flex;gap:10px;align-items:center;font-size:8px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.hero-badge b {
    display: block;
    font-size: 14px;
}
.hero-badge span {
    color: #666359;
    font-size: 12px;
}
.hero-badge .ck{width:20px;height:20px;border-radius:50%;border:2px solid #2d8a4e;color:#2d8a4e;display:grid;place-items:center;font-size:11px}

.strip {
    background: #F6F5F4;
    border-bottom: 1px solid #E2E8F0;
	    padding-top: 15px;
    padding-bottom: 15px;
}
.strip .wrap{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;padding-top:16px;padding-bottom:16px;max-width:1100px}
.strip b.t {
    font-size: 20px;
    display: block;
    color: #201C19;
    line-height: 26px;
}
.strip small {
    font-size: 12px;
    color: #666360;
}
.strip .stat{display:flex;gap:12px;align-items:center;border-left:1px solid var(--line);padding-left:20px}
.strip .stat .n {
    font: 800 32px 'Manrope',sans-serif;
    color: #CA3A06;
}
.strip .stat b {
    font-size: 13px;
    display: block;
    color: #201C19;
}

section{padding:88px 0}
.intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:40px;margin-bottom:32px}
.intro h2 {
    font-size: 36px;
    font-weight: 700;
    color: #201C19;
}
.intro p {
    font-size: 15px;
    color: var(--muted);
    max-width: 375px;
}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:24px; margin-top: 44px;}
.feature .ic{width:26px;height:26px;border-radius:5px;background:var(--tint);color:var(--accent);display:grid;place-items:center;margin-bottom:14px;font-size:13px}
.feature h3 {
    font-size: 17px;
    margin-bottom: 10px;
    font-weight: 700;
    margin-top: 15px;
}
.feature p{font-size:14px;color:var(--muted)}

.showcase{background:var(--soft)}
.showcase .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.showcase img{border-radius:6px;aspect-ratio:7/6;object-fit:cover;width:100%}
.showcase h2 {
    font-size: 36px;
    line-height: 45px;
    font-weight: 700;
    margin-bottom: 12px;
}
.showcase p {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 26px;
}
.ticks{list-style:none;margin-bottom:18px}
.ticks li{font-size:14px;margin-bottom:15px;display:flex;gap:8px}
.ticks li::before{content:"✓";color:#1E5A3C;font-weight:700}
.showcase small{display:block;font-size:12px;color:var(--muted);margin-top:15px;}

.steps h2{font-size:36px;font-weight:700;margin-bottom:26px}
.step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px; margin-top:44px;}
.step .num{width:42px;height:42px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font-size:15px;font-weight:700;display:grid;place-items:center;margin-bottom:15px;}
.step h3{font-size:17px;margin-bottom:15px;}
.step p {
    font-size: 14px;
    color: var(--muted);
    max-width: 326px;
}
.ready{border-top:1px solid var(--line);padding-top:14px;font-size:14px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.ready b {
    display: flex;
    gap: 5px;
}
.ready span.c{color:var(--muted)}
.ready-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 15px;
}

.faq{border-top:1px solid var(--line)}
.faq .wrap{display:grid;grid-template-columns:.8fr 1.6fr;gap:70px}
.faq-left h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 45px;
}
.faq-left p {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 16px;
    max-width: 341px;
    line-height: 26px;
}
.contact{font-size:13px;display:flex;gap:8px;align-items:center;margin-bottom:8px}
.contact-link {
    gap: 5px;
    display: flex;
    margin-top: 10px;
    font-size: 14px;
    color: var(--accent);
    font-weight: 500;
    align-items: center;
}
.tabs{display:flex;gap:16px;border-bottom:1px solid var(--line)}
.tab{background:none;border:0;padding:0 0 8px;font:500 14px 'DM Sans';color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"] {
    color: #CA3A06;
    border-color: var(--accent);
}
.tab-link {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.tab-link:hover {
  color: var(--accent);
}
.panel[hidden]{display:none}
.panel>p{font-size:9px;color:var(--muted);padding:16px 0}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:15px 0;font:600 15px 'DM Sans';text-align:left;cursor:pointer;color:var(--ink)}
.acc-btn::after{content:"+";font-size:16px;font-weight:400}
.acc-btn[aria-expanded="true"]::after{content:"×";color:var(--accent)}
.acc-body{display:none;padding:0 0 14px;font-size:9px;color:var(--muted)}
.acc-body p {
    margin-bottom: 12px;
    font-size: 14px;
    color: #666360;
}
.acc-body b{color:#666360;font-weight:500;display:block}
.acc-btn[aria-expanded="true"]+.acc-body{display:block}
.view-all {
    margin-top: 14px;
    font-size: 9px;
    color: var(--accent);
    display: flex;
    gap: 5px;
    align-items: center;
}

.cta{background:var(--accent);color:#fff;padding:44px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:center}
.cta .eyebrow{color:#fff;font-size:11px}
.cta h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 41px;
}
.cta p{font-size:14px;opacity:.9}

footer{padding:18px 0;font-size:8.5px;color:var(--muted)}
footer .wrap{max-width:1100px;display:flex;align-items:center;justify-content:space-between}
footer .brand{font-size:8px}
footer .brand img{height:16px}
footer nav{display:flex;gap:18px}


/* ---------- Success toast (form submit ke baad) ---------- */
.merchant-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1E5A3C;
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  z-index: 10000;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  max-width: calc(100vw - 32px);
  text-align: center;
}


/* ---------- Video popup (base) ---------- */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.video-modal.active { display: flex; }
.video-modal-content {
  position: relative;
  background: #000;
  border-radius: 12px;
  max-width: 95vw;
  max-height: 95vh;
}
.video-modal-content iframe {
  display: block;
  border-radius: 12px;
  max-width: 100%;
}
.video-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}


/* ---------- Registration popup ---------- */
.reg-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.reg-modal.active { display: flex; }
.reg-modal-content {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
}
.reg-modal-content h3,
.video-form-side h3 { margin: 0 0 4px; font-size: 22px; }
.reg-sub { margin: 0 0 18px; color: #666; font-size: 14px; }
.reg-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}
.reg-modal-content label,
.video-form-side label {
  display: block;
  margin: 12px 0 4px;
  font-size: 14px;
  font-weight: 600;
}
.reg-modal-content input[type="text"],
.reg-modal-content input[type="tel"],
.reg-modal-content input[type="email"],
.reg-modal-content select,
.video-form-side input[type="text"],
.video-form-side input[type="tel"],
.video-form-side input[type="email"],
.video-form-side select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: inherit;
  box-sizing: border-box;
}
.reg-modal-content input:focus,
.reg-modal-content select:focus,
.video-form-side input:focus,
.video-form-side select:focus {
  outline: 2px solid #d4491c;
  border-color: transparent;
}
.reg-privacy {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 16px;
}
.reg-privacy input { margin-top: 3px; }
.reg-privacy label,
.video-form-side .reg-privacy label,
.reg-modal-content .reg-privacy label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: #555;
  line-height: 1.4;
}
.reg-privacy a { color: var(--accent); text-decoration: underline; }
.reg-submission-message {
  margin-top: 14px;
  font-size: 13px;
  color: #333;
}
.reg-submit {
  width: 100%;
  margin-top: 18px;
  cursor: pointer;
  justify-content: center;
}


/* ---------- Video + Form split popup (left video, right form) ---------- */
.video-modal-content.split {
  display: flex;
  flex-direction: row;
  background: #fff;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  border-radius: 16px;
  overflow: hidden;
}
.video-modal-content.split .video-close {
  top: 10px;
  right: 10px;
  background: #f1f1f1;
}
.video-side {
  flex: 0 0 auto;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit:contain;
}
.video-modal-content .video-side iframe {
  display: block;
  border-radius: 0;
  height: min(480px, 80vh);
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: none;
  object-fit:contain;
}
.video-form-side {
  flex: 1;
  min-width: 0;
  padding: 22px 28px;
  overflow-y: auto;
  background: #fff;
  color: var(--ink);
  object-fit:contain;
}
.video-form-side h3 { font-size: 20px; }
.video-form-side .reg-sub { margin-bottom: 8px; font-size: 13px; }
.video-form-side label { margin: 9px 0 3px; font-size: 13px; }
.video-form-side input[type="text"],
.video-form-side input[type="tel"],
.video-form-side input[type="email"],
.video-form-side select { padding: 9px 12px; font-size: 14px; background: #fff; color: var(--ink); }
.video-form-side .reg-privacy { margin-top: 12px; }
.video-form-side .reg-submit { margin-top: 14px; }

@media (max-width:820px){
  .nav{display:none}
  .strip .wrap,.intro,.showcase .wrap,.faq .wrap,.step-list{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .strip .stat{border-left:0;padding-left:0}
  .hero-badge{position:static;margin:0 24px 20px;display:inline-flex}
  .hero::before{background:rgba(15,12,10,.8)}
  .cta .wrap,footer .wrap{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:520px){.features{grid-template-columns:1fr}.site-header .btn{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* mobile Responsive */

@media(max-width:767px){
	.hero h1 {
    font-size: 34px;
}
.hero p {
    max-width: 100%;
}
.hero .actions {
    display: block;
}
.hero .actions a.btn.btn-ghost {
    margin-top: 15px;
}
.intro h2 {
    font-size: 28px;
}
.intro {
    gap: 15px;
}
.showcase h2 {
    font-size: 28px;
    line-height: 36px;
}
.steps h2 {
    font-size: 28px;
}
.faq-left h2 {
    font-size: 28px;
    line-height: 36px;
}
section {
    padding: 50px 0;
}

/* split popup: mobile par video upar, form neeche */
.video-modal-content.split {
  flex-direction: column;
  overflow-y: auto;
}
.video-side { width: 100%; }
.video-modal-content .video-side iframe {
  width: 100%;
  height: min(380px, 50vh);
  aspect-ratio: auto;
}
.video-form-side { overflow: visible; }
}