:root{
  --hg-primary:#0A1F5B;
  --hg-accent:#FF9900;
  --hg-bg:#F6F8FC;
  --hg-white:#fff;
  --hg-text:#3a3a3a;
  --hg-radius:18px;
  --hg-shadow:0 10px 26px rgba(0,0,0,.08);
}

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

body{
  font-family:'Vazirmatn',sans-serif;
  background:var(--hg-bg);
  color:var(--hg-text);
  line-height:1.9;
}

.hommex-guide-container{
  max-width:1100px;
  margin:auto;
  padding:0 16px;
}

/* Hero */
.hommex-guide-hero{position:relative}
.hommex-guide-hero-image{
  height:50vh;
  min-height:360px;
  overflow:hidden;
  border-radius:0 0 var(--hg-radius) var(--hg-radius);
}
.hommex-guide-hero-image img{
  width:100%;height:100%;object-fit:cover
}
.hommex-guide-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,31,91,.2),rgba(10,31,91,.7));
  display:flex;align-items:flex-end;
}
.hommex-guide-title{
  color:#fff;font-size:1.6rem;
  display:flex;gap:10px;align-items:center
}
.hommex-guide-subtitle{color:#eaf2ff;margin-top:6px}
.hommex-guide-btn{
  margin-top:14px;
  display:inline-flex;gap:8px;align-items:center;
  background:var(--hg-accent);
  color:#222;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  box-shadow:var(--hg-shadow);
}

/* Sections */
.hommex-guide-section{padding:28px 0}
.hommex-guide-card{
  background:var(--hg-white);
  border-radius:var(--hg-radius);
  box-shadow:var(--hg-shadow);
  padding:18px;
}
.hommex-guide-card-header{
  display:flex;gap:10px;align-items:center;margin-bottom:6px
}
.hommex-guide-card-header i{color:var(--hg-primary);font-size:22px}
.hommex-guide-card h2,
.hommex-guide-card h3{color:var(--hg-primary)}

.hommex-guide-list{
  list-style:none;margin-top:10px
}
.hommex-guide-list li{
  display:flex;gap:8px;align-items:center;
  padding:6px 0
}
.hommex-guide-list i{color:var(--hg-accent)}

/* Grid */
.hommex-guide-grid{
  display:grid;
  gap:16px;
}

/* CTA */
.hommex-guide-cta-wrap{
  display:grid;
  gap:16px
}
.hommex-guide-cta-image{
  border-radius:var(--hg-radius);
  overflow:hidden;
  box-shadow:var(--hg-shadow)
}
.hommex-guide-cta-image img{width:100%;display:block}

/* Fade */
.hommex-guide-fade{
  opacity:0;
  transform:translateY(24px);
  transition:.6s ease
}
.hommex-guide-show{
  opacity:1;
  transform:none
}

/* Responsive */
@media(min-width:768px){
  .hommex-guide-grid{grid-template-columns:repeat(2,1fr)}
  .hommex-guide-cta-wrap{grid-template-columns:1.1fr .9fr}
}
@media(min-width:992px){
  .hommex-guide-grid{grid-template-columns:repeat(3,1fr)}
  .hommex-guide-title{font-size:2rem}
}