/*! UpSEO — Home page only (header + hero + feature/guide sections).
    Not loaded on inner tool/profile pages. RTL-first, wide layout. */

:root{
  --up-h-accent:#4f46e5;
  --up-h-accent2:#7c3aed;
  --up-h-ink:#0b0f1a;
  --up-h-surface:#ffffff;
  --up-h-line:rgba(15,23,42,.08);
  --up-h-header-h:76px;
}

.up-skip{position:fixed;top:-60px;inset-inline-start:12px;z-index:100000;background:#111;color:#fff;padding:10px 16px;border-radius:8px;transition:top .15s}
.up-skip:focus{top:12px;color:#fff}

body.up-home{padding-top:var(--up-h-header-h)}

/* ===================== HEADER ===================== */
.up-hh{
  position:fixed;inset-inline:0;top:0;z-index:10000;height:var(--up-h-header-h);
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--up-h-line);
  transition:height .2s ease, box-shadow .2s ease, background .2s ease;
}
.up-hh.scrolled{height:64px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.up-hh__bar{
  max-width:1440px;margin-inline:auto;height:100%;padding-inline:32px;
  display:flex;align-items:center;gap:28px;
}
.up-hh__logo{display:flex;align-items:center;flex:none}
.up-hh__logo img{height:38px;width:auto;display:block}

.up-hh__nav{display:flex;align-items:center;gap:4px;margin-inline-start:8px}
.up-hh__nav a{
  display:inline-flex;align-items:center;padding:9px 14px;border-radius:10px;
  color:var(--up-h-ink);font-weight:700;font-size:14.5px;text-decoration:none;
  transition:background-color .15s, color .15s;
}
.up-hh__nav a:hover,.up-hh__nav a:focus-visible{background:var(--up-primary-soft, #eef2ff);color:var(--up-h-accent)}

.up-hh__actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.up-hh__phone{
  display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;
  color:var(--up-h-ink);text-decoration:none;font-weight:700;font-size:14.5px;
  transition:background-color .15s,color .15s;
}
.up-hh__phone svg{color:var(--up-h-accent)}
.up-hh__phone:hover,.up-hh__phone:focus-visible{background:var(--up-primary-soft,#eef2ff);color:var(--up-h-accent)}

.up-hh__iconbtn{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;border-radius:10px;
  background:transparent;color:var(--up-h-ink);font-weight:700;font-size:13.5px;cursor:pointer;
}
.up-hh__iconbtn:hover{background:#f1f5f9}

.up-hh__login{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;
  background:var(--up-h-accent);color:#fff !important;text-decoration:none;font-weight:800;font-size:14.5px;
  box-shadow:0 6px 16px rgba(79,70,229,.28);transition:background-color .15s,transform .1s,box-shadow .15s;
}
.up-hh__login:hover,.up-hh__login:focus-visible{background:#4338ca;color:#fff;box-shadow:0 10px 22px rgba(79,70,229,.35)}
.up-hh__login:active{transform:translateY(1px)}
.up-hh__login-short{display:none}

.up-acct{position:relative}
.up-acct__btn{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 12px;border:0;border-radius:12px;background:#f1f5f9;cursor:pointer;color:var(--up-h-ink)}
.up-acct__btn:hover{background:#e2e8f0}
.up-acct__avatar{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--up-h-accent),var(--up-h-accent2));color:#fff;font-weight:800;font-size:12.5px;flex:none;
}
.up-acct__name{font-weight:700;font-size:13.5px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-acct__menu{min-width:230px}
.up-acct__credit{display:flex;flex-direction:column;gap:2px;padding:8px 12px 10px;font-size:12px;color:var(--up-muted,#64748b)}
.up-acct__credit strong{font-size:15px;color:var(--up-h-ink)}
.up-acct__menu .is-danger{color:var(--up-danger,#dc2626)}

.burger{display:none;width:38px;height:38px;border:0;background:transparent;border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger:hover{background:#f1f5f9}
.burger span{display:block;width:20px;height:2px;background:var(--up-h-ink);border-radius:2px;transition:transform .25s,opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.up-hh__panel{display:none}

@media (max-width:1150px){
  .up-hh__nav{display:none}
  .burger{display:flex}
  .up-hh__login-long{display:none}
  .up-hh__login-short{display:inline}
  .up-hh__login{padding:0 14px}
  .up-hh__bar{padding-inline:16px;gap:10px}
  .up-hh__phone span{display:none}
  .up-hh__phone{padding:9px}
  .up-acct__name{display:none}

  .up-hh__panel{
    position:fixed;top:var(--up-h-header-h);inset-inline:0;bottom:0;z-index:9999;
    background:#fff;display:flex;flex-direction:column;gap:2px;padding:14px;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;overflow-y:auto;
  }
  .up-hh__panel.active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .up-hh__panel a{padding:14px 12px;border-radius:10px;color:var(--up-h-ink);text-decoration:none;font-weight:700;font-size:15px;border-bottom:1px solid var(--up-h-line)}
  .up-hh__panel a:last-child{border-bottom:0}
  .up-hh__panel a:active{background:#f1f5f9}
  .up-hh__panel-phone{margin-top:10px;text-align:center;background:var(--up-primary-soft,#eef2ff);color:var(--up-h-accent) !important}
}
@media (max-width:420px){ .up-hh__bar{gap:6px} .up-hh__logo img{height:32px} }

/* ===================== HERO ===================== */
.up-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 12% 15%, rgba(124,58,237,.14), transparent 55%),
    radial-gradient(circle at 88% 82%, rgba(6,182,212,.14), transparent 55%),
    linear-gradient(180deg,#060814 0%,#0b1224 100%);
  color:#fff;padding:56px 0 64px;
}
.up-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(148,163,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,255,.06) 1px,transparent 1px);
  background-size:32px 32px;
}
.up-hero__inner{position:relative;max-width:1440px;margin-inline:auto;padding-inline:32px}
.up-hero__badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:rgba(124,58,237,.16);border:1px solid rgba(124,58,237,.35);color:#c4b5fd;
  font-size:13px;font-weight:700;margin-bottom:20px;
}
.up-hero__badge svg{width:15px;height:15px}
.up-hero h1{
  font-size:clamp(28px,3.6vw,44px);line-height:1.35;font-family:var(--up-font-strong);font-weight:800;
  margin:0 0 16px;max-width:900px;
  background:linear-gradient(90deg,#fff,#c7d2fe 60%,#a5f3fc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.up-hero__sub{font-size:17px;line-height:2;color:#cbd5e1;max-width:760px;margin:0 0 28px}
.up-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px}
.up-hero__cta{
  display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 26px;border-radius:14px;
  font-weight:800;font-size:15.5px;text-decoration:none;transition:transform .15s,box-shadow .15s;
}
.up-hero__cta--main{background:linear-gradient(90deg,var(--up-h-accent),var(--up-h-accent2));color:#fff;box-shadow:0 14px 34px rgba(124,58,237,.35)}
.up-hero__cta--main:hover{transform:translateY(-2px);color:#fff;box-shadow:0 18px 40px rgba(124,58,237,.45)}
.up-hero__cta--ghost{background:rgba(255,255,255,.06);color:#e2e8f0;border:1px solid rgba(255,255,255,.18)}
.up-hero__cta--ghost:hover{background:rgba(255,255,255,.12);color:#fff}

.up-hero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:920px}
.up-hero__stat{padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.up-hero__stat b{display:block;font-size:22px;font-family:var(--up-font-strong);background:linear-gradient(90deg,#a5f3fc,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.up-hero__stat span{display:block;margin-top:4px;font-size:12.5px;color:#94a3b8}

@media (max-width:900px){ .up-hero__stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .up-hero{padding:38px 0 40px} .up-hero__inner{padding-inline:16px} .up-hero__sub{font-size:15px} }

/* ===================== SECTION HEADS / FEATURE GRID ===================== */
.up-section{max-width:1440px;margin-inline:auto;padding:56px 32px}
.up-section__head{max-width:760px;margin-bottom:36px}
.up-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--up-h-accent);font-weight:800;font-size:13px;margin-bottom:10px}
.up-eyebrow::before{content:'';width:20px;height:2px;background:var(--up-h-accent);border-radius:2px}
.up-section__head h2{font-size:clamp(21px,2.4vw,28px);margin:0 0 10px;font-family:var(--up-font-strong)}
.up-section__head p{color:var(--up-muted,#64748b);font-size:15.5px;line-height:1.95;margin:0}

.seoFeatureBoxes{
  /* عنصر واقعی هر دو کلاس row و seoFeatureBoxes را دارد؛ به‌جای بازنویسی
     display با grid (که با col-md-3/col-sm-6 فرزندان تداخل پیدا می‌کرد و
     ستون‌ها را بسیار باریک می‌کرد)، فقط روی همان چیدمان row/col موجود می‌نشینیم. */
  margin-top:8px;
}
.seoFeatureBoxes > [class*="col-"]{padding-bottom:18px}
.seoFeatureBox{
  background:#fff;border:1px solid var(--up-h-line);border-radius:18px;padding:26px 20px;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.seoFeatureBox:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(15,23,42,.08);border-color:transparent}
.seoFeatureIcon{
  width:56px;height:56px;margin:0 auto 16px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--up-primary-soft,#eef2ff),#f5f3ff);color:var(--up-h-accent);
}
.seoFeatureIcon svg{width:26px;height:26px}
.seoFeatureTitle{font-size:15.5px;font-weight:800;margin:0 0 8px;color:var(--up-h-ink)}
.seoFeatureText{font-size:13.5px;line-height:1.9;color:var(--up-muted,#64748b);margin:0}


/* ===================== TOOLS GRID ===================== */
.up-tools-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:22px}
.up-tools-search{flex:1 1 280px;max-width:420px}
.upseo-toolgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.upseo-toolgrid .thumbnail{
  margin:0;padding:0;border-radius:16px;overflow:hidden;background:#fff;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.upseo-toolgrid .thumbnail:hover{transform:translateY(-3px)}
.upseo-toolgrid .seotoollink{display:block;padding:22px 14px;text-align:center;color:var(--up-h-ink);text-decoration:none}
.upseo-toolgrid .seotoollink img{width:44px;height:44px;object-fit:contain;margin:0 auto 12px;display:block}
.upseo-toolgrid .caption{font-size:13.5px;font-weight:700;line-height:1.6;color:var(--up-h-ink)}
@media (max-width:1100px){.upseo-toolgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.upseo-toolgrid{grid-template-columns:repeat(2,1fr)}}

/* ===================== ARTICLE / GUIDE (existing markup, restyled) ===================== */
.seoContentSection{margin-top:8px}
.seoContentMainTitle{font-size:22px;font-weight:800;color:var(--up-h-ink);margin:0 0 26px}
.seoContentBox{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--up-h-line)}
.seoContentBox:last-of-type{border-bottom:0}
.seoContentIcon{flex:none;width:46px;height:46px;border-radius:12px;background:var(--up-primary-soft,#eef2ff);color:var(--up-h-accent);display:flex;align-items:center;justify-content:center}
.seoContentIcon svg{width:24px;height:24px}
.seoContentBody h3{font-size:16.5px;font-weight:800;color:var(--up-h-ink);margin:2px 0 10px}
.seoContentBody p{font-size:14px;line-height:2;color:#55655f;margin:0 0 10px}
.seoContentBody p:last-child{margin-bottom:0}
.seoFaqItem{margin:0 0 16px}
.seoFaqItem h4{font-size:14.5px;font-weight:800;color:var(--up-h-ink);margin:0 0 6px}
.seoFaqItem p{margin:0;color:#55655f;line-height:1.9}
@media (max-width:767px){.seoContentBox{flex-direction:column}.seoContentIcon{margin-bottom:4px}}

@media (max-width:900px){ .up-section{padding:40px 16px} }