/* ==========================================================================
   HostForge — استایل صفحه‌ی اصلی ناحیه‌ی کاربری (index.php)
   بخش‌ها از پنل ماژول مدیریت می‌شوند و توسط هوک رندر می‌شوند.
   همه‌ی قواعد زیر دامنه‌ی .hf-home دارند تا با بقیه‌ی WHMCS تداخل نکنند.
   راست‌چین · وزیرمتن · منطبق با قالب وردپرس هاست‌فورج.
   ========================================================================== */

/* جلوگیری از اسکرول افقی ناشی از تکنیک تمام‌عرض (100vw) */
html,body{overflow-x:hidden}

/* حذف breadcrumb در صفحه‌ی اصلی (این فایل فقط در صفحه‌ی اصلی بارگذاری می‌شود) */
.breadcrumb,#main-body .breadcrumb,.breadcrumb-row{display:none!important}

.hf-home{
  --ink:#12182A; --ink-soft:#3A4256; --muted:#6B7280; --paper:#FFFFFF; --paper-2:#F5F6FA;
  --line:#E5E8F0; --accent:#2D5BFF; --accent-ink:#1E40D8; --teal:#11B886; --gold:#FFB020;
  --blueprint:rgba(45,91,255,.07); --radius:14px; --maxw:1180px;
  font-family:'Vazirmatn',sans-serif; direction:rtl; text-align:right; color:var(--ink);
  /* تمام‌عرض (full-bleed): بخش‌ها لبه‌به‌لبه‌ی صفحه؛ محتوای داخل .wrap همچنان وسط‌چین می‌ماند */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:-16px;
}
.hf-home *{box-sizing:border-box;letter-spacing:normal}
.hf-home a{text-decoration:none;color:inherit}
.hf-home h1,.hf-home h2,.hf-home h3,.hf-home h4{font-family:'Vazirmatn',sans-serif;font-weight:800;line-height:1.45;margin:0}
.hf-home p{margin:0}
.hf-home img{max-width:100%;display:block}
.hf-home .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hf-home .eyebrow{font-size:13px;font-weight:600;color:var(--accent)}
.hf-home .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.18s ease;font-family:inherit}
.hf-home .btn-primary{background:var(--accent);color:#fff}
.hf-home .btn-primary:hover{background:var(--accent-ink);color:#fff}
.hf-home .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.hf-home .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.hf-home .btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.hf-home .btn-light:hover{background:rgba(255,255,255,.2);color:#fff}

/* هیرو */
.hf-home .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hf-home .hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--blueprint) 1px,transparent 1px),linear-gradient(90deg,var(--blueprint) 1px,transparent 1px);background-size:44px 44px;opacity:.6}
.hf-home .hero::after{content:"";position:absolute;width:620px;height:620px;left:-180px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(45,91,255,.35),transparent 60%);filter:blur(10px)}
.hf-home .hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:72px 24px}
.hf-home .hero h1{font-size:46px;margin:16px 0}
.hf-home .hero h1 em{font-style:normal;color:#8fb0ff}
.hf-home .hero p.lead{font-size:18px;color:#C3C9D6;max-width:540px;margin-bottom:28px;line-height:1.85}
.hf-home .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hf-home .hero .micro{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:#9aa3b5}
.hf-home .hero .micro b{color:#fff;font-weight:700}
.hf-home .hero-card{background:#161E33;border:1px solid #283251;border-radius:var(--radius);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.hf-home .hero-card .hc-top{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid #283251}
.hf-home .hero-card .dot{width:11px;height:11px;border-radius:50%}
.hf-home .hero-card .hc-title{margin-inline-start:8px;font-size:12.5px;color:#8b95ad}
.hf-home .hc-body{padding:18px}
.hf-home .hc-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px dashed #283251}
.hf-home .hc-row:last-child{border-bottom:0}
.hf-home .hc-name{display:flex;align-items:center;gap:11px;font-weight:600;color:#eef1f7;font-size:14.5px}
.hf-home .hc-ico{width:34px;height:34px;border-radius:9px;background:#22305a;display:grid;place-items:center;color:#8fb0ff;font-size:15px}
.hf-home .hc-end{text-align:left}
.hf-home .hc-ver{font-size:11.5px;color:#11B886}
.hf-home .hc-badge{font-size:10.5px;color:#9aa3b5;border:1px solid #2f3a5e;padding:2px 7px;border-radius:5px;display:inline-block;margin-top:3px}

/* نوار لوگو */
.hf-home .logos{background:var(--paper-2);border-bottom:1px solid var(--line)}
.hf-home .logos .wrap{display:flex;align-items:center;gap:18px;padding:22px 24px;flex-wrap:wrap;justify-content:center}
.hf-home .logos .label{font-size:13px;color:var(--muted)}
.hf-home .logos .row{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;opacity:.65}
.hf-home .logos .row b{font-weight:700;font-size:18px;color:var(--ink-soft)}

/* پایه‌ی بخش‌ها */
.hf-home section.block{padding:80px 0}
.hf-home .sec-head{max-width:700px;margin-bottom:42px}
.hf-home .sec-head h2{font-size:34px;margin:12px 0}
.hf-home .sec-head p{font-size:17px;color:var(--muted)}
.hf-home .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.hf-home .center-cta{text-align:center;margin-top:40px}

/* گرید ماژول‌ها */
.hf-home .grid-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hf-home .mod{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.18s ease;position:relative}
.hf-home .mod:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(45,91,255,.5)}
.hf-home .mod .head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.hf-home .mod .ico{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,#eaf0ff,#dfe7ff);display:grid;place-items:center;color:var(--accent);font-size:20px}
.hf-home .mod .compat{font-size:11px;color:var(--muted);border:1px solid var(--line);padding:3px 8px;border-radius:6px}
.hf-home .mod h3{font-size:18px;font-weight:700;margin-bottom:7px}
.hf-home .mod p{font-size:14px;color:var(--muted);margin-bottom:18px;min-height:48px}
.hf-home .mod .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px}
.hf-home .mod .price{font-weight:700;font-size:15px}
.hf-home .mod .price small{font-weight:400;color:var(--muted);font-size:12px}
.hf-home .mod .stars{font-size:13px;color:var(--gold)}
.hf-home .mod .stars span{color:var(--muted);margin-inline-start:5px;font-size:12px}
.hf-home .ribbon{position:absolute;top:-9px;right:18px;background:var(--gold);color:#3a2700;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:5px}

/* خدمات */
.hf-home .services{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hf-home .services::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--blueprint) 1px,transparent 1px),linear-gradient(90deg,var(--blueprint) 1px,transparent 1px);background-size:44px 44px;opacity:.5}
.hf-home .services .wrap{position:relative}
.hf-home .services .sec-head h2{color:#fff}
.hf-home .services .sec-head p{color:#aab2c5}
.hf-home .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hf-home .svc{background:#161E33;border:1px solid #283251;border-radius:var(--radius);padding:26px 22px;transition:.18s}
.hf-home .svc:hover{border-color:var(--accent);background:#19223b}
.hf-home .svc .n{font-size:13px;font-weight:700;color:#8fb0ff;margin-bottom:14px}
.hf-home .svc h3{font-size:17px;font-weight:700;margin-bottom:9px;color:#fff}
.hf-home .svc p{font-size:13.5px;color:#9aa3b5}

/* چرا ما */
.hf-home .why .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hf-home .feat-list{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.hf-home .feat{display:flex;gap:16px}
.hf-home .feat .fi{width:42px;height:42px;border-radius:11px;flex-shrink:0;background:var(--paper-2);display:grid;place-items:center;color:var(--accent);font-size:18px;border:1px solid var(--line)}
.hf-home .feat h4{font-size:16px;font-weight:700;margin-bottom:4px}
.hf-home .feat p{font-size:14px;color:var(--muted)}
.hf-home .stat-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.hf-home .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.hf-home .stat .big{font-weight:800;font-size:40px;color:var(--ink);line-height:1}
.hf-home .stat .big span{color:var(--accent)}
.hf-home .stat .lbl{font-size:13.5px;color:var(--muted);margin-top:6px}

/* نظرات */
.hf-home .testi{background:var(--paper-2)}
.hf-home .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hf-home .quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.hf-home .quote .stars{color:var(--gold);font-size:14px;margin-bottom:14px}
.hf-home .quote p{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px;line-height:1.85}
.hf-home .quote .who{display:flex;align-items:center;gap:12px}
.hf-home .quote .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7c3aed);display:block}
.hf-home .quote .who b{font-size:14px;display:block}
.hf-home .quote .who small{font-size:12.5px;color:var(--muted)}

/* باند CTA */
.hf-home .ctaband{background:linear-gradient(120deg,var(--accent),#6d28d9);color:#fff}
.hf-home .ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:56px 24px;flex-wrap:wrap}
.hf-home .ctaband h2{font-size:30px}
.hf-home .ctaband p{color:rgba(255,255,255,.85);margin-top:8px;max-width:540px}

/* واکنش‌گرا */
@media(max-width:980px){
  .hf-home .hero .wrap{grid-template-columns:1fr;padding:56px 24px}
  .hf-home .hero h1{font-size:36px}
  .hf-home .why .wrap{grid-template-columns:1fr;gap:40px}
  .hf-home .grid-mods,.hf-home .testi-grid{grid-template-columns:1fr 1fr}
  .hf-home .svc-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .hf-home .grid-mods,.hf-home .testi-grid,.hf-home .svc-grid,.hf-home .stat-grid{grid-template-columns:1fr}
  .hf-home .hero h1{font-size:30px}
  .hf-home .sec-head h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.hf-home *{transition:none!important}}

/* --- product image/logo (auto-sized) --- */
.hf-home .mod .ico{overflow:hidden}
.hf-home .mod .ico img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}