/* Zainur - How It Works */
.hiw-hero {
  padding: 154px 0 86px;
  color: var(--cream);
  background:
    radial-gradient(circle at 82% 24%, rgba(23,82,63,.42), transparent 44%),
    radial-gradient(circle at 15% 82%, rgba(204,163,84,.10), transparent 38%),
    linear-gradient(155deg, var(--green-deep) 0%, #051f17 100%);
  overflow: hidden;
  position: relative;
}
.hiw-hero::after { content:""; position:absolute; width:430px; height:430px; border:1px solid rgba(247,216,141,.11); border-radius:50%; right:-160px; bottom:-260px; }
.hiw-hero-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:64px; align-items:center; position:relative; z-index:1; }
.hiw-hero .section-eyebrow { color:var(--gold-light); }
.hiw-hero h1 { max-width:800px; margin:10px 0 18px; font-family:var(--serif); font-size:clamp(46px,6vw,72px); font-weight:700; letter-spacing:-.035em; }
.hiw-hero-copy>p { max-width:720px; margin:0; color:rgba(250,249,246,.76); font-size:16px; line-height:1.75; }
.hiw-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hiw-primary-btn { background:linear-gradient(100deg,var(--gold-light),var(--gold)); color:var(--green-deep)!important; box-shadow:0 9px 28px rgba(204,163,84,.24); }
.hiw-primary-btn:hover { color:var(--green-deep)!important; transform:translateY(-1px); box-shadow:0 13px 34px rgba(204,163,84,.34); }
.hiw-outline-btn,.hiw-light-outline { background:transparent; border:1px solid rgba(247,216,141,.42); color:var(--cream)!important; }
.hiw-outline-btn:hover,.hiw-light-outline:hover { background:rgba(247,216,141,.08); border-color:var(--gold-light); color:var(--gold-light)!important; }

.hiw-hero-summary { padding:28px; border:1px solid rgba(247,216,141,.24); border-radius:22px; background:rgba(255,255,255,.065); backdrop-filter:blur(12px); }
.summary-label { display:block; margin-bottom:18px; color:var(--gold-light); font-size:10px; font-weight:800; letter-spacing:.14em; }
.summary-route { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding-bottom:22px; border-bottom:1px solid rgba(247,216,141,.14); color:var(--cream); font-family:var(--serif); font-size:18px; font-weight:700; }
.summary-route i { color:var(--gold); font-size:12px; }
.summary-payment { display:flex; gap:13px; align-items:flex-start; padding-top:21px; }
.summary-payment>i { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; background:rgba(247,216,141,.10); color:var(--gold-light); font-size:18px; }
.summary-payment strong { display:block; color:var(--gold-light); font-size:15px; }
.summary-payment p { margin:4px 0 0; color:rgba(250,249,246,.64); font-size:11.5px; line-height:1.55; }

.hiw-quick-strip { background:#fff; border-bottom:1px solid rgba(8,51,38,.08); }
.hiw-quick-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.hiw-quick-grid article { display:flex; gap:12px; align-items:flex-start; padding:23px 18px; border-right:1px solid rgba(8,51,38,.07); }
.hiw-quick-grid article:last-child { border-right:0; }
.hiw-quick-grid i { color:var(--gold-deep); font-size:19px; margin-top:1px; }
.hiw-quick-grid strong { display:block; color:var(--green); font-size:12.2px; margin-bottom:3px; }
.hiw-quick-grid span { display:block; color:var(--ink-muted); font-size:11.2px; line-height:1.45; }

.hiw-process-section { padding:90px 0; background:var(--cream); }
.hiw-heading { max-width:760px; margin:0 auto 48px; text-align:center; }
.hiw-heading.compact { margin-bottom:34px; }
.hiw-heading h2,.prepare-copy h2 { font-family:var(--serif); color:var(--green); font-size:clamp(36px,4.8vw,54px); margin:8px 0 13px; }
.hiw-heading p,.prepare-copy>p { color:var(--ink-muted); font-size:14px; line-height:1.7; }
.hiw-order-timing { max-width:1040px; margin:0 auto 28px; padding:26px 28px; border:1px solid rgba(17,71,54,.12); border-radius:22px; background:#fff; box-shadow:0 9px 28px rgba(8,51,38,.035); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px 34px; align-items:center; }
.hiw-order-timing .section-eyebrow { margin-bottom:4px; }
.timing-intro h3 { font-family:var(--serif); color:var(--green); font-size:29px; margin:4px 0 6px; }
.timing-intro p { margin:0; color:var(--ink-muted); font-size:11.8px; line-height:1.6; }
.timing-options { display:grid; grid-template-columns:repeat(2,minmax(135px,1fr)); gap:10px; }
.timing-options article { min-width:145px; padding:15px 17px; border-radius:15px; background:rgba(17,71,54,.065); border:1px solid rgba(17,71,54,.08); }
.timing-options span { display:block; color:var(--gold-deep); font-size:9px; font-weight:800; letter-spacing:.12em; }
.timing-options strong { display:block; margin-top:4px; color:var(--green); font-family:var(--serif); font-size:27px; line-height:1; }
.timing-options p { margin:5px 0 0; color:var(--ink-muted); font-size:10.5px; }
.timing-note { grid-column:1 / -1; display:flex; gap:10px; align-items:flex-start; padding-top:17px; border-top:1px solid rgba(8,51,38,.07); }
.timing-note i { color:var(--gold-deep); margin-top:2px; }
.timing-note p { margin:0; color:var(--ink-muted); font-size:11.3px; line-height:1.65; }
.hiw-timeline { position:relative; max-width:1040px; margin:0 auto; display:grid; gap:18px; }
.hiw-timeline::before { content:""; position:absolute; left:44px; top:44px; bottom:44px; width:1px; background:linear-gradient(var(--gold),rgba(17,71,54,.13)); }
.hiw-step { display:grid; grid-template-columns:88px 58px 1fr; gap:20px; align-items:flex-start; padding:28px 30px 28px 0; border:1px solid rgba(8,51,38,.09); border-radius:22px; background:#fff; box-shadow:0 9px 28px rgba(8,51,38,.035); position:relative; overflow:hidden; }
.hiw-step::after { content:""; position:absolute; width:170px; height:170px; top:-115px; right:-85px; border-radius:50%; background:rgba(204,163,84,.06); }
.step-number { min-height:62px; display:grid; place-items:center; color:var(--gold-deep); font-size:10px; font-weight:800; letter-spacing:.12em; position:relative; z-index:1; }
.step-number::after { content:""; position:absolute; width:11px; height:11px; border-radius:50%; background:var(--green); border:3px solid var(--cream); box-shadow:0 0 0 1px rgba(204,163,84,.55); right:-1px; top:23px; }
.step-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:rgba(17,71,54,.075); color:var(--green); font-size:20px; }
.step-copy { padding:1px 4px 0 0; position:relative; z-index:1; }
.step-copy>span { display:block; color:var(--gold-deep); font-size:9.5px; font-weight:800; letter-spacing:.12em; margin-bottom:6px; }
.step-copy h3 { font-family:var(--serif); color:var(--green); font-size:29px; margin-bottom:8px; }
.step-copy p { max-width:760px; color:var(--ink-muted); font-size:13px; line-height:1.7; margin:0; }
.step-copy>a { display:inline-flex; align-items:center; gap:7px; margin-top:13px; color:var(--green); font-size:11.5px; font-weight:800; }
.step-copy>a:hover { color:var(--gold-deep); }
.step-note { display:flex; gap:8px; align-items:flex-start; margin-top:13px; color:var(--green); font-size:11.2px; font-weight:700; }
.step-note i { color:var(--gold-deep); }
.payment-step,.approval-step { border-color:rgba(204,163,84,.24); }
.publish-step { background:linear-gradient(120deg,#fff,#fbfdfb); }
.final-step { border-color:rgba(17,71,54,.19); box-shadow:0 15px 38px rgba(8,51,38,.07); }

.hiw-prepare-section { padding:86px 0; background:#fff; }
.hiw-prepare-grid { max-width:1050px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.prepare-copy .section-eyebrow { margin-bottom:0; }
.prepare-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.prepare-list article { display:flex; gap:13px; align-items:flex-start; padding:20px; border-radius:18px; background:var(--cream); border:1px solid rgba(8,51,38,.07); }
.prepare-list i { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; background:var(--green); color:var(--gold-light); }
.prepare-list span { color:var(--ink-muted); font-size:11.5px; line-height:1.5; }
.prepare-list strong { display:block; color:var(--green); font-size:12.5px; margin-bottom:3px; }

.hiw-after-section { padding:86px 0; background:#f5f3ed; }
.after-grid { max-width:1050px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.after-grid article { padding:25px 20px; border-radius:19px; background:#fff; border:1px solid rgba(8,51,38,.08); }
.after-grid i { color:var(--gold-deep); font-size:23px; }
.after-grid h3 { margin:13px 0 7px; color:var(--green); font-size:15px; }
.after-grid p { color:var(--ink-muted); font-size:11.6px; line-height:1.6; margin:0; }

.hiw-faq-section { padding:86px 0; background:var(--cream); }
.hiw-faq-list { max-width:830px; margin:0 auto; display:grid; gap:10px; }
.hiw-faq-item { background:#fff; border:1px solid rgba(8,51,38,.09); border-radius:16px; overflow:hidden; }
.hiw-faq-question { width:100%; border:0; background:transparent; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; text-align:left; color:var(--green); font-size:12.5px; font-weight:800; }
.hiw-faq-question i { color:var(--gold-deep); transition:transform .25s var(--ease); }
.hiw-faq-item.active .hiw-faq-question i { transform:rotate(45deg); }
.hiw-faq-answer { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.hiw-faq-answer p { margin:0; padding:0 20px 19px; color:var(--ink-muted); font-size:12px; line-height:1.7; }

.hiw-cta { padding:0 0 88px; background:var(--cream); }
.hiw-cta-card { max-width:980px; margin:0 auto; padding:48px 38px; text-align:center; border-radius:27px; background:radial-gradient(circle at 80% 20%,rgba(23,82,63,.35),transparent 43%),linear-gradient(155deg,var(--green-deep),#051f17); color:var(--cream); }
.hiw-cta-card .section-eyebrow { color:var(--gold-light); }
.hiw-cta-card h2 { max-width:700px; margin:8px auto 11px; font-family:var(--serif); font-size:clamp(34px,4.5vw,48px); }
.hiw-cta-card p { max-width:650px; margin:0 auto 24px; color:rgba(250,249,246,.70); font-size:13px; line-height:1.7; }
.hiw-cta-card>div { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }

.hiw-hero .section-eyebrow,.hiw-hero h1,.hiw-hero-copy>p,.hiw-hero-actions,.hiw-hero-summary { opacity:0; animation:hiw-in 1.05s var(--ease) forwards; }
.hiw-hero .section-eyebrow { animation-delay:.10s; }
.hiw-hero h1 { animation-delay:.24s; }
.hiw-hero-copy>p { animation-delay:.38s; }
.hiw-hero-actions { animation-delay:.50s; }
.hiw-hero-summary { animation-delay:.34s; }
@keyframes hiw-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.hiw-reveal { opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease),transform .75s var(--ease); }
.hiw-reveal.is-visible { opacity:1; transform:translateY(0); }

@media(max-width:991.98px){
  .hiw-hero-grid { grid-template-columns:1fr; gap:34px; }
  .hiw-hero-summary { max-width:560px; }
  .hiw-quick-grid { grid-template-columns:1fr 1fr; }
  .hiw-quick-grid article:nth-child(2) { border-right:0; }
  .hiw-quick-grid article:nth-child(-n+2) { border-bottom:1px solid rgba(8,51,38,.07); }
  .hiw-prepare-grid { grid-template-columns:1fr; gap:32px; }
  .after-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:767.98px){
  .hiw-hero { padding:124px 0 66px; }
  .hiw-hero h1 { font-size:44px; }
  .hiw-hero-copy>p { font-size:14px; }
  .hiw-process-section,.hiw-prepare-section,.hiw-after-section,.hiw-faq-section { padding:66px 0; }
  .hiw-order-timing { grid-template-columns:1fr; padding:22px 20px; gap:18px; }
  .timing-options { grid-template-columns:1fr 1fr; }
  .hiw-timeline::before { left:24px; }
  .hiw-step { grid-template-columns:48px 1fr; gap:14px; padding:23px 20px 23px 0; }
  .step-number { grid-row:1 / span 2; min-height:54px; }
  .step-number::after { right:-1px; top:20px; }
  .step-icon { width:46px; height:46px; border-radius:14px; }
  .step-copy { grid-column:2; }
  .step-copy h3 { font-size:26px; }
  .prepare-list { grid-template-columns:1fr; }
  .hiw-cta-card { padding:38px 20px; border-radius:22px; }
}
@media(max-width:575.98px){
  .hiw-quick-grid { grid-template-columns:1fr; }
  .hiw-quick-grid article { border-right:0!important; border-bottom:1px solid rgba(8,51,38,.07); }
  .hiw-quick-grid article:last-child { border-bottom:0; }
  .timing-options { grid-template-columns:1fr; }
  .after-grid { grid-template-columns:1fr; }
  .hiw-hero-actions .zbtn,.hiw-cta-card .zbtn { width:100%; justify-content:center; }
  .summary-route { font-size:16px; }
}
@media(prefers-reduced-motion:reduce){
  .hiw-hero .section-eyebrow,.hiw-hero h1,.hiw-hero-copy>p,.hiw-hero-actions,.hiw-hero-summary,.hiw-reveal { opacity:1; animation:none; transform:none; transition:none; }
}


/* 2026-08-27 mobile hero alignment fix */
@media(max-width:767.98px){
  .hiw-hero-copy{text-align:center}
  .hiw-hero .section-eyebrow{display:block;text-align:center}
  .hiw-hero h1{margin-left:auto;margin-right:auto;text-align:center}
  .hiw-hero-copy>p{margin-left:auto;margin-right:auto;text-align:center}
  .hiw-hero-actions{justify-content:center}
}