/* Custom Properties */
:root{
  --hommex-rep-primary:#091f5b;
  --hommex-rep-primary-dark:#041033;
  --hommex-rep-accent:#ff9900;
  --hommex-rep-accent-soft:#ffe6c2;
  --hommex-rep-bg:#f6f7fb;
  --hommex-rep-bg-alt:#eef1fb;
  --hommex-rep-text:#333;
  --hommex-rep-muted:#6a6a6a;
  --hommex-rep-radius:18px;
  --hommex-rep-radius-lg:22px;
  --hommex-rep-shadow:0 18px 40px rgba(9,31,91,.14);
  --hommex-rep-shadow-card:0 10px 28px rgba(0,0,0,.06);
  --hommex-rep-transition:.28s ease;
}

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

body{
  font-family:'Vazirmatn',sans-serif; /* فرض بر این است که فونت Vazirmatn در JS/Head لود شده است */
  background:var(--hommex-rep-bg);
  color:var(--hommex-rep-text);
  line-height:2.2;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.hommex-rep-container{max-width:1120px;margin:0 auto;padding:1.5rem 1.2rem}
.hommex-rep-section{padding:2.6rem 0}
.hommex-rep-alt-bg{background:var(--hommex-rep-bg-alt)}
.hommex-rep-section-header{text-align:center;margin-bottom:1.8rem}
.hommex-rep-section-header h2{margin:.1rem 0 .6rem;color:var(--hommex-rep-primary);font-size:1.35rem}
.hommex-rep-section-header p{margin:0 auto;max-width:640px;color:var(--hommex-rep-muted);font-size:.95rem}

/* Topbar */
.hommex-rep-topbar{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:1px solid #eceff6;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.hommex-rep-nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.hommex-rep-brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--hommex-rep-primary);text-decoration:none;font-weight:700}
.hommex-rep-btn-nav{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem 1rem;border-radius:999px;border:1px solid #e7e9f5;background:#fff;color:var(--hommex-rep-primary);
  text-decoration:none;font-size:.85rem;transition:box-shadow var(--hommex-rep-transition),transform var(--hommex-rep-transition);
}
.hommex-rep-btn-nav:hover{box-shadow:0 8px 20px rgba(9,31,91,.12);transform:translateY(-1px)}

/* Buttons */
.hommex-rep-btn-primary,.hommex-rep-btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.75rem 1.6rem;border-radius:999px;font-size:.9rem;border:none;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--hommex-rep-transition),box-shadow var(--hommex-rep-transition),background var(--hommex-rep-transition),opacity var(--hommex-rep-transition);
}
.hommex-rep-btn-primary{background:linear-gradient(135deg,var(--hommex-rep-accent),#ffb347);color:#22150a;box-shadow:0 12px 28px rgba(255,153,0,.35)}
.hommex-rep-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(255,153,0,.45)}
.hommex-rep-btn-secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}
.hommex-rep-btn-secondary:hover{background:rgba(255,255,255,.22)}
.hommex-rep-btn-lg{padding:.95rem 2.2rem;font-size:1rem}

/* Hero */
.hommex-rep-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(80% 100% at 100% 0%,#2e52a8 0%,var(--hommex-rep-primary-dark) 60%);
}
.hommex-rep-hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(30% 40% at 10% 15%,rgba(255,255,255,.25),transparent 60%),
    radial-gradient(35% 45% at 85% 85%,rgba(255,153,0,.18),transparent 60%);
  opacity:.9;filter:saturate(110%);
}
.hommex-rep-hero-inner{
  position:relative;display:flex;flex-direction:column;gap:1.6rem;align-items:stretch;padding:2.6rem 0 2.2rem;
}
.hommex-rep-badge{
  display:inline-block;padding:.35rem .9rem;border-radius:999px;background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.25);font-size:.78rem;margin-bottom:.8rem
}
.hommex-rep-hero-text h1{margin:0 0 .7rem;font-size:1.6rem}
.hommex-rep-hero-text p{margin:0 0 1rem;color:#eef1ff;font-size:.96rem}
.hommex-rep-hero-points{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0 0 1.1rem}
.hommex-rep-hero-points li{font-size:.8rem;padding:.35rem .7rem;border-radius:999px;background:rgba(0,0,0,.22);display:flex;align-items:center;gap:8px}
.hommex-rep-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.6rem}

.hommex-rep-hero-visual{
  position:relative;border-radius:var(--hommex-rep-radius-lg);background:rgba(8,17,53,.6);padding:1rem;box-shadow:var(--hommex-rep-shadow);overflow:hidden
}
.hommex-rep-hero-visual picture,.hommex-rep-hero-visual img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:calc(var(--hommex-rep-radius-lg) - 4px)}
.hommex-rep-floating{
  position:absolute;background:rgba(10,19,60,.92);color:#fff;border-radius:14px;padding:.6rem .8rem;font-size:.78rem;
  box-shadow:0 14px 36px rgba(0,0,0,.45)
}
.hommex-rep-kpi-card{left:.9rem;bottom:.9rem;min-width:140px}
.hommex-rep-kpi-label{display:block;opacity:.85;margin-bottom:.2rem}
.hommex-rep-kpi-value{display:block;font-weight:700;margin-bottom:.15rem}
.hommex-rep-kpi-hint{opacity:.85}
.hommex-rep-tag-card{top:.9rem;right:.9rem}

/* Breadcrumbs */
.hommex-rep-breadcrumbs{padding:.3rem 0 1.2rem}
.hommex-rep-breadcrumbs ol{display:flex;gap:.5rem;list-style:none;margin:0;padding:0;color:#d6dbff;font-size:.82rem}
.hommex-rep-breadcrumbs a{color:#fff;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.4)}
.hommex-rep-breadcrumbs li[aria-current="page"]{opacity:.9}

/* Grids & Cards */
.hommex-rep-grid-3{display:grid;gap:1.2rem}
.hommex-rep-grid-2{display:grid;gap:1.2rem}
.hommex-rep-card{
  background:#fff;border-radius:var(--hommex-rep-radius);padding:1.3rem 1.2rem;box-shadow:var(--hommex-rep-shadow-card);
  /* کرو کردن گوشه ها اعمال شد */
}
.hommex-rep-card h3{margin:.2rem 0 .7rem;color:var(--hommex-rep-primary);font-size:1.02rem}
.hommex-rep-card p{margin:0 0 .8rem}
.hommex-rep-card ul{padding-right:1.2rem;margin:.2rem 0 0;list-style:none}
.hommex-rep-card li{margin-bottom:.55rem;line-height:2.2;display:flex;gap:8px;align-items:center}
.hommex-rep-icon{width:40px;height:40px;border-radius:12px;background:var(--hommex-rep-accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.hommex-rep-icon i{color:var(--hommex-rep-primary)}

/* Steps */
.hommex-rep-steps{display:grid;gap:1rem}
.hommex-rep-step-card{
  background:#fff;border-radius:var(--hommex-rep-radius);padding:1.2rem 1.1rem;box-shadow:var(--hommex-rep-shadow-card);position:relative;overflow:hidden
}
/* نوار عمودی برای مرحله بندی */
.hommex-rep-step-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,var(--hommex-rep-accent),#ffb347)}
.hommex-rep-step-number{
  width:36px;height:36px;border-radius:11px;background:rgba(255,153,0,.1);color:var(--hommex-rep-accent);display:flex;align-items:center;justify-content:center;
  font-weight:700;margin-bottom:.6rem
}

/* Checklist */
.hommex-rep-checklist{padding-right:1.2rem;margin:0;list-style:none}
.hommex-rep-checklist li{position:relative;padding-right:.2rem;margin-bottom:.55rem;line-height:2.2}
.hommex-rep-checklist li::after{
  content:"";position:absolute;right:-1.2rem;top:.55rem;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffb347,var(--hommex-rep-accent));
  box-shadow:0 0 0 3px rgba(255,153,0,.12)
}

/* CTA */
.hommex-rep-cta{background:linear-gradient(135deg,#0a1f5e,#071338);color:#fff}
.hommex-rep-cta-inner{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.hommex-rep-cta-text h2{margin:0 0 .5rem;font-size:1.28rem}
.hommex-rep-cta-text p{margin:0;color:#f5f5f5}
.hommex-rep-cta-actions{display:flex;flex-direction:column;gap:.5rem}
.hommex-rep-cta-note{font-size:.8rem;opacity:.9}

/* FAQ */
.hommex-rep-faq{display:grid;gap:.8rem}
.hommex-rep-faq-item{border-radius:14px;background:#fff;box-shadow:var(--hommex-rep-shadow-card);overflow:hidden}
.hommex-rep-faq-q{
  width:100%;padding:.9rem 1rem;background:transparent;border:none;text-align:right;display:flex;align-items:center;justify-content:space-between;
  font-family:inherit;font-size:.9rem;cursor:pointer
}
.hommex-rep-faq-icon{
  width:24px;height:24px;border-radius:999px;background:#f0f1fb;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--hommex-rep-primary);flex-shrink:0
}
.hommex-rep-faq-item.open .hommex-rep-faq-icon{background:var(--hommex-rep-accent-soft);color:var(--hommex-rep-accent)}
.hommex-rep-faq-a{
  max-height:0;overflow:hidden;padding:0 1rem;border-top:1px solid #f1f1f6;transition:max-height .25s ease,padding-bottom .25s ease
}
.hommex-rep-faq-a p{margin:.7rem 0 .9rem;font-size:.86rem;color:var(--hommex-rep-muted)}
.hommex-rep-faq-item.open .hommex-rep-faq-a{padding-bottom:.7rem}

/* Fade-in (Animation) */
.hommex-rep-fade{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.hommex-rep-fade.visible{opacity:1;transform:none}
.hommex-rep-fade-delayed{opacity:0;transform:translateY(18px);transition:opacity .85s ease .15s,transform .85s ease .15s}
.hommex-rep-fade-delayed.visible{opacity:1;transform:none}

/* Responsive (Mobile First Base) */
@media (min-width:768px){
  .hommex-rep-hero-inner{flex-direction:row;align-items:center}
  .hommex-rep-hero-text{flex:1}
  .hommex-rep-hero-visual{flex:1;max-width:440px}
  .hommex-rep-hero-text h1{font-size:2rem}
  .hommex-rep-hero-visual img{max-height:320px}
  .hommex-rep-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hommex-rep-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hommex-rep-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hommex-rep-cta-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .hommex-rep-cta-actions{align-items:flex-end}
}
@media (min-width:1024px){
  .hommex-rep-section-header h2{font-size:1.5rem}
  .hommex-rep-card{padding:1.6rem 1.5rem}
  .hommex-rep-hero-text h1{font-size:2.2rem}
}