/* ==========================================================================
   دیتاهتلینگ خلیج فارس — theme customisations
   1. Design tokens
   2. Base typography
   3. Scoped RTL corrections
   4. Shared UI primitives (.dp-*)
   5. Marketing header + drawer
   6. Homepage sections
   7. Footer
   8. Responsive
   9. WHMCS client area alignment
   ========================================================================== */

/* ------------------------------- 1. Tokens ------------------------------- */
:root {
    --dp-navy: #071B3D;
    --dp-navy-deep: #061633;
    --dp-blue: #3B82F6;
    --dp-blue-strong: #2563EB;
    --dp-blue-soft: #EFF6FF;
    --dp-blue-border: #BFDBFE;
    --dp-cyan: #00D4FF;

    --dp-white: #FFFFFF;
    --dp-bg: #F8FAFC;
    --dp-text: #1E293B;
    --dp-text-2: #64748B;
    --dp-muted: #94A3B8;
    --dp-border: #E2E8F0;
    --dp-on-dark: #CBD5E1;

    --dp-r-sm: 8px;
    --dp-r-md: 12px;
    --dp-r-lg: 16px;
    --dp-r-xl: 20px;

    --dp-shadow: 0 10px 35px rgba(15, 23, 42, .06);
    --dp-shadow-md: 0 14px 40px rgba(15, 23, 42, .09);
    --dp-shadow-lg: 0 22px 55px rgba(15, 23, 42, .14);

    --dp-container: 1200px;
    --dp-gutter: 32px;
    --dp-section-y: 104px;
    --dp-header-h: 72px;

    --dp-font: "Vazirmatn", "IRANYekan", Tahoma, sans-serif;
    --dp-ease: 200ms ease-out;
}

/* --------------------------- 2. Base typography -------------------------- */
body {
    font-family: var(--dp-font);
    color: var(--dp-text);
    background: var(--dp-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, .form-control, .navbar, input, select, textarea, button {
    font-family: var(--dp-font);
}

html {
    scroll-behavior: smooth;
}

.dp-homepage-body {
    background: var(--dp-bg);
}

.dp-skip-link {
    position: absolute;
    inset-inline-start: 16px;
    top: -60px;
    z-index: 1200;
    padding: 10px 18px;
    border-radius: var(--dp-r-sm);
    background: var(--dp-blue);
    color: #fff;
    transition: top var(--dp-ease);
}

.dp-skip-link:focus {
    top: 12px;
    color: #fff;
}

.dp-system-alerts {
    padding-top: 24px;
}

.dp-system-alerts:empty {
    padding: 0;
}

/* ----------------------- 3. Scoped RTL corrections ----------------------- */
/* Bootstrap 4 ships LTR-only utilities. These fixes are deliberately scoped
   to the shared chrome instead of rewriting Bootstrap globally. */
[dir="rtl"] .header .mr-auto,
[dir="rtl"] .master-breadcrumb .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="rtl"] .header .ml-auto,
[dir="rtl"] .master-breadcrumb .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] .header .navbar-brand.mr-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

[dir="rtl"] .header .navbar-nav.toolbar .ml-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

[dir="rtl"] .dp-nav-spacing {
    padding-inline-end: 1.5rem;
}

[dir="rtl"] .dropdown-menu-right {
    right: auto;
    left: 0;
}

[dir="rtl"] .sidebar .float-right,
[dir="rtl"] .card-sidebar .float-right {
    float: left !important;
}

[dir="rtl"] .master-breadcrumb .breadcrumb {
    padding-inline-start: 0;
}

[dir="rtl"] .sidebar-menu-item-wrapper {
    text-align: start;
}

/* ------------------------ 4. Shared UI primitives ------------------------ */
.dp-container {
    width: min(100% - 40px, var(--dp-container));
    margin-inline: auto;
}

.whmcs-premium-homepage {
    display: block;
    overflow-x: hidden;
}

.whmcs-premium-homepage a {
    text-decoration: none;
}

.dp-section {
    padding-block: var(--dp-section-y);
}

.dp-section--tight {
    padding-block: 56px;
}

.dp-section--alt {
    background: var(--dp-white);
    border-block: 1px solid var(--dp-border);
}

.dp-section-head {
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 48px;
    text-align: center;
}

.dp-section-head__title {
    margin: 0 0 14px;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--dp-text);
}

.dp-section-head__title--start {
    text-align: start;
}

.dp-section-head__sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: var(--dp-text-2);
}

.dp-eyebrow {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--dp-cyan);
}

/* Buttons */
.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding-inline: 22px;
    border: 1px solid transparent;
    border-radius: var(--dp-r-sm);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dp-ease), color var(--dp-ease),
                border-color var(--dp-ease), transform var(--dp-ease),
                box-shadow var(--dp-ease);
}

.dp-btn i {
    font-size: 13px;
}

.dp-btn--sm { height: 40px; padding-inline: 18px; font-size: 14px; }
.dp-btn--lg { height: 54px; padding-inline: 30px; font-size: 16px; }
.dp-btn--block { width: 100%; }

.dp-btn--primary {
    background: var(--dp-blue);
    color: #fff;
    box-shadow: 0 8px 22px rgba(59, 130, 246, .28);
}

.dp-btn--primary:hover,
.dp-btn--primary:focus {
    background: var(--dp-blue-strong);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(59, 130, 246, .34);
}

.dp-btn--outline {
    background: #fff;
    border-color: var(--dp-border);
    color: var(--dp-text);
}

.dp-btn--outline:hover,
.dp-btn--outline:focus {
    border-color: var(--dp-blue);
    color: var(--dp-blue);
    transform: translateY(-1px);
}

.dp-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.dp-btn--ghost:hover,
.dp-btn--ghost:focus {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.dp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dp-blue);
    transition: gap var(--dp-ease), color var(--dp-ease);
}

.dp-link:hover {
    color: var(--dp-blue-strong);
    gap: 12px;
}

.dp-link i { font-size: 12px; }

.dp-input {
    height: 46px;
    padding-inline: 16px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-md);
    background: #fff;
    font-size: 15px;
    color: var(--dp-text);
}

.whmcs-premium-homepage :focus-visible,
.dp-header :focus-visible,
.dp-footer :focus-visible,
.dp-drawer :focus-visible {
    outline: 2px solid var(--dp-cyan);
    outline-offset: 2px;
}

/* ------------------------ 5. Marketing header ---------------------------- */
/* ------------------------ 5. Marketing header ---------------------------- */
.dp-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    isolation: isolate;
    background: rgba(7, 27, 61, .88);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: blur(16px);
    transition: background var(--dp-ease), box-shadow var(--dp-ease);
}

.dp-header__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--dp-header-bg);
    background-size: cover;
    background-position: center;
    opacity: .28;
    pointer-events: none;
}

.dp-header__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 27, 61, .82), rgba(6, 22, 51, .92));
}

.dp-header.is-scrolled {
    background: rgba(6, 22, 51, .97);
    box-shadow: 0 6px 24px rgba(2, 8, 20, .35);
}

.dp-header.is-scrolled .dp-header__bg {
    opacity: .16;
}

.dp-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: var(--dp-header-h);
}

.dp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.dp-brand__logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, .35));
}

.dp-brand__name {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}

.header .brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-inline-end: 8px;
    vertical-align: middle;
}

.header .navbar-brand {
    display: inline-flex;
    align-items: center;
}
/* ---------------------------- 6. Hero ----------------------------------- */
.dp-hero {
    position: relative;
    padding-top: 92px;
    padding-bottom: 40px;
    background: linear-gradient(180deg, var(--dp-navy), var(--dp-navy-deep));
    overflow: hidden;
}

.dp-hero__media,
.dp-cta__media {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Source artwork places the servers on the right; mirroring keeps them on
       the visual (left) side so the Persian copy sits on clean background. */
    transform: scaleX(-1);
}

.dp-hero__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(620px 420px at 18% 55%, rgba(0, 212, 255, .16), transparent 70%),
        linear-gradient(to left, rgba(7, 27, 61, .96) 0%, rgba(7, 27, 61, .78) 42%, rgba(7, 27, 61, .35) 100%);
}

.dp-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    min-height: 560px;
}

.dp-hero__content { max-width: 540px; }

.dp-hero__title {
    margin: 0 0 22px;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.dp-hero__title-accent { color: #DCEAFF; }

.dp-hero__desc {
    max-width: 480px;
    margin: 0 0 30px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--dp-on-dark);
}

.dp-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.dp-hero__visual {
    position: relative;
    min-height: 420px;
}

.dp-hero__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--dp-r-md);
    background: rgba(9, 32, 70, .72);
    backdrop-filter: blur(8px);
    color: #fff;
}

.dp-hero__chip--uptime { top: 42px; inset-inline-start: 6%; }
.dp-hero__chip--speed { bottom: 54px; inset-inline-start: 26%; }

.dp-hero__chip-value { font-size: 18px; font-weight: 800; }
.dp-hero__chip-label { font-size: 13px; color: var(--dp-on-dark); }
.dp-hero__chip i { color: var(--dp-cyan); }

/* Hero trust row */
.dp-hero__trust {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 44px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    list-style: none;
}

.dp-hero__trust-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline: 20px;
    border-inline-start: 1px solid rgba(255, 255, 255, .1);
}

.dp-hero__trust-item:first-child { border-inline-start: 0; padding-inline-start: 0; }

.dp-hero__trust-item i {
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--dp-cyan);
}

.dp-hero__trust-value { font-size: 16px; font-weight: 800; color: #fff; }
.dp-hero__trust-label { font-size: 13px; color: var(--dp-muted); }

/* Social proof + tech row */
.dp-proof { padding-top: 0; }

.dp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: -40px 0 0;
    padding: 34px 10px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-xl);
    background: #fff;
    box-shadow: var(--dp-shadow);
    list-style: none;
}

.dp-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-inline: 18px;
    border-inline-start: 1px solid var(--dp-border);
    text-align: center;
}

.dp-stats__item:first-child { border-inline-start: 0; }

.dp-stats__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: var(--dp-blue-soft);
    color: var(--dp-blue);
    font-size: 15px;
}

.dp-stats__value { font-size: 24px; font-weight: 800; color: var(--dp-text); }
.dp-stats__label { font-size: 14px; color: var(--dp-text-2); }

.dp-tech__title {
    margin: 48px 0 18px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--dp-muted);
}

.dp-tech {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dp-tech__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dp-muted);
    transition: color var(--dp-ease);
}

.dp-tech__item:hover { color: var(--dp-text-2); }
.dp-tech__item i { font-size: 19px; }

/* ---------------------------- Domain search ----------------------------- */
.dp-domain-form { margin-top: 6px; }

.dp-domain-form__box {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 600px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: var(--dp-r-md);
    background: #fff;
    box-shadow: 0 14px 40px rgba(2, 8, 20, .28);
    transition: border-color var(--dp-ease), box-shadow var(--dp-ease);
}

.dp-domain-form__box.is-focused {
    border-color: var(--dp-blue);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .18);
}

.dp-domain-form__box.has-error { border-color: #DC2626; }

.dp-domain-form__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding-inline: 14px;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: var(--dp-text);
}

.dp-domain-form__input:focus { outline: none; }
.dp-domain-form__input::placeholder { color: var(--dp-muted); }

.dp-domain-form__tld {
    flex: 0 0 auto;
    height: 46px;
    padding-inline: 12px;
    border: 0;
    border-inline-start: 1px solid var(--dp-border);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--dp-text-2);
    cursor: pointer;
}

.dp-domain-form__submit { flex: 0 0 auto; height: 46px; }

.dp-domain-form__msg {
    margin: 10px 0 0;
    font-size: 14px;
    color: #FCA5A5;
}

.dp-domain-form--light .dp-domain-form__box {
    border-color: var(--dp-border);
    box-shadow: none;
}

.dp-domain-form--light .dp-domain-form__msg { color: #DC2626; }

/* ---------------------------- Pricing ----------------------------------- */
.dp-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 44px;
}

.dp-toggle {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--dp-border);
    border-radius: 999px;
    background: #fff;
}

.dp-toggle__btn {
    height: 38px;
    padding-inline: 24px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--dp-text-2);
    cursor: pointer;
    transition: background var(--dp-ease), color var(--dp-ease);
}

.dp-toggle__btn.is-active {
    background: var(--dp-blue);
    color: #fff;
}

.dp-toggle__badge {
    padding: 6px 12px;
    border-radius: 999px;
    background: #DCFCE7;
    font-size: 13px;
    font-weight: 700;
    color: #15803D;
}

.dp-plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 20px;
}

.dp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 24px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-lg);
    background: #fff;
    box-shadow: var(--dp-shadow);
    transition: transform var(--dp-ease), box-shadow var(--dp-ease);
}

.dp-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--dp-shadow-md);
}

.dp-plan--featured {
    border-color: var(--dp-blue);
    box-shadow: 0 18px 48px rgba(59, 130, 246, .18);
    transform: translateY(-10px);
}

.dp-plan--featured:hover { transform: translateY(-14px); }

.dp-plan__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--dp-blue);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.dp-plan__name {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 800;
    color: var(--dp-text);
}

.dp-plan__desc {
    min-height: 48px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--dp-text-2);
}

.dp-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--dp-border);
}

.dp-plan__amount { font-size: 30px; font-weight: 800; color: var(--dp-navy); }
.dp-plan__currency { font-size: 15px; font-weight: 700; color: var(--dp-navy); }
.dp-plan__period { width: 100%; font-size: 13px; color: var(--dp-muted); }

.dp-plan__features {
    flex: 1 1 auto;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.dp-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-block: 8px;
    font-size: 14px;
    color: var(--dp-text);
}

.dp-plan__features i {
    margin-top: 4px;
    font-size: 11px;
    color: var(--dp-blue);
}

/* ---------------------------- Features ---------------------------------- */
.dp-features {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.dp-feature {
    padding: 24px 18px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-lg);
    background: #fff;
    text-align: start;
    transition: transform var(--dp-ease), box-shadow var(--dp-ease),
                border-color var(--dp-ease);
}

.dp-feature:hover {
    transform: translateY(-3px);
    border-color: var(--dp-blue-border);
    box-shadow: var(--dp-shadow);
}

.dp-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: var(--dp-r-md);
    background: var(--dp-blue-soft);
    color: var(--dp-blue);
    font-size: 16px;
}

.dp-feature__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dp-text);
}

.dp-feature__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: var(--dp-text-2);
}

/* -------------------------- Domain promotion ---------------------------- */
.dp-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
    gap: 40px;
    padding: 44px;
    border: 1px solid var(--dp-blue-border);
    border-radius: var(--dp-r-xl);
    background: var(--dp-blue-soft);
}

.dp-promo__title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 800;
    color: var(--dp-text);
}

.dp-promo__text {
    margin: 0 0 22px;
    font-size: 15px;
    color: var(--dp-text-2);
}

.dp-promo .dp-domain-form { margin-bottom: 18px; }

.dp-promo__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dp-promo__globe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #fff;
    color: var(--dp-blue);
    font-size: 44px;
    box-shadow: var(--dp-shadow);
}

.dp-promo__www {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--dp-blue);
}

/* ------------------------- Dashboard showcase --------------------------- */
.dp-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 56px;
}

.dp-showcase__sub {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--dp-text-2);
}

.dp-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.dp-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--dp-text);
}

.dp-benefits i { font-size: 11px; color: var(--dp-blue); }

.dp-panel {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-lg);
    background: #fff;
    box-shadow: var(--dp-shadow);
    overflow: hidden;
}

.dp-panel__bar {
    display: flex;
    gap: 6px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--dp-border);
    background: var(--dp-bg);
}

.dp-panel__bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dp-border);
}

.dp-panel__body { padding: 22px; }

.dp-panel__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.dp-panel__tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: var(--dp-r-md);
    background: var(--dp-blue-soft);
}

.dp-panel__tile-label { font-size: 13px; color: var(--dp-text-2); }
.dp-panel__tile-value { font-size: 22px; font-weight: 800; color: var(--dp-navy); }

.dp-panel__meters { display: grid; gap: 14px; margin-bottom: 22px; }

.dp-panel__meter-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--dp-text-2);
}

.dp-panel__track {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--dp-border);
    overflow: hidden;
}

.dp-panel__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--dp-blue);
}

.dp-panel__caption {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dp-muted);
}

.dp-panel__log { margin: 0; padding: 0; list-style: none; }

.dp-panel__log li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 9px;
    border-top: 1px solid var(--dp-border);
    font-size: 13px;
    color: var(--dp-text);
}

.dp-panel__log i { font-size: 12px; color: var(--dp-blue); }

/* --------------------------- Testimonials ------------------------------- */
/* --------------------------- Testimonials ------------------------------- */
.dp-testimonials-slider {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.dp-testimonials-track {
    display: flex;
    gap: 22px;
    width: max-content;
    animation: dp-testimonials-marquee 40s linear infinite;
}

.dp-testimonials-slider:hover .dp-testimonials-track,
.dp-testimonials-slider.is-paused .dp-testimonials-track {
    animation-play-state: paused;
}

@keyframes dp-testimonials-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); } /* RTL: track moves toward the start */
}

.dp-testimonial {
    display: flex;
    flex-direction: column;
    flex: 0 0 min(340px, 78vw);
    width: min(340px, 78vw);
    margin: 0;
    padding: 28px;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-lg);
    background: #fff;
    box-shadow: var(--dp-shadow);
}

.dp-testimonial__stars {
    margin-bottom: 16px;
    font-size: 13px;
    color: #22C55E;
    letter-spacing: 2px;
}

.dp-testimonial__quote {
    flex: 1 1 auto;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.95;
    color: var(--dp-text);
}

.dp-testimonial__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--dp-border);
}

.dp-testimonial__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--dp-blue-soft);
    font-size: 16px;
    font-weight: 800;
    color: var(--dp-blue);
}

.dp-testimonial__name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--dp-text);
}

.dp-testimonial__role {
    display: block;
    font-size: 13px;
    color: var(--dp-muted);
}

@media (prefers-reduced-motion: reduce) {
    .dp-testimonials-track {
        animation: none;
        flex-wrap: wrap;
        width: min(100% - 40px, var(--dp-container));
        margin-inline: auto;
        justify-content: center;
    }
}/* ------------------------------- FAQ ------------------------------------ */
.dp-faq {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 22px;
    align-items: start;
}

.dp-faq__item {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-md);
    background: var(--dp-bg);
    transition: border-color var(--dp-ease), background var(--dp-ease);
}

.dp-faq__item.is-open {
    border-color: var(--dp-blue-border);
    background: #fff;
}

.dp-faq__heading { margin: 0; }

.dp-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: start;
    color: var(--dp-text);
    cursor: pointer;
}

.dp-faq__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--dp-border);
    font-size: 11px;
    color: var(--dp-blue);
    transition: background var(--dp-ease), color var(--dp-ease);
}

.dp-faq__item.is-open .dp-faq__icon {
    background: var(--dp-blue);
    border-color: var(--dp-blue);
    color: #fff;
}

.dp-faq__a {
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 240ms ease-out, visibility 240ms ease-out;
}

.dp-faq__item.is-open .dp-faq__a { visibility: visible; }

.dp-faq__a p {
    margin: 0;
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.95;
    color: var(--dp-text-2);
}

/* ----------------------------- Final CTA -------------------------------- */
.dp-cta {
    position: relative;
    padding-block: 76px;
    background: linear-gradient(180deg, var(--dp-navy), var(--dp-navy-deep));
    overflow: hidden;
}

.dp-cta__media { opacity: .35; }

.dp-cta__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.dp-cta__title {
    margin: 0 0 10px;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
}

.dp-cta__text {
    max-width: 520px;
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: var(--dp-on-dark);
}

.dp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ------------------------------ 7. Footer ------------------------------- */
.dp-footer {
    padding-top: 64px;
    background: var(--dp-navy);
    color: var(--dp-on-dark);
}

.dp-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr);
    gap: 32px;
    padding-bottom: 48px;
}

.dp-footer__title {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.dp-footer__list { margin: 0; padding: 0; list-style: none; }

.dp-footer__list li { margin-bottom: 11px; }

.dp-footer__list a {
    font-size: 14px;
    color: var(--dp-on-dark);
    transition: color var(--dp-ease);
}

.dp-footer__list a:hover { color: #fff; }

.dp-footer__text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--dp-muted);
}

.dp-newsletter {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 340px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--dp-r-md);
    background: rgba(255, 255, 255, .05);
}

.dp-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding-inline: 12px;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: #fff;
}

.dp-newsletter__input:focus { outline: none; }
.dp-newsletter__input::placeholder { color: var(--dp-muted); }

.dp-newsletter__submit {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--dp-r-sm);
    background: var(--dp-blue);
    color: #fff;
    cursor: pointer;
    transition: background var(--dp-ease);
}

.dp-newsletter__submit:hover { background: var(--dp-blue-strong); }

.dp-newsletter__msg {
    margin: 10px 0 0;
    font-size: 13px;
    color: #86EFAC;
}

.dp-newsletter__msg.is-error { color: #FCA5A5; }

.dp-social {
    display: flex;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.dp-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    color: var(--dp-on-dark);
    font-size: 14px;
    transition: background var(--dp-ease), color var(--dp-ease),
                border-color var(--dp-ease);
}

.dp-social a:hover {
    background: var(--dp-blue);
    border-color: var(--dp-blue);
    color: #fff;
}

.dp-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-block: 22px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.dp-footer__copy {
    margin: 0;
    font-size: 13px;
    color: var(--dp-muted);
}

.dp-footer__meta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dp-footer__meta a {
    font-size: 13px;
    color: var(--dp-muted);
    transition: color var(--dp-ease);
}

.dp-footer__meta a:hover { color: #fff; }

.dp-footer__locale {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: var(--dp-muted);
    cursor: pointer;
}

.dp-footer__locale:hover { color: #fff; }

/* ---------------------------- 8. Responsive ----------------------------- */
@media (max-width: 1199px) {
    :root { --dp-section-y: 88px; }

    .dp-header__burger { display: inline-flex; }
    .dp-nav { display: none; }
    .dp-header__cta { display: none; }
    .dp-header__inner { justify-content: space-between; }
    .dp-header__actions { margin-inline-start: auto; }

    .dp-hero { padding-top: 64px; }
    .dp-hero__title { font-size: 46px; }
    .dp-hero__inner { min-height: 0; gap: 30px; }
    .dp-hero__visual { min-height: 320px; }

    .dp-plans { grid-template-columns: repeat(2, 1fr); }
    .dp-plan--featured { transform: none; }
    .dp-plan--featured:hover { transform: translateY(-4px); }

    .dp-features { grid-template-columns: repeat(3, 1fr); }
    .dp-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    .dp-hero__inner { grid-template-columns: 1fr; }
    .dp-hero__content { max-width: none; order: 1; }
    .dp-hero__visual { order: 2; min-height: 240px; }

    .dp-hero__trust { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .dp-hero__trust-item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }

    .dp-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
    .dp-stats__item:nth-child(odd) { border-inline-start: 0; }

    .dp-promo { grid-template-columns: 1fr; }
    .dp-promo__visual { order: -1; align-items: flex-start; }

    .dp-showcase { grid-template-columns: 1fr; gap: 36px; }
    .dp-testimonials { grid-template-columns: 1fr; }
    .dp-faq { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    :root {
        --dp-section-y: 64px;
        --dp-gutter: 20px;
    }

    .dp-container { width: calc(100% - 40px); }

    .dp-brand__name { font-size: 15px; }

    .dp-hero { padding-top: 48px; }
    .dp-hero__title { font-size: 34px; }
    .dp-hero__desc { font-size: 15px; }

    .dp-hero__media { background-position: 32% center; opacity: .55; }
    .dp-hero__veil {
        background: linear-gradient(180deg, rgba(7, 27, 61, .94), rgba(6, 22, 51, .9));
    }

    .dp-hero__visual { min-height: 200px; }
    .dp-hero__chip--uptime { top: 12px; }
    .dp-hero__chip--speed { bottom: 12px; inset-inline-start: 8%; }

    .dp-domain-form__box { flex-wrap: wrap; }
    .dp-domain-form__input { flex: 1 1 100%; }
    .dp-domain-form__tld { flex: 1 1 auto; border-inline-start: 0; }
    .dp-domain-form__submit { flex: 1 1 100%; }

    .dp-hero__ctas .dp-btn { flex: 1 1 100%; }

    .dp-section-head__title { font-size: 27px; }
    .dp-plans { grid-template-columns: 1fr; }
    .dp-features { grid-template-columns: repeat(2, 1fr); }
    .dp-promo { padding: 26px; }
    .dp-promo__title { font-size: 23px; }
    .dp-benefits { grid-template-columns: 1fr; }
    .dp-cta__title { font-size: 27px; }
    .dp-cta__actions .dp-btn { flex: 1 1 100%; }
    .dp-footer__grid { grid-template-columns: 1fr; gap: 26px; }
    .dp-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .whmcs-premium-homepage *,
    .dp-header *,
    .dp-drawer * {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* --------------------- 9. WHMCS client area alignment -------------------- */
/* Keeps the logged-in area consistent with the new light design system. */
.tiles { margin-top: 24px; }

.tiles .tile {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-lg);
    background: #fff;
    box-shadow: var(--dp-shadow);
    transition: transform var(--dp-ease), box-shadow var(--dp-ease);
}

.tiles .tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--dp-shadow-md);
}

.tiles .tile i { color: var(--dp-blue); }
.tiles .tile .stat { font-weight: 800; color: var(--dp-text); }
.tiles .tile .title { color: var(--dp-text-2); }

.card,
.client-home-cards .card,
.card-sidebar {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-r-lg);
    background: #fff;
    box-shadow: var(--dp-shadow);
}

.card-header,
.client-home-cards .card-header {
    border-bottom: 1px solid var(--dp-border);
    background: var(--dp-bg);
    color: var(--dp-text);
}

.card-title { font-weight: 700; }

.list-group-item {
    background: #fff;
    border-color: var(--dp-border);
    color: var(--dp-text);
}

.list-group-item-action:hover { background: var(--dp-blue-soft); }

.badge-info,
.card-sidebar .badge { background: var(--dp-blue); color: #fff; }

.btn-primary {
    background: var(--dp-blue);
    border-color: var(--dp-blue);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--dp-blue-strong);
    border-color: var(--dp-blue-strong);
}

.header .brand-name { color: #fff; font-size: 20px; font-weight: 800; }
.header,
.header .navbar,
.header .main-navbar-wrapper { background: var(--dp-navy); }
.header .navbar-nav .nav-link,
.header .navbar-nav a { color: rgba(255, 255, 255, .88); }
.header .navbar-nav a:hover { color: #7FB4FF; }


/* ============================================================
   DATaHOTELING — MARKETING HEADER FIX
   RTL / WHMCS Twenty-One
   ============================================================ */

.dp-header {
    width: 100%;
    min-height: var(--dp-header-h);
    direction: rtl;
}

.dp-header__inner {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    min-height: var(--dp-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Brand */
.dp-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    text-decoration: none !important;
    white-space: nowrap;
}

.dp-brand__logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: block;
    object-fit: contain;
}

.dp-brand__name {
    display: inline-block;
    color: #fff !important;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

/* Main navigation */
.dp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.dp-nav__list {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.dp-nav__item {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.dp-nav__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 14px !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    border-radius: 10px;
    white-space: nowrap;
    transition:
        background .2s ease,
        color .2s ease;
}

.dp-nav__link:hover,
.dp-nav__link:focus {
    color: #fff !important;
    background: rgba(255,255,255,.09);
    text-decoration: none !important;
}

/* Header actions */
.dp-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    gap: 8px;
    direction: rtl;
}

.dp-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,.9) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.dp-icon-btn:hover,
.dp-icon-btn:focus {
    color: #fff !important;
    background: rgba(255,255,255,.09);
    text-decoration: none !important;
}

.dp-icon-btn__badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #00d4ff;
    color: #061633;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
}

/* Login / client area button */
.dp-header__cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Search */
.dp-header__search {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(6,22,51,.96);
}

.dp-header__search .dp-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    padding-block: 14px;
}

.dp-header__search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.dp-header__search-form .dp-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Mobile burger */
.dp-header__burger {
    display: none !important;
}

/* Never let old WHMCS header styles affect marketing header */
.dp-header .navbar,
.dp-header .navbar-nav,
.dp-header .navbar-brand,
.dp-header .toolbar {
    all: unset;
}

.dp-header .navbar-nav,
.dp-header .toolbar {
    display: flex;
}

/* Logged-in WHMCS topbar stays separate from marketing header */
.header:not(.dp-header) {
    direction: rtl;
}

/* ============================================================
   RESPONSIVE HEADER
   ============================================================ */

@media (max-width: 1199px) {

    .dp-header__inner {
        width: min(100% - 32px, 1000px);
    }

    .dp-nav {
        display: none !important;
    }

    .dp-header__burger {
        display: inline-flex !important;
    }

    .dp-header__cta {
        display: none !important;
    }

    .dp-header__actions {
        margin-inline-start: auto;
    }
}

@media (max-width: 575px) {

    .dp-header__inner {
        width: calc(100% - 24px);
        min-height: 64px;
        gap: 8px;
    }

    .dp-brand__logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .dp-brand__name {
        font-size: 14px;
    }

    .dp-header__actions {
        gap: 2px;
    }

    .dp-icon-btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }
}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */

.dp-drawer {
    direction: rtl;
}

.dp-drawer__panel {
    direction: rtl;
}

.dp-drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dp-drawer__list li {
    margin: 0;
    padding: 0;
}

.dp-drawer__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    color: inherit;
    text-decoration: none;
}

.dp-drawer__list a:hover {
    text-decoration: none;
}


/* ============================================================
   MOBILE DRAWER — HIDDEN BY DEFAULT
   ============================================================ */

.dp-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    visibility: hidden;
    pointer-events: none;
}

.dp-drawer[aria-hidden="false"] {
    display: block;
    visibility: visible;
    pointer-events: auto;
}

.dp-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.dp-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: min(340px, 88vw);
    padding: 24px;
    overflow-y: auto;
    background: #fff;
    color: #071B3D;
    box-shadow: -10px 0 40px rgba(0,0,0,.2);
    transform: translateX(110%);
    transition: transform .25s ease;
}

.dp-drawer[aria-hidden="false"] .dp-drawer__panel {
    transform: translateX(0);
}

.dp-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.dp-drawer__title {
    font-size: 20px;
    font-weight: 800;
}

.dp-drawer__list {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dp-drawer__list li {
    display: block;
    width: 100%;
}

.dp-drawer__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 4px;
    color: #071B3D !important;
    border-bottom: 1px solid #e7edf5;
    text-decoration: none !important;
}

.dp-drawer__foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}

/* Desktop: drawer must NEVER appear */
@media (min-width: 1200px) {
    .dp-drawer {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


/* ============================================================
   FINAL MOBILE DRAWER FIX
   ============================================================ */

.dp-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;

    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    width: 100% !important;
    height: 100% !important;

    pointer-events: none !important;
}

.dp-drawer.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.dp-drawer[aria-hidden="false"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.dp-drawer__backdrop {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.dp-drawer__panel {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    inset-inline-end: 0 !important;

    width: min(340px, 88vw) !important;
    max-width: 340px !important;

    transform: translateX(110%) !important;
}

.dp-drawer.is-open .dp-drawer__panel,
.dp-drawer[aria-hidden="false"] .dp-drawer__panel {
    transform: translateX(0) !important;
}

@media (min-width: 1200px) {
    .dp-drawer,
    .dp-drawer.is-open,
    .dp-drawer[aria-hidden="false"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ============================================================
   DATAHOTELING — FINAL GLOBAL HEADER
   Header is shared across ALL WHMCS pages
   ============================================================ */

#header.dp-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: rgba(7, 27, 61, 0.96) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;

    box-shadow: 0 4px 22px rgba(2, 8, 20, .18) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

#header.dp-header .dp-header__bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;

    width: 100% !important;
    height: 100% !important;

    background-image: var(--dp-header-bg) !important;
    background-size: cover !important;
    background-position: center !important;

    opacity: .18 !important;
    pointer-events: none !important;
}

#header.dp-header .dp-header__bg::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background: linear-gradient(
        180deg,
        rgba(7,27,61,.88),
        rgba(6,22,51,.96)
    ) !important;
}

/* Container */

#header.dp-header .dp-header__inner {
    width: min(100% - 40px, 1200px) !important;
    max-width: 1200px !important;

    min-height: 72px !important;
    margin-inline: auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 28px !important;
}

/* Brand */

#header.dp-header .dp-brand {
    display: inline-flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;
    gap: 11px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;
}

#header.dp-header .dp-brand__logo {
    display: block !important;

    width: 44px !important;
    height: 44px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    filter: drop-shadow(0 0 8px rgba(0,212,255,.30)) !important;
}

#header.dp-header .dp-brand__name {
    display: inline-block !important;

    color: #fff !important;

    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    white-space: nowrap !important;

    text-decoration: none !important;
}

/* Main navigation */

#header.dp-header .dp-nav {
    display: flex !important;
    align-items: center !important;

    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

#header.dp-header .dp-nav__list {
    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

#header.dp-header .dp-nav__item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#header.dp-header .dp-nav__link {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 42px !important;
    padding: 0 15px !important;

    border-radius: 9px !important;

    color: rgba(255,255,255,.86) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease !important;
}

#header.dp-header .dp-nav__link:hover,
#header.dp-header .dp-nav__link:focus {
    color: #fff !important;
    background: rgba(255,255,255,.09) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* Header actions */

#header.dp-header .dp-header__actions {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Icon buttons */

#header.dp-header .dp-icon-btn {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 9px !important;

    background: rgba(255,255,255,.055) !important;

    color: #fff !important;

    font-size: 15px !important;

    cursor: pointer !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease !important;
}

#header.dp-header .dp-icon-btn:hover,
#header.dp-header .dp-icon-btn:focus {
    color: #fff !important;
    background: rgba(255,255,255,.11) !important;
    border-color: rgba(255,255,255,.18) !important;

    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* Cart badge */

#header.dp-header .dp-icon-btn__badge {
    position: absolute !important;

    top: -5px !important;
    inset-inline-start: -5px !important;

    min-width: 17px !important;
    height: 17px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 4px !important;

    border-radius: 999px !important;

    background: #3B82F6 !important;
    color: #fff !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 17px !important;
}

/* CTA */

#header.dp-header .dp-header__cta {
    margin-inline-start: 4px !important;
    white-space: nowrap !important;
}

/* Search */

#header.dp-header .dp-header__search {
    width: 100% !important;

    padding: 14px 0 16px !important;

    background: rgba(6,22,51,.98) !important;

    border-top: 1px solid rgba(255,255,255,.06) !important;
}

#header.dp-header .dp-header__search .dp-container {
    width: min(100% - 40px, 1200px) !important;
    margin-inline: auto !important;
}

#header.dp-header .dp-header__search-form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    margin: 0 !important;
}

#header.dp-header .dp-header__search-form .dp-input {
    flex: 1 1 auto !important;

    min-width: 0 !important;
}

/* Burger */

#header.dp-header .dp-header__burger {
    display: none !important;
}

/* Prevent old WHMCS navbar styles from affecting the new header */

#header.dp-header .navbar,
#header.dp-header .navbar-nav,
#header.dp-header .navbar-brand,
#header.dp-header .toolbar,
#header.dp-header .main-navbar-wrapper {
    all: unset !important;
}

/* Mobile */

@media (max-width: 1199px) {

    #header.dp-header .dp-header__inner {
        width: min(100% - 28px, 1200px) !important;
        min-height: 68px !important;
    }

    #header.dp-header .dp-nav {
        display: none !important;
    }

    #header.dp-header .dp-header__burger {
        display: inline-flex !important;
    }

    #header.dp-header .dp-header__cta {
        display: none !important;
    }

    #header.dp-header .dp-brand__name {
        font-size: 15px !important;
    }

}

@media (max-width: 575px) {

    #header.dp-header .dp-header__inner {
        width: calc(100% - 20px) !important;
        min-height: 64px !important;

        gap: 8px !important;
    }

    #header.dp-header .dp-brand {
        gap: 7px !important;
    }

    #header.dp-header .dp-brand__logo {
        width: 38px !important;
        height: 38px !important;
    }

    #header.dp-header .dp-brand__name {
        max-width: 145px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;

        font-size: 13px !important;
    }

    #header.dp-header .dp-header__actions {
        gap: 5px !important;
    }

    #header.dp-header .dp-icon-btn {
        width: 38px !important;
        height: 38px !important;
    }

}

/* ============================================================
   MOBILE DRAWER — FINAL
   ============================================================ */

.dp-drawer {
    position: fixed !important;
    inset: 0 !important;

    z-index: 99999 !important;

    display: none !important;

    width: 100% !important;
    height: 100% !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;
}

.dp-drawer.is-open,
.dp-drawer[aria-hidden="false"] {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
}

.dp-drawer__backdrop {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: rgba(2,8,20,.62) !important;

    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.dp-drawer__panel {
    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;
    inset-inline-end: 0 !important;

    width: min(340px, 88vw) !important;
    max-width: 340px !important;
    height: 100% !important;

    padding: 24px !important;

    overflow-y: auto !important;

    background: #fff !important;
    color: #071B3D !important;

    box-shadow: -15px 0 45px rgba(0,0,0,.20) !important;

    transform: translateX(110%) !important;

    transition: transform .25s ease !important;
}

.dp-drawer.is-open .dp-drawer__panel,
.dp-drawer[aria-hidden="false"] .dp-drawer__panel {
    transform: translateX(0) !important;
}

.dp-drawer__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin-bottom: 24px !important;
}

.dp-drawer__title {
    color: #071B3D !important;

    font-size: 20px !important;
    font-weight: 800 !important;
}

.dp-drawer__list {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.dp-drawer__list li {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.dp-drawer__list a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    padding: 15px 4px !important;

    border-bottom: 1px solid #E7EDF5 !important;

    color: #071B3D !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

.dp-drawer__list a:hover {
    color: #2563EB !important;
}

.dp-drawer__foot {
    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;

    margin-top: 28px !important;
}

@media (min-width: 1200px) {

    .dp-drawer,
    .dp-drawer.is-open,
    .dp-drawer[aria-hidden="false"] {
        display: none !important;

        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;
    }

}

/* ============================================================
   DATAHOTELING — HOMEPAGE WRAPPER RESET
   Remove default WHMCS/TwentyOne page chrome on homepage only
   ============================================================ */

body.dp-homepage-body {
    background: var(--dp-bg) !important;
}

/* Remove the default content wrapper/background around homepage */
body.dp-homepage-body .primary-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove Bootstrap row gutters that create the gray strip */
body.dp-homepage-body .primary-content > .row,
body.dp-homepage-body > .row {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Homepage should not inherit the standard WHMCS section background */
body.dp-homepage-body .main-content,
body.dp-homepage-body .page-wrapper,
body.dp-homepage-body .content-wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Our own homepage sections control their own spacing */
body.dp-homepage-body .dp-hero,
body.dp-homepage-body .dp-section,
body.dp-homepage-body .dp-cta {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Never allow default WHMCS header/footer chrome to create extra bars */
body.dp-homepage-body #header:not(.dp-header),
body.dp-homepage-body #footer:not(.dp-footer) {
    display: none !important;
}


/* ============================================================
   DATAHOTELING — HOMEPAGE FULL WIDTH FIX
   Remove WHMCS default wrapper chrome
   ============================================================ */

body.dp-homepage-body .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.dp-homepage-body .primary-content {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.dp-homepage-body .primary-content > * {
    margin-top: 0 !important;
}

body.dp-homepage-body main.whmcs-premium-homepage {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

/* Eliminate the empty system-alert strip on homepage */
body.dp-homepage-body .dp-system-alerts:empty {
    display: none !important;
}

body.dp-homepage-body .dp-system-alerts {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Make homepage sections touch the wrapper cleanly */
body.dp-homepage-body main.whmcs-premium-homepage > section:first-child {
    margin-top: 0 !important;
}

body.dp-homepage-body main.whmcs-premium-homepage > section:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   DATAHOTELING BLOG / ANNOUNCEMENTS
   ========================================================= */

.dh-blog-page {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f7f8fc;
    color: #172033;
}

/* ---------- Hero ---------- */

.dh-blog-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 24px 85px;
    background:
        radial-gradient(circle at 85% 20%, rgba(126, 87, 194, .22), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(236, 72, 153, .14), transparent 30%),
        linear-gradient(135deg, #111827 0%, #17152b 48%, #241337 100%);
    color: #fff;
}

.dh-blog-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.dh-blog-hero__content {
    max-width: 760px;
}

.dh-blog-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: #e8d9ff;
    font-size: 14px;
    font-weight: 700;
}

.dh-blog-hero__title {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -1px;
}

.dh-blog-hero__text {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    line-height: 2;
}

.dh-blog-hero__icon {
    width: 130px;
    height: 130px;
    flex: 0 0 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 34px;
    background: rgba(255,255,255,.07);
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
    color: #e6cfff;
    font-size: 48px;
    transform: rotate(4deg);
}

.dh-blog-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.dh-blog-hero__glow--one {
    width: 320px;
    height: 320px;
    top: -180px;
    right: -80px;
    background: rgba(168,85,247,.14);
}

.dh-blog-hero__glow--two {
    width: 260px;
    height: 260px;
    bottom: -170px;
    left: 5%;
    background: rgba(236,72,153,.10);
}


/* ---------- Section ---------- */

.dh-blog-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 75px 24px 30px;
}

.dh-blog-section__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
}

.dh-blog-section__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #8b5cf6;
    font-size: 14px;
    font-weight: 800;
}

.dh-blog-section__title {
    margin: 0;
    color: #172033;
    font-size: 32px;
    font-weight: 900;
}

.dh-blog-section__line {
    height: 1px;
    flex: 1;
    margin-bottom: 10px;
    background: #e4e7ef;
}


/* ---------- Grid ---------- */

.dh-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* ---------- Card ---------- */

.dh-blog-card {
    position: relative;
    display: flex;
    min-height: 390px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e8eaf1;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(20, 24, 40, .06);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.dh-blog-card:hover {
    transform: translateY(-6px);
    border-color: #ddd3f7;
    box-shadow: 0 22px 50px rgba(20, 24, 40, .11);
}

.dh-blog-card--featured {
    grid-column: span 2;
    min-height: 420px;
    background:
        radial-gradient(circle at 90% 10%, rgba(139,92,246,.08), transparent 35%),
        #fff;
}

.dh-blog-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 25px 0;
}

.dh-blog-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #f1ecff;
    color: #7c3aed;
    font-size: 19px;
}

.dh-blog-card__category {
    padding: 7px 12px;
    border-radius: 999px;
    background: #f7f5ff;
    color: #7655c7;
    font-size: 12px;
    font-weight: 700;
}

.dh-blog-card__body {
    flex: 1;
    padding: 25px;
}

.dh-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    color: #9298a8;
    font-size: 12px;
}

.dh-blog-card__title {
    margin: 0 0 15px;
    font-size: 21px;
    line-height: 1.65;
    font-weight: 850;
}

.dh-blog-card--featured .dh-blog-card__title {
    font-size: 29px;
    line-height: 1.55;
}

.dh-blog-card__title a {
    color: #172033;
    text-decoration: none;
    transition: color .2s ease;
}

.dh-blog-card__title a:hover {
    color: #7c3aed;
}

.dh-blog-card__excerpt {
    color: #6d7485;
    font-size: 14px;
    line-height: 2;
}

.dh-blog-card__excerpt p {
    margin: 0;
}

.dh-blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px 23px;
    border-top: 1px solid #f0f1f5;
}

.dh-blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #6d3fd4;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.dh-blog-card__link i {
    transition: transform .2s ease;
}

.dh-blog-card__link:hover i {
    transform: translateX(-4px);
}

.dh-blog-card__edit {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f4f5f8;
    color: #777e8d;
    text-decoration: none;
}


/* ---------- Empty ---------- */

.dh-blog-empty {
    padding: 80px 30px;
    border: 1px solid #e7e9ef;
    border-radius: 24px;
    background: #fff;
    text-align: center;
}

.dh-blog-empty__icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: #f1ecff;
    color: #7c3aed;
    font-size: 28px;
}

.dh-blog-empty h3 {
    margin: 0 0 10px;
    font-size: 22px;
}

.dh-blog-empty p {
    margin: 0;
    color: #777e8d;
}


/* ---------- Pagination ---------- */

.dh-blog-pagination {
    max-width: 1180px;
    margin: 25px auto 70px;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dh-blog-pagination__item {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #e3e5eb;
    border-radius: 12px;
    background: #fff;
    color: #4d5565;
    font-size: 13px;
    text-decoration: none;
    transition: all .2s ease;
}

.dh-blog-pagination__item:hover,
.dh-blog-pagination__item.is-active {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff;
}

.dh-blog-pagination__item.is-disabled {
    opacity: .4;
    pointer-events: none;
}


/* ---------- CTA ---------- */

.dh-blog-cta {
    position: relative;
    max-width: 1180px;
    margin: 30px auto 80px;
    overflow: hidden;
    border-radius: 30px;
    background:
        radial-gradient(circle at 90% 50%, rgba(168,85,247,.25), transparent 35%),
        linear-gradient(135deg, #17152b, #241337);
    color: #fff;
}

.dh-blog-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 55px 60px;
}

.dh-blog-cta__content {
    max-width: 650px;
}

.dh-blog-cta__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #d8b4fe;
    font-size: 13px;
    font-weight: 800;
}

.dh-blog-cta h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
}

.dh-blog-cta p {
    margin: 0;
    color: rgba(255,255,255,.68);
    line-height: 2;
}

.dh-blog-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 15px 22px;
    border-radius: 14px;
    background: #fff;
    color: #26163c;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.dh-blog-cta__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
    color: #26163c;
}

.dh-blog-cta__glow {
    position: absolute;
    width: 260px;
    height: 260px;
    right: -80px;
    top: -100px;
    border-radius: 50%;
    background: rgba(168,85,247,.12);
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {

    .dh-blog-hero {
        padding: 65px 20px;
    }

    .dh-blog-hero__inner {
        min-height: auto;
    }

    .dh-blog-hero__icon {
        display: none;
    }

    .dh-blog-section {
        padding: 55px 20px 20px;
    }

    .dh-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-blog-card--featured {
        grid-column: span 2;
    }

    .dh-blog-cta {
        margin: 25px 20px 60px;
    }

    .dh-blog-cta__inner {
        padding: 40px;
        flex-direction: column;
        align-items: flex-start;
    }

}

@media (max-width: 600px) {

    .dh-blog-hero__title {
        font-size: 34px;
    }

    .dh-blog-hero__text {
        font-size: 15px;
    }

    .dh-blog-section__header {
        display: block;
    }

    .dh-blog-section__line {
        display: none;
    }

    .dh-blog-grid {
        grid-template-columns: 1fr;
    }

    .dh-blog-card--featured {
        grid-column: span 1;
    }

    .dh-blog-card--featured .dh-blog-card__title {
        font-size: 23px;
    }

    .dh-blog-card__title {
        font-size: 19px;
    }

    .dh-blog-cta {
        border-radius: 24px;
    }

    .dh-blog-cta__inner {
        padding: 32px 25px;
    }

    .dh-blog-cta h2 {
        font-size: 24px;
    }

    .dh-blog-cta__button {
        width: 100%;
        justify-content: center;
    }

    .dh-blog-pagination {
        padding: 0 20px;
    }

}



/* =========================================================
   DATAHOTELING BLOG / ANNOUNCEMENTS
   ========================================================= */

.dh-blog-page {
    direction: rtl;
    position: relative;
    overflow: hidden;
    background: #fff;
}


/* =========================
   HERO
   ========================= */

.dh-blog-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 24px 82px;
    background:
        radial-gradient(circle at 85% 20%, rgba(235, 52, 120, .16), transparent 30%),
        radial-gradient(circle at 15% 80%, rgba(180, 65, 255, .10), transparent 28%),
        linear-gradient(135deg, #170b25 0%, #24102f 50%, #35132f 100%);
    color: #fff;
}

.dh-blog-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    text-align: center;
}

.dh-blog-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}

.dh-blog-hero__glow--one {
    width: 320px;
    height: 320px;
    right: -120px;
    top: -130px;
    background: rgba(239, 63, 126, .16);
}

.dh-blog-hero__glow--two {
    width: 260px;
    height: 260px;
    left: -100px;
    bottom: -120px;
    background: rgba(196, 74, 255, .12);
}

.dh-blog-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.86);
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(12px);
}

.dh-blog-hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f0528b;
    box-shadow: 0 0 14px rgba(240,82,139,.8);
}

.dh-blog-hero__title {
    margin: 25px auto 18px;
    max-width: 820px;
    color: #fff;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -1.5px;
}

.dh-blog-hero__title span {
    background: linear-gradient(90deg, #ff7aa9, #f04482);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dh-blog-hero__text {
    max-width: 670px;
    margin: 0 auto;
    color: rgba(255,255,255,.68);
    font-size: 17px;
    line-height: 2;
}

.dh-blog-hero__stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-top: 48px;
}

.dh-blog-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dh-blog-stat strong {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.dh-blog-stat span {
    color: rgba(255,255,255,.48);
    font-size: 12px;
}

.dh-blog-stat__divider {
    width: 1px;
    height: 38px;
    background: rgba(255,255,255,.12);
}


/* =========================
   CONTENT
   ========================= */

.dh-blog-content {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 82px 0 70px;
}

.dh-blog-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 40px;
}

.dh-blog-heading__eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #e8437e;
    font-size: 13px;
    font-weight: 800;
}

.dh-blog-heading h2 {
    margin: 0;
    color: #201525;
    font-size: 32px;
    font-weight: 900;
}

.dh-blog-heading p {
    max-width: 470px;
    margin: 0;
    color: #77717b;
    font-size: 14px;
    line-height: 2;
}


/* =========================
   CARDS
   ========================= */

.dh-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.dh-blog-card {
    position: relative;
    display: flex;
    min-height: 350px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #eee8ee;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(37, 17, 43, .055);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.dh-blog-card:hover {
    transform: translateY(-7px);
    border-color: rgba(232,67,126,.22);
    box-shadow: 0 24px 55px rgba(37, 17, 43, .11);
}

.dh-blog-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
}

.dh-blog-card__icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg, #fff0f5, #ffe4ed);
    color: #e8437e;
    font-size: 18px;
}

.dh-blog-card__date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9b949d;
    font-size: 11px;
}

.dh-blog-card__body {
    flex: 1;
    padding: 26px 24px;
}

.dh-blog-card__title {
    margin: 0 0 15px;
    font-size: 19px;
    line-height: 1.65;
    font-weight: 800;
}

.dh-blog-card__title a {
    color: #241a27;
    text-decoration: none;
    transition: color .25s ease;
}

.dh-blog-card:hover .dh-blog-card__title a {
    color: #e8437e;
}

.dh-blog-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    color: #817983;
    font-size: 13px;
    line-height: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.dh-blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-top: 1px solid #f1edf1;
}

.dh-blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #e8437e;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.dh-blog-card__link i {
    transition: transform .25s ease;
}

.dh-blog-card:hover .dh-blog-card__link i {
    transform: translateX(-4px);
}

.dh-blog-card__edit {
    color: #aaa2ac;
    font-size: 12px;
}


/* =========================
   EMPTY
   ========================= */

.dh-blog-empty {
    grid-column: 1 / -1;
    padding: 70px 20px;
    border: 1px dashed #e5dfe5;
    border-radius: 24px;
    text-align: center;
}

.dh-blog-empty__icon {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: #fff0f5;
    color: #e8437e;
    font-size: 25px;
}

.dh-blog-empty h3 {
    margin: 0 0 8px;
    color: #2b202e;
    font-size: 20px;
}

.dh-blog-empty p {
    margin: 0;
    color: #88818a;
    font-size: 13px;
}


/* =========================
   PAGINATION
   ========================= */

.dh-blog-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 45px;
}

.dh-blog-pagination__item {
    display: flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #e9e3e9;
    border-radius: 11px;
    color: #6f6871;
    background: #fff;
    font-size: 12px;
    text-decoration: none;
    transition: all .2s ease;
}

.dh-blog-pagination__item:hover,
.dh-blog-pagination__item.is-active {
    border-color: #e8437e;
    background: #e8437e;
    color: #fff;
}

.dh-blog-pagination__item.is-disabled {
    opacity: .35;
    pointer-events: none;
}


/* =========================
   CTA
   ========================= */

.dh-blog-cta {
    position: relative;
    overflow: hidden;
    width: min(1180px, calc(100% - 40px));
    margin: 10px auto 80px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 10% 100%, rgba(255,93,146,.18), transparent 30%),
        linear-gradient(135deg, #211126, #32152e);
    color: #fff;
}

.dh-blog-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    padding: 52px 58px;
}

.dh-blog-cta__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: #ff78a5;
    font-size: 12px;
    font-weight: 800;
}

.dh-blog-cta h2 {
    margin: 0 0 13px;
    color: #fff;
    font-size: 30px;
    line-height: 1.45;
    font-weight: 900;
}

.dh-blog-cta p {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 13px;
}

.dh-blog-cta__button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    padding: 15px 23px;
    border-radius: 13px;
    background: #f04b86;
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 12px 30px rgba(240,75,134,.25);
    transition: transform .25s ease, box-shadow .25s ease;
}

.dh-blog-cta__button:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 35px rgba(240,75,134,.35);
}

.dh-blog-cta__glow {
    position: absolute;
    width: 400px;
    height: 400px;
    right: -180px;
    top: -220px;
    border-radius: 50%;
    background: rgba(240,75,134,.12);
    filter: blur(15px);
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 900px) {

    .dh-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-blog-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .dh-blog-cta__inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 42px 32px;
    }

}


@media (max-width: 640px) {

    .dh-blog-hero {
        padding: 65px 20px 60px;
    }

    .dh-blog-hero__title {
        font-size: 34px;
        letter-spacing: -.8px;
    }

    .dh-blog-hero__text {
        font-size: 14px;
    }

    .dh-blog-hero__stats {
        flex-wrap: wrap;
        gap: 18px;
    }

    .dh-blog-stat__divider {
        display: none;
    }

    .dh-blog-content {
        width: min(100% - 28px, 1180px);
        padding-top: 55px;
    }

    .dh-blog-heading h2 {
        font-size: 25px;
    }

    .dh-blog-grid {
        grid-template-columns: 1fr;
    }

    .dh-blog-card {
        min-height: 310px;
    }

    .dh-blog-cta {
        width: calc(100% - 28px);
        margin-bottom: 45px;
    }

    .dh-blog-cta__inner {
        padding: 35px 25px;
    }

    .dh-blog-cta h2 {
        font-size: 24px;
    }

    .dh-blog-cta__button {
        width: 100%;
        justify-content: center;
    }

}


/* =========================================================
   DATAHOTELING BLOG — FINAL VISUAL OVERRIDE
   ========================================================= */

.dh-blog-page {
    background: #f7f9fc !important;
}

/* ---------- Hero ---------- */

.dh-blog-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #071a2f 0%, #0b2d4d 55%, #0d6b78 100%) !important;
    color: #fff;
    border-radius: 0 0 28px 28px;
}

.dh-blog-hero__glow--one {
    background: rgba(44, 214, 201, .18) !important;
}

.dh-blog-hero__glow--two {
    background: rgba(69, 163, 255, .16) !important;
}

.dh-blog-hero__badge {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #dffefd !important;
}

.dh-blog-hero__badge-dot {
    background: #2dd4bf !important;
    box-shadow: 0 0 0 5px rgba(45,212,191,.12);
}

.dh-blog-hero__title span {
    background: linear-gradient(90deg, #5eead4, #38bdf8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.dh-blog-hero__text {
    color: rgba(255,255,255,.76) !important;
}

/* ---------- Main content ---------- */

.dh-blog-content {
    background: #f7f9fc !important;
}

.dh-blog-heading__eyebrow {
    color: #0f9f9a !important;
    letter-spacing: .08em;
}

.dh-blog-heading h2 {
    color: #10243e !important;
}

.dh-blog-heading p {
    color: #718096 !important;
}

/* ---------- Cards ---------- */

.dh-blog-card {
    position: relative;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid #e7edf4 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(16,36,62,.055) !important;
    transition: transform .25s ease, box-shadow .25s ease,
                border-color .25s ease !important;
}

.dh-blog-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #14b8a6, #38bdf8);
    opacity: 0;
    transition: opacity .25s ease;
}

.dh-blog-card:hover {
    transform: translateY(-6px) !important;
    border-color: #d5e5ec !important;
    box-shadow: 0 18px 45px rgba(16,36,62,.11) !important;
}

.dh-blog-card:hover::before {
    opacity: 1;
}

/* ---------- Card icon ---------- */

.dh-blog-card__icon {
    background: linear-gradient(135deg, #e9fffc, #e8f7ff) !important;
    color: #0f9f9a !important;
    border-radius: 14px !important;
}

/* ---------- Date ---------- */

.dh-blog-card__date {
    color: #8a99aa !important;
}

/* ---------- Title ---------- */

.dh-blog-card__title {
    color: #10243e !important;
}

.dh-blog-card__title a {
    color: #10243e !important;
    text-decoration: none !important;
    transition: color .2s ease;
}

.dh-blog-card:hover .dh-blog-card__title a {
    color: #0f9f9a !important;
}

/* ---------- Excerpt ---------- */

.dh-blog-card__excerpt {
    color: #68788c !important;
}

.dh-blog-card__excerpt p {
    color: inherit !important;
}

/* ---------- Read more ---------- */

.dh-blog-card__link {
    color: #0f9f9a !important;
    font-weight: 600;
}

.dh-blog-card__link:hover {
    color: #087f7a !important;
}

.dh-blog-card__link i {
    transition: transform .2s ease;
}

.dh-blog-card:hover .dh-blog-card__link i {
    transform: translateX(-4px);
}

/* ---------- Edit ---------- */

.dh-blog-card__edit {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 8px !important;
}

/* ---------- Empty state ---------- */

.dh-blog-empty {
    background: #fff !important;
    border: 1px solid #e7edf4 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(16,36,62,.05) !important;
}

.dh-blog-empty__icon {
    background: linear-gradient(135deg, #e9fffc, #e8f7ff) !important;
    color: #0f9f9a !important;
}

.dh-blog-empty h3 {
    color: #10243e !important;
}

.dh-blog-empty p {
    color: #718096 !important;
}

/* ---------- Pagination ---------- */

.dh-blog-pagination__item {
    background: #fff !important;
    color: #52657a !important;
    border: 1px solid #e1e8ef !important;
    border-radius: 10px !important;
    transition: all .2s ease;
}

.dh-blog-pagination__item:hover,
.dh-blog-pagination__item.is-active {
    background: #10243e !important;
    border-color: #10243e !important;
    color: #fff !important;
}

.dh-blog-pagination__item.is-disabled {
    opacity: .45;
}

/* ---------- CTA ---------- */

.dh-blog-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #071a2f, #0b4258) !important;
    border-radius: 22px !important;
}

.dh-blog-cta__eyebrow {
    color: #5eead4 !important;
}

.dh-blog-cta h2 {
    color: #fff !important;
}

.dh-blog-cta p {
    color: rgba(255,255,255,.72) !important;
}

.dh-blog-cta__button {
    background: #fff !important;
    color: #10243e !important;
    border-radius: 10px !important;
    transition: all .2s ease;
}

.dh-blog-cta__button:hover {
    background: #5eead4 !important;
    color: #06202d !important;
    transform: translateY(-2px);
}

.dh-blog-cta__glow {
    background: rgba(45,212,191,.14) !important;
}

/* ---------- Remove remaining purple/pink from Blog ---------- */

.dh-blog-page [style*="#7c3aed"],
.dh-blog-page [style*="#f1ecff"],
.dh-blog-page [style*="#e8437e"],
.dh-blog-page [style*="#f04b86"],
.dh-blog-page [style*="#ff7aa9"],
.dh-blog-page [style*="#f04482"] {
    color: #0f9f9a !important;
    background-color: transparent;
}

@media (max-width: 767px) {
    .dh-blog-hero {
        border-radius: 0 0 20px 20px;
    }

    .dh-blog-card {
        border-radius: 15px !important;
    }

    .dh-blog-cta {
        border-radius: 18px !important;
    }
}

/* ==========================================================================
   HERO V2 — pine / persimmon, glass domain panel
   ========================================================================== */
@font-face{
    font-family:"Estedad";
    src:url("../fonts/Estedad-VF.woff2") format("woff2");
    font-weight:100 900;font-display:swap;
}
:root{
    --dh-pine:#0A1D18; --dh-moss:#112A23; --dh-mist:#E9EEEA;
    --dh-sage:#8FA399; --dh-ember:#F2542D;
    --dp-font:"Estedad","Vazirmatn","IRANYekan",Tahoma,sans-serif;
}

/* ---------- Header: shared (all pages) ---------- */
#header.dp-header{
    background:var(--dh-pine) !important;
    border-bottom:1px solid rgba(233,238,234,.10) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
#header.dp-header .dp-header__bg{display:none !important}

/* ---------- Header: homepage = transparent over hero ---------- */
body.dp-homepage-body #header.dp-header{
    position:absolute !important;
    inset-inline:0;top:0;
    background:transparent !important;
    border-bottom:0 !important;
}
body.dp-homepage-body #header.dp-header.is-scrolled{
    position:fixed !important;
    background:rgba(10,29,24,.72) !important;
    backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;
    border-bottom:1px solid rgba(233,238,234,.10) !important;
}

/* Brand */
#header.dp-header .dp-brand__name{
    display:inline-flex !important;align-items:baseline;gap:3px;
    font-size:26px !important;font-weight:900 !important;color:var(--dh-mist) !important;
}
.dp-brand__dot{width:9px;height:9px;border-radius:50%;background:var(--dh-ember);display:inline-block}

/* Nav: no background, dim by default, bright + bold on hover */
#header.dp-header .dp-nav__link{
    position:relative;flex-direction:column;
    background:transparent !important;border-radius:0 !important;transform:none !important;
    padding:0 14px !important;
    color:rgba(233,238,234,.62) !important;
    font-size:15px !important;font-weight:500 !important;
    cursor:pointer;
    transition:color .2s ease !important;
}
/* hidden bold copy reserves width so hover doesn't shift neighbours */
#header.dp-header .dp-nav__link::after{
    content:attr(data-label);font-weight:800;height:0;overflow:hidden;visibility:hidden;
    display:block;pointer-events:none;
}
#header.dp-header .dp-nav__link:hover,
#header.dp-header .dp-nav__link:focus-visible{
    color:#fff !important;background:transparent !important;transform:none !important;
}
#header.dp-header .dp-nav__link:hover span,
#header.dp-header .dp-nav__link:focus-visible span{font-weight:800}

/* Header actions */
#header.dp-header .dp-icon-btn{
    background:transparent !important;border:0 !important;
    color:rgba(233,238,234,.62) !important;
}
#header.dp-header .dp-icon-btn:hover{color:#fff !important;background:transparent !important;transform:none !important}
#header.dp-header .dp-icon-btn__badge{background:var(--dh-ember) !important;color:var(--dh-pine) !important}

/* Buttons: pill, persimmon, ink text */
.dp-btn{border-radius:999px}
.dp-btn--primary{
    background:var(--dh-ember);color:var(--dh-pine);border-color:var(--dh-ember);
    box-shadow:0 10px 28px rgba(242,84,45,.22);
}
.dp-btn--primary:hover,.dp-btn--primary:focus{
    background:#ff6a42;color:var(--dh-pine);box-shadow:0 14px 34px rgba(242,84,45,.32);
}

/* ---------- Hero ---------- */
.dp-hero{
    position:relative;isolation:isolate;overflow:hidden;
    padding:0 !important;
    min-height:min(100vh,900px);
    background:var(--dh-pine) !important;
}
.dp-hero::after{ /* film grain */
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.dp-hero__object{
    position:absolute;z-index:0;
    left:-6%;top:12%;width:62%;height:78%;
    background-repeat:no-repeat;background-position:center;background-size:contain;
    -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 52%,transparent 76%);
            mask-image:radial-gradient(ellipse at 50% 50%,#000 52%,transparent 76%);
}
.dp-hero__inner{
    position:relative;z-index:2;display:block;min-height:0;
    padding-top:calc(var(--dp-header-h) + 84px);
}
.dp-hero__content{max-width:620px}
.dp-hero__title{
    margin:0 0 22px;font-size:clamp(44px,6.6vw,96px);font-weight:900;line-height:1.28;
    color:var(--dh-mist);letter-spacing:-.5px;
}
.dp-hero__desc{max-width:520px;margin:0 0 56px;font-size:18px;line-height:1.9;color:var(--dh-sage)}

/* ---------- Glass domain panel ---------- */
.dp-domain-form--glass{position:relative;margin:0;width:min(620px,100%)}
.dp-domain-form--glass::before{ /* soft ambient glow behind the glass */
    content:"";position:absolute;inset:-34px -26px;z-index:-1;border-radius:48px;
    background:radial-gradient(60% 70% at 50% 40%,rgba(242,84,45,.20),transparent 70%);
    filter:blur(22px);opacity:.55;transition:opacity .3s ease;
}
.dp-domain-form--glass:focus-within::before{opacity:1}

.dp-domain-form--glass{
    padding:10px;border-radius:28px;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
    border:1px solid rgba(233,238,234,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 30px 80px rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
            backdrop-filter:blur(22px) saturate(140%);
    transition:border-color .25s ease,box-shadow .25s ease;
}
.dp-domain-form--glass:focus-within{
    border-color:rgba(242,84,45,.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 0 0 4px rgba(242,84,45,.12),
        0 0 46px rgba(242,84,45,.22),
        0 30px 80px rgba(0,0,0,.45);
}
.dp-domain-form--glass .dp-domain-form__box,
.dp-domain-form--glass .dp-domain-form__box.is-focused{
    max-width:none;padding:6px;gap:10px;
    background:rgba(10,29,24,.55);
    border:1px solid rgba(233,238,234,.10);
    border-radius:999px;box-shadow:none;
}
.dp-domain-form--glass .dp-domain-form__box.has-error{border-color:#ff7a5c}
.dp-domain-form--glass .dp-domain-form__input{
    height:52px;font-size:20px;font-weight:600;color:var(--dh-mist);text-align:start;
}
.dp-domain-form--glass .dp-domain-form__input::placeholder{color:rgba(143,163,153,.7)}
.dp-domain-form--glass .dp-domain-form__tld{
    appearance:none;-webkit-appearance:none;
    height:44px;padding:0 34px 0 16px;border:0;border-radius:999px;
    background:rgba(233,238,234,.09) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23E9EEEA' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat left 14px center;
    color:var(--dh-mist);font-size:15px;font-weight:700;cursor:pointer;
}
.dp-domain-form--glass .dp-domain-form__tld option{background:var(--dh-moss);color:var(--dh-mist)}
.dp-domain-form--glass .dp-domain-form__submit{height:52px;padding-inline:28px}
.dp-domain-form--glass .dp-domain-form__msg{padding:8px 18px 0;color:#ffab95}

/* Live results list */
.dp-domain-results{list-style:none;margin:8px 0 0;padding:0 8px 4px}
.dp-domain-results li+li{border-top:1px solid rgba(233,238,234,.09)}
.dp-domain-results button{
    display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:14px;
    width:100%;padding:13px 10px;border:0;background:transparent;cursor:pointer;
    font:inherit;font-size:14px;color:var(--dh-sage);text-align:start;
    border-radius:12px;transition:background .2s ease,color .2s ease;
}
.dp-domain-results button:hover{background:rgba(233,238,234,.05);color:var(--dh-mist)}
.dp-domain-results i{width:7px;height:7px;border-radius:50%;background:var(--dh-ember)}
.dp-domain-results__name{font-weight:700;color:var(--dh-mist);text-align:start}
.dp-domain-results__act{font-weight:800;color:var(--dh-ember)}

/* ---------- Uptime barcode ---------- */
.dp-hero__uptime{
    position:relative;z-index:2;display:flex;align-items:center;gap:20px;
    margin-top:64px;padding-bottom:32px;
}
.dp-hero__ticks{flex:1;display:flex;align-items:flex-end;justify-content:space-between;height:26px}
.dp-hero__ticks i{width:1px;height:16px;background:rgba(143,163,153,.42)}
.dp-hero__ticks i.is-hit{height:24px;background:var(--dh-ember)}
.dp-hero__uptime-label{
    flex:0 0 auto;padding:6px 14px;border-radius:999px;
    background:rgba(233,238,234,.08);border:1px solid rgba(233,238,234,.10);
    font-size:12px;color:var(--dh-sage);white-space:nowrap;
}

/* Stats card no longer overlaps the hero */
.dp-proof{padding-top:56px}
.dp-stats{margin-top:0}

/* ---------- Responsive ---------- */
@media (max-width:991px){
    .dp-hero{min-height:0}
    .dp-hero__object{left:50%;transform:translateX(-50%);top:auto;bottom:70px;width:120%;height:46%;opacity:.55}
    .dp-hero__inner{padding-top:calc(var(--dp-header-h) + 48px)}
    .dp-hero__desc{margin-bottom:36px}
}
@media (max-width:575px){
    .dp-hero__title{font-size:40px}
    .dp-domain-form--glass{padding:8px;border-radius:24px}
    .dp-domain-form--glass .dp-domain-form__box{flex-wrap:wrap;border-radius:22px}
    .dp-domain-form--glass .dp-domain-form__input{order:1;flex:1 1 100%;font-size:18px;padding-inline:14px}
    .dp-domain-form--glass .dp-domain-form__tld{order:2;flex:0 0 auto}
    .dp-domain-form--glass .dp-domain-form__submit{order:3;flex:1 1 auto}
    .dp-domain-results button{grid-template-columns:10px 1fr auto}
    .dp-domain-results__price{display:none}
    .dp-hero__ticks i:nth-child(even){display:none}
    .dp-hero__uptime{flex-direction:column;align-items:stretch;gap:12px}
}
@media (prefers-reduced-motion:reduce){.dp-domain-form--glass::before{transition:none}}

/* ==========================================================================
   HERO V2.1 — fixes
   ========================================================================== */

/* Hero fills the viewport and the uptime strip sits at the bottom */
.dp-hero{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.dp-hero__inner{
    flex:1 1 auto;width:min(100% - 40px,1200px);
    padding-top:calc(var(--dp-header-h) + 3vh);padding-bottom:0;
}
.dp-hero__uptime{width:min(100% - 40px,1200px);margin-top:20px;padding-bottom:24px}

/* Type scales with height as well as width */
.dp-hero__title{
    font-size:clamp(38px,min(5.4vw,9.2vh),84px);
    line-height:1.25;margin-bottom:14px;
}
.dp-hero__desc{font-size:17px;margin-bottom:clamp(20px,4vh,44px)}
.dp-domain-results button{padding-block:10px}
@media (max-height:760px) and (min-width:992px){
    .dp-domain-results li:nth-child(3){display:none}
}

/* 3D object: cover + two-axis fade so no image edge is ever visible */
.dp-hero__object{
    left:-4%;top:6%;bottom:4%;height:auto;width:60%;
    background-size:cover;background-position:center;
    -webkit-mask-image:
        linear-gradient(to right,transparent 0,#000 16%,#000 70%,transparent 100%),
        linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);
            mask-image:
        linear-gradient(to right,transparent 0,#000 16%,#000 70%,transparent 100%),
        linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-composite:intersect;
}

/* TLD select: correct ".com" direction, arrow no longer overlaps text */
.dp-domain-form--glass .dp-domain-form__tld{
    direction:ltr;text-align:left;
    padding-left:16px;padding-right:34px;
    background-position:right 14px center;
}
/* Typed name sits right next to the TLD, reads as mybrand.com */
.dp-domain-form--glass .dp-domain-form__input{direction:ltr;text-align:right}

/* Header: small round cart badge, calmer login button */
#header.dp-header #cartItemCount.dp-icon-btn__badge{
    position:absolute !important;top:2px !important;left:0 !important;right:auto !important;
    display:flex !important;align-items:center;justify-content:center;
    width:16px !important;min-width:16px !important;height:16px !important;
    margin:0 !important;padding:0 !important;border-radius:50% !important;
    font-size:10px !important;font-weight:800 !important;line-height:1 !important;
    background:var(--dh-ember) !important;color:var(--dh-pine) !important;
    transform:none !important;
}
#header.dp-header .dp-header__cta{box-shadow:none !important}

/* ==========================================================================
   POPULAR PLANS — جایگزین کل بلوک قبلی «POPULAR PLANS» انتهای custom.css
   mist section, pine slabs, persimmon active card
   ========================================================================== */
.dpp-sec{background:var(--dh-mist);border:0;padding-block:calc(var(--dh-gap) * .75) calc(var(--dh-gap) / 2)}

/* Head */
.dpp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:12px}
.dpp-head__title{margin:0 0 10px;font-size:clamp(32px,4vw,48px);font-weight:900;line-height:1.3;color:var(--dh-pine)}
.dpp-head__sub{margin:0;max-width:46ch;font-size:16px;line-height:1.9;color:#55645B}
.dpp-head__tools{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding-bottom:22px}

.dpp-seg{display:inline-flex;padding:4px;border:1px solid rgba(10,29,24,.22);border-radius:999px}
.dpp-seg button{
    height:38px;padding-inline:20px;border:0;border-radius:999px;background:transparent;
    font:inherit;font-size:14px;font-weight:700;color:var(--dh-pine);cursor:pointer;
    transition:background .25s ease,color .25s ease;
}
.dpp-seg button.is-active{background:var(--dh-pine);color:var(--dh-mist)}

.dpp-billing{position:relative;display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--dh-pine)}
.dpp-switch{position:relative;width:44px;height:26px;border:1px solid rgba(10,29,24,.35);border-radius:999px;background:transparent;cursor:pointer;padding:0;transition:background .25s ease}
.dpp-switch::after{content:"";position:absolute;inset:-9px -6px} /* ناحیه‌ی لمسی ≥۴۴px */
.dpp-switch i{position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:var(--dh-pine);transition:transform .25s ease,background .25s ease}
.dpp-switch[aria-checked="true"]{background:var(--dh-pine)}
.dpp-switch[aria-checked="true"] i{background:var(--dh-ember);transform:translateX(-18px)}
.dpp-billing__note{
    position:absolute;top:calc(100% + 8px);inset-inline-end:0;white-space:nowrap;
    padding:2px 10px;border-radius:999px;background:var(--dh-ember);color:var(--dh-pine);
    font-style:normal;font-size:11px;font-weight:800;
}

/* Viewport / track
   The track is full-bleed (it lives OUTSIDE .dp-container in the template).
   --dpp-inset = distance between the screen edge and the container edge, so the
   first card lines up exactly with the title and the last cards bleed off-screen. */
.dpp-viewport{
    --dpp-inset:max(20px, calc((100% - var(--dp-container)) / 2)); /* fallback; JS sets exact px */
    position:relative;
}
.dpp-track{
    display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
    padding:40px var(--dpp-inset) 52px;
    scroll-padding-inline:var(--dpp-inset);
    scrollbar-width:none;-ms-overflow-style:none;
}
.dpp-track::-webkit-scrollbar{display:none}
.dpp-track.is-swapping .dpp-card{animation:dpp-in .45s ease both}
@keyframes dpp-in{from{opacity:0}to{opacity:1}}

/* Card */
.dpp-card[hidden]{display:none}
.dpp-card{
    position:relative;flex:0 0 clamp(236px,19vw,268px);min-height:470px;
    display:flex;flex-direction:column;padding:22px;
    border:1px solid rgba(233,238,234,.08);border-radius:24px;
    background:var(--dh-moss);color:var(--dh-mist);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px -24px rgba(10,29,24,.55);
    transition:transform .55s cubic-bezier(.2,.8,.2,1),background .4s ease,color .4s ease,box-shadow .5s ease;
}
.dpp-card.is-active{
    transform:translateY(-16px);
    background:var(--dh-ember);color:var(--dh-pine);border-color:transparent;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 34px 60px -22px rgba(242,84,45,.55),0 22px 44px -20px rgba(10,29,24,.4);
}

.dpp-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.dpp-card__name{margin:0;font-size:16px;font-weight:800;color:inherit}
.dpp-card__badge{
    padding:3px 12px;border-radius:999px;background:rgba(242,84,45,.16);color:var(--dh-ember);
    font-size:12px;font-weight:800;white-space:nowrap;transition:background .4s ease,color .4s ease;
}
.dpp-card.is-active .dpp-card__badge{background:var(--dh-pine);color:var(--dh-mist)}

.dpp-card__big{display:flex;align-items:baseline;gap:8px;margin:20px 0 4px;line-height:1}
.dpp-card__big b{font-size:clamp(54px,4.6vw,68px);font-weight:900;letter-spacing:-1px}
.dpp-card__big span{font-size:22px;font-weight:800}
.dpp-card__label{margin:0 0 18px;font-size:14px;color:var(--dh-sage);transition:color .4s ease}
.dpp-card.is-active .dpp-card__label{color:rgba(10,29,24,.72)}

.dpp-card__ticks{display:flex;gap:3px;height:14px;margin-bottom:20px}
.dpp-card__ticks i{flex:1;border-radius:2px;background:rgba(233,238,234,.16);transition:background .4s ease}
.dpp-card__ticks i.is-on{background:var(--dh-ember)}
.dpp-card.is-active .dpp-card__ticks i{background:rgba(10,29,24,.2)}
.dpp-card.is-active .dpp-card__ticks i.is-on{background:var(--dh-pine)}

.dpp-card__list{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:9px}
.dpp-card__list li{position:relative;padding-inline-start:18px;font-size:14px;color:rgba(233,238,234,.88);transition:color .4s ease}
.dpp-card__list li::before{
    content:"";position:absolute;inset-inline-start:0;top:.68em;width:7px;height:7px;border-radius:50%;
    background:var(--dh-ember);transition:background .4s ease;
}
.dpp-card.is-active .dpp-card__list li{color:var(--dh-pine)}
.dpp-card.is-active .dpp-card__list li::before{background:var(--dh-pine)}

.dpp-card__buy{margin-top:auto}
.dpp-card__price{margin:0 0 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.dpp-card__price strong{font-size:22px;font-weight:800}
.dpp-card__price span{font-size:13px;color:var(--dh-sage);transition:color .4s ease}
.dpp-card.is-active .dpp-card__price span{color:rgba(10,29,24,.7)}
.dpp-card__old{display:none;font-size:14px;color:var(--dh-sage);text-decoration:line-through;transition:color .4s ease}
.dpp-sec.is-yearly .dpp-card__old{display:inline}
.dpp-card.is-active .dpp-card__old{color:rgba(10,29,24,.6)}

.dpp-card__cta{
    width:100%;height:44px;background:transparent;color:var(--dh-mist);
    border:1px solid rgba(233,238,234,.34);box-shadow:none;
}
.dpp-card__cta:hover,.dpp-card__cta:focus{background:var(--dh-mist);color:var(--dh-pine);border-color:var(--dh-mist);transform:none;box-shadow:none}
.dpp-card.is-active .dpp-card__cta{background:var(--dh-pine);color:var(--dh-mist);border-color:var(--dh-pine)}
.dpp-card.is-active .dpp-card__cta:hover{background:#13342b;color:#fff}

/* Footer controls: arrows · progress · compare link */
.dpp-foot{display:flex;align-items:center;gap:24px}
.dpp-arrows{display:flex;gap:10px}
.dpp-arrow{
    width:46px;height:46px;border:1px solid rgba(10,29,24,.35);border-radius:50%;
    background:transparent;color:var(--dh-pine);font-size:14px;cursor:pointer;
    transition:background .2s ease,color .2s ease,opacity .2s ease;
}
.dpp-arrow:hover:not(:disabled){background:var(--dh-pine);color:var(--dh-mist)}
.dpp-arrow:disabled{opacity:.3;cursor:default}
.dpp-progress{flex:1;height:2px;background:rgba(10,29,24,.14);overflow:hidden}
/* fills from the start edge (right side in RTL) */
.dpp-progress__bar{display:block;width:100%;height:100%;background:var(--dh-ember);transform:scaleX(0);transform-origin:right center;will-change:transform}
.dpp-foot__link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--dh-pine);white-space:nowrap}
.dpp-foot__link:hover{color:var(--dh-ember)}

.dpp-sec :focus-visible{outline:2px solid var(--dh-ember);outline-offset:3px}

@media (max-width:767px){
    .dpp-card{flex-basis:72%;min-height:0}
    .dpp-head__tools{gap:30px}
    .dpp-foot{flex-wrap:wrap;gap:16px}
    .dpp-progress{order:3;flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
    .dpp-card,.dpp-switch i{transition:none}
    .dpp-track.is-swapping .dpp-card{animation:none}
}
/* ==========================================================================
   STATS / ODOMETER COUNT-UP — جایگزین کل بلوک قبلی «STATS / COUNT-UP» (.dps-*)
   dark panel on mist · rolling digits · ember "hot" cell · uptime tick meter
   ========================================================================== */
.dps-sec{background:var(--dh-mist);padding-block:calc(var(--dh-gap) / 2)}

.dps-panel{
    position:relative;overflow:hidden;
    padding:clamp(24px,4vw,56px);
    border-radius:clamp(24px,3vw,36px);
    background:var(--dh-pine);color:var(--dh-mist);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -48px rgba(10,29,24,.7);
}
.dps-panel::before{
    content:"";position:absolute;inset-inline-end:-8%;top:-45%;width:55%;height:95%;
    background:radial-gradient(closest-side,rgba(242,84,45,.10),transparent);pointer-events:none;
}
.dps-panel > *{position:relative}

/* Head */
.dps-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 24px;margin-bottom:clamp(32px,4vw,52px)}
.dps-top__title{margin:0 0 8px;font-size:clamp(24px,3vw,36px);font-weight:800;line-height:1.4;color:var(--dh-mist)}
.dps-top__sub{margin:0;font-size:15px;line-height:1.8;color:var(--dh-sage)}
.dps-badge{
    display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:14px;
    border:1px solid rgba(233,238,234,.22);border-radius:999px;
    font-size:13px;font-weight:700;color:rgba(233,238,234,.9);white-space:nowrap;
}
.dps-badge i{width:8px;height:8px;border-radius:50%;background:var(--dh-ember);animation:dps-pulse 2.4s ease-out infinite}
@keyframes dps-pulse{
    0%{box-shadow:0 0 0 0 rgba(242,84,45,.55)}
    70%,100%{box-shadow:0 0 0 8px rgba(242,84,45,0)}
}

/* Grid */
.dps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.dps-item{
    display:flex;flex-direction:column;
    padding:0 clamp(14px,2.2vw,32px);
    border-inline-start:1px solid rgba(233,238,234,.12);
}
.dps-item:first-child{border-inline-start:0;padding-inline-start:0}
.dps-item:last-child{padding-inline-end:0}

/* Value row (font-size drives the whole odometer, in em) */
.dps-value{
    display:flex;align-items:center;gap:.2em;
    margin:.5em 0 .45em;font-size:clamp(30px,3.6vw,52px);line-height:1;
}
.dps-unit{font-size:.4em;font-weight:800;color:var(--dh-ember);white-space:nowrap}

/* Odometer */
.dps-odo{display:inline-flex;direction:ltr;align-items:center;font-weight:900;color:var(--dh-mist);white-space:nowrap}
.dps-s{display:block;padding-inline:.03em;line-height:1}
.dps-s.is-sep{color:var(--dh-sage);font-weight:700}
.dps-d{position:relative;display:block;flex:0 0 .6em;width:.6em;height:1em}
.dps-win{
    position:absolute;left:0;right:0;top:-.5em;height:2em;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.32) 24%,#000 38%,#000 62%,rgba(0,0,0,.32) 76%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.32) 24%,#000 38%,#000 62%,rgba(0,0,0,.32) 76%,transparent 100%);
}
.dps-strip{
    position:absolute;left:0;right:0;top:.5em;
    transform:translateY(calc(var(--n,0) * -1em));
    transition:transform var(--dur,1.6s) cubic-bezier(.16,1,.3,1);
    will-change:transform;
}
.dps-strip i{display:block;height:1em;line-height:1;text-align:center;font-style:normal}

/* The ember cell (last digit of the flagged stat) */
.dps-d.is-hot::before{
    content:"";position:absolute;left:-.05em;right:-.05em;top:-.24em;bottom:-.24em;
    border-radius:.16em;background:var(--dh-ember);
}
.dps-d.is-hot .dps-win{color:var(--dh-pine)}

/* Uptime tick meter (always reserves its row so labels stay aligned) */
.dps-meter{display:flex;align-items:flex-end;gap:2px;height:14px;margin:0 0 14px}
.dps-meter i{
    flex:1 1 0;min-width:1px;height:62%;border-radius:1px;background:rgba(233,238,234,.3);
    transform:scaleY(.15);transform-origin:bottom;opacity:.3;
    transition:transform .5s ease,opacity .5s ease;transition-delay:calc(var(--i,0) * 14ms);
}
.dps-meter i.is-hit{height:100%;background:var(--dh-ember)}
.dps-item.is-counted .dps-meter i{transform:scaleY(1);opacity:1}

.dps-label{
    display:flex;align-items:center;gap:8px;margin:0;
    font-size:15px;font-weight:600;line-height:1.6;color:rgba(233,238,234,.9);
}
.dps-label i{flex:0 0 auto;font-size:14px;color:var(--dh-ember)}

/* Tech row */
.dps-techrow{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;
    margin-top:clamp(32px,4vw,52px);padding-top:24px;border-top:1px solid rgba(233,238,234,.12);
}
.dps-techrow__title{margin:0;font-size:14px;font-weight:600;color:var(--dh-sage)}
.dps-tech{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;direction:ltr;margin:0;padding:0;list-style:none}
.dps-tech li{
    display:inline-flex;align-items:center;gap:14px;
    font-size:clamp(15px,1.5vw,18px);font-weight:600;color:rgba(233,238,234,.7);
    transition:color .25s ease;
}
.dps-tech li + li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--dh-sage);opacity:.6}
.dps-tech li:hover{color:var(--dh-ember)}

@media (max-width:991px){
    .dps-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
    .dps-item:nth-child(odd){border-inline-start:0;padding-inline-start:0}
    .dps-item:nth-child(even){padding-inline-end:0}
    .dps-value{font-size:clamp(30px,6vw,48px)}
}
@media (max-width:575px){
    .dps-panel{padding:22px}
    .dps-item{padding-inline:12px}
    .dps-item:nth-child(odd){padding-inline-start:0}
    .dps-value{font-size:30px}
    .dps-label{font-size:14px}
    .dps-techrow{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
    .dps-badge i{animation:none}
    .dps-strip,.dps-meter i{transition:none}
}

/* ==========================================================================
   FEATURES / WHY CHOOSE US
   light mist background · paper active row · pine/ember contrast
   ========================================================================== */
:root {
    --dh-paper: #F7F9F6;
    --dh-moss-grey: #55645B;
    --dh-hairline-l: #C9D2CB;
    --dh-gap: clamp(72px, 9vw, 136px); /* فاصله‌ی واحد بین سکشن‌های هم‌رنگ */
}

.dpf-sec {
    background: var(--dh-mist);
    padding-block: calc(var(--dh-gap) / 2);
    border: 0;
}

/* Header */
.dpf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(48px, 6vw, 72px);
}
.dpf-head__title {
    margin: 0 0 10px;
    font-size: clamp(36px, 4.5vw, 52px);
    font-weight: 900;
    line-height: 1.25;
    color: var(--dh-pine);
    letter-spacing: -1px;
}
.dpf-head__sub {
    margin: 0;
    font-size: 16px;
    color: var(--dh-moss-grey);
}
.dpf-head__btn {
    height: 48px;
    padding-inline: 26px;
    border-color: var(--dh-pine);
    color: var(--dh-pine);
    border-radius: 999px;
    font-size: 15px;
}
.dpf-head__btn:hover {
    background: var(--dh-pine);
    color: var(--dh-mist);
}

/* Grid Layout */
.dpf-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: flex-start;
}

/* Left Column: Visual Panel */
.dpf-panel {
    position: sticky;
    top: calc(var(--dp-header-h) + 32px);
    height: 560px;
    border-radius: 28px;
    background: var(--dh-pine);
    box-shadow: inset 0 1px 0 rgba(233,238,234,.14);
    overflow: hidden;
    isolation: isolate;
}
.dpf-panel::before {
    /* 3% Film Grain */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .03; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.dpf-panel__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    /* Scale up slightly to bleed off edges as requested */
    transform: scale(1.08); 
}

/* Frosted Chip inside Panel */
.dpf-chip {
    position: absolute;
    z-index: 2;
    bottom: 24px;
    inset-inline-start: 24px; /* RTL physical left */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(17, 42, 35, .8); /* Deep moss 80% */
    border: 1px solid rgba(233,238,234,.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.dpf-chip__top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dh-mist);
    direction: ltr; /* Keeps NVMe SSD readable */
}
.dpf-chip__top i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dh-ember);
}
.dpf-chip__barcode {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
}
.dpf-chip__barcode i {
    width: 2px;
    height: 10px;
    border-radius: 1px;
    background: rgba(143,163,153,.4); /* Sage opacity */
}
.dpf-chip__barcode i.is-hit {
    height: 18px;
    background: var(--dh-ember);
}

/* Right Column: Accordion List */
.dpf-list {
    display: flex;
    flex-direction: column;
}
.dpf-item {
    position: relative;
    padding: 24px 0;
    border-top: 1px solid var(--dh-hairline-l);
    transition: all .35s cubic-bezier(.2,.8,.2,1);
}
/* Negative margin strategy for active row expansion without layout shift */
.dpf-item.is-active {
    padding: 28px;
    margin: 0 -28px;
    background: var(--dh-paper);
    border-radius: 28px;
    border-color: transparent;
    z-index: 2;
    box-shadow: 0 24px 48px -20px rgba(10,29,24,.05);
}
.dpf-item.is-active + .dpf-item {
    border-top-color: transparent;
}

.dpf-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
}
.dpf-item__right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.dpf-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dh-ember);
    opacity: 0;
    transform: scale(0);
    transition: all .3s ease;
}
.dpf-item.is-active .dpf-item__dot {
    opacity: 1;
    transform: scale(1);
}

.dpf-item__title {
    margin: 0;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: rgba(10,29,24,.66); /* Pine night 66% — کنتراست ≈۵:۱ */
    transition: color .3s ease;
}
.dpf-item.is-active .dpf-item__title {
    color: var(--dh-pine);
}

.dpf-item__left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dpf-item__badge {
    padding: 4px 14px;
    border: 1px solid var(--dh-hairline-l);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dh-moss-grey);
    white-space: nowrap;
}

/* Action Button (+/-) */
.dpf-action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--dh-hairline-l);
    background: transparent;
    transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.dpf-action::before,
.dpf-action::after {
    content: "";
    position: absolute;
    background: var(--dh-pine);
    border-radius: 1px;
    transition: all .3s ease;
}
.dpf-action::before { width: 12px; height: 2px; }
.dpf-action::after { width: 2px; height: 12px; }

.dpf-item.is-active .dpf-action {
    width: 44px;
    height: 44px;
    background: var(--dh-ember);
    border-color: var(--dh-ember);
}
.dpf-item.is-active .dpf-action::before { background: var(--dh-pine); }
.dpf-item.is-active .dpf-action::after { transform: rotate(90deg); opacity: 0; }

/* Accordion Body */
.dpf-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1);
}
.dpf-item.is-active .dpf-item__body {
    grid-template-rows: 1fr;
}
.dpf-item__inner {
    overflow: hidden;
}
.dpf-item__text {
    margin: 14px 0 0 22px; /* Aligns with text start */
    font-size: 16px;
    line-height: 1.9;
    color: var(--dh-moss-grey);
}

/* Responsive */
@media (max-width: 991px) {
    .dpf-grid { grid-template-columns: 1fr; gap: 48px; }
    .dpf-panel { position: relative; top: 0; height: 380px; }
    .dpf-item.is-active { padding: 24px 12px; margin: 0 -12px; }
    .dpf-item__title { font-size: 28px; }
    .dpf-item__badge { display: none; } /* Hide chip on mobile to save space */
}
@media (prefers-reduced-motion: reduce) {
    .dpf-item, .dpf-action, .dpf-item__body { transition: none; }
}
/* ==========================================================================
   FEATURES — جابه‌جایی تصویر (چپ) و لیست (راست) + اصلاحات
   این بلوک را «در انتهای custom.css» (بعد از همهٔ قوانین .dpf-*) بچسبانید.
   ========================================================================== */

/* دسکتاپ: لیست = ستون راست (پهن‌تر) ، تصویر = ستون چپ */
@media (min-width: 992px) {
    .dpf-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .dpf-list-col   { order: 1; }
    .dpf-visual-col { order: 2; }
}

/* چیپ شیشه‌ای: گوشهٔ پایین-چپ تصویر (سمت داخلی لبهٔ چپ) */
.dpf-chip { inset-inline-start: auto; inset-inline-end: 24px; }

/* متن توضیح هم‌تراز با عنوان (نقطهٔ نارنجی سمت راست است، نه چپ) */
.dpf-item__text { margin: 14px 22px 0 0; }

/* تیک‌های چیپ با آیتم فعال هماهنگ می‌شوند (JS کلاس is-on را می‌گذارد) */
.dpf-chip__barcode i.is-hit {
    opacity: .45;
    transform-origin: bottom;
    transition: opacity .3s ease, transform .3s ease;
}
.dpf-chip__barcode i.is-hit.is-on { opacity: 1; transform: scaleY(1.3); }

/* فوکوس کیبورد روی ردیف‌ها */
.dpf-item__trigger:focus-visible { outline: 2px solid var(--dh-ember); outline-offset: 6px; border-radius: 12px; }

@media (max-width: 991px) {
    .dpf-item__text { margin-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .dpf-chip__barcode i.is-hit { transition: none; }
}

/* ==========================================================================
   DOMAIN PROMO — پنل تیره (pine) هماهنگ با آمار و هیرو
   به «انتهای» custom.css اضافه کنید (بعد از features-swap.css)
   ========================================================================== */
.dpd-sec{background:var(--dh-mist);padding-block:calc(var(--dh-gap) / 2)}

.dp-promo.dpd-panel{
    position:relative;overflow:hidden;isolation:isolate;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);
    align-items:center;gap:clamp(24px,4vw,56px);
    padding:clamp(28px,4.5vw,60px);
    border:1px solid rgba(233,238,234,.1);border-radius:32px;
    background:
        radial-gradient(420px 420px at 0% 100%,rgba(242,84,45,.16),transparent 70%),
        radial-gradient(90% 120% at 10% 0%,#17382e 0%,var(--dh-pine) 62%);
    box-shadow:0 40px 80px -48px rgba(10,29,24,.7),inset 0 1px 0 rgba(233,238,234,.1);
}

.dpd-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:5px 14px;border:1px solid rgba(233,238,234,.16);border-radius:999px;font-size:13px;font-weight:700;color:var(--dh-sage)}
.dpd-eyebrow i{color:var(--dh-ember);font-size:12px}
.dp-promo.dpd-panel .dp-promo__title{margin:0 0 10px;font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.3;color:var(--dh-mist)}
.dp-promo.dpd-panel .dp-promo__text{margin:0 0 28px;font-size:16px;line-height:1.9;color:var(--dh-sage)}

/* form (variant --light روی زمینهٔ تیره) */
.dp-promo.dpd-panel .dp-domain-form{margin:0;max-width:600px}
.dp-promo.dpd-panel .dp-domain-form__box,
.dp-promo.dpd-panel .dp-domain-form__box.is-focused{
    max-width:none;padding:6px;gap:8px;border-radius:999px;
    background:rgba(233,238,234,.07);border:1px solid rgba(233,238,234,.16);box-shadow:none;
    transition:border-color .25s ease,box-shadow .25s ease;
}
.dp-promo.dpd-panel .dp-domain-form__box.is-focused{border-color:rgba(242,84,45,.6);box-shadow:0 0 0 4px rgba(242,84,45,.14)}
.dp-promo.dpd-panel .dp-domain-form__box.has-error{border-color:#ff7a5c}
.dp-promo.dpd-panel .dp-domain-form__input{height:50px;font-size:18px;font-weight:600;color:var(--dh-mist);direction:ltr;text-align:right}
.dp-promo.dpd-panel .dp-domain-form__input::placeholder{color:rgba(143,163,153,.7)}
.dp-promo.dpd-panel .dp-domain-form__tld{
    appearance:none;-webkit-appearance:none;direction:ltr;text-align:left;
    height:42px;padding:0 32px 0 16px;border:0;border-radius:999px;
    background:rgba(233,238,234,.1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23E9EEEA' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 12px center;
    color:var(--dh-mist);font-size:15px;font-weight:700;cursor:pointer;
}
.dp-promo.dpd-panel .dp-domain-form__tld option{background:var(--dh-moss);color:var(--dh-mist)}
.dp-promo.dpd-panel .dp-domain-form__submit{height:50px;padding-inline:28px;border-radius:999px;background:var(--dh-ember);color:var(--dh-pine);box-shadow:0 10px 26px -10px rgba(242,84,45,.7)}
.dp-promo.dpd-panel .dp-domain-form__submit:hover,
.dp-promo.dpd-panel .dp-domain-form__submit:focus{background:#ff6a43;color:var(--dh-pine)}
.dp-promo.dpd-panel .dp-domain-form__msg{padding:8px 18px 0;color:#ffab95}

/* TLD chips + transfer link */
.dpd-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:20px;max-width:600px}
.dpd-tlds{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;direction:ltr}
.dpd-tld{
    height:34px;padding-inline:14px;border:1px solid rgba(233,238,234,.2);border-radius:999px;
    background:transparent;font-family:inherit;font-size:13px;font-weight:700;color:var(--dh-mist);cursor:pointer;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.dpd-tld:hover{border-color:rgba(233,238,234,.5)}
.dpd-tld.is-active{background:var(--dh-mist);border-color:var(--dh-mist);color:var(--dh-pine)}
@media (max-width:991px),(pointer:coarse){
    .dpd-tlds{gap:10px}
    .dpd-tld{height:44px;padding-inline:18px;font-size:14px}
}
.dp-promo.dpd-panel .dpd-transfer{display:inline-flex;align-items:center;min-height:44px;color:var(--dh-sage)}
.dp-promo.dpd-panel .dpd-transfer:hover{color:var(--dh-ember)}

/* visual: globe با حلقه‌های مدار */
.dp-promo.dpd-panel .dp-promo__visual{position:relative;display:grid;place-items:center;align-content:center;gap:14px;min-height:260px}
.dp-promo.dpd-panel .dp-promo__globe{
    position:relative;z-index:1;width:112px;height:112px;font-size:46px;
    background:var(--dh-ember);color:var(--dh-pine);
    box-shadow:0 0 0 10px rgba(242,84,45,.14),0 24px 50px -16px rgba(242,84,45,.7);
}
.dp-promo.dpd-panel .dp-promo__www{position:relative;z-index:1;font-size:13px;letter-spacing:4px;color:var(--dh-sage)}
.dpd-orbit{position:absolute;top:50%;left:50%;border:1px solid rgba(233,238,234,.12);border-radius:50%;transform:translate(-50%,-62%)}
.dpd-orbit--1{width:200px;height:200px}
.dpd-orbit--2{width:290px;height:290px;border-style:dashed;border-color:rgba(233,238,234,.08);animation:dpd-spin 60s linear infinite}
@keyframes dpd-spin{to{transform:translate(-50%,-62%) rotate(360deg)}}

/* ---- Pointer glow: JS مقدار --mx / --my / --glow را می‌گذارد ---- */
.dp-promo.dpd-panel{--mx:50%;--my:50%;--glow:0}
.dp-promo.dpd-panel::before,
.dp-promo.dpd-panel::after{
    content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
    opacity:var(--glow);transition:opacity .35s ease;
}
/* لبهٔ نارنجی که زیر موس پررنگ می‌شود */
.dp-promo.dpd-panel::before{
    padding:1.5px;
    background:radial-gradient(240px circle at var(--mx) var(--my),#F2542D,rgba(242,84,45,.35) 45%,transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* نور نرم داخل پنل */
.dp-promo.dpd-panel::after{
    background:radial-gradient(380px circle at var(--mx) var(--my),rgba(242,84,45,.26),transparent 70%);
}
.dp-promo.dpd-panel > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.dp-promo.dpd-panel::before,.dp-promo.dpd-panel::after{transition:none}}

@media (max-width:991px){
    .dp-promo.dpd-panel{grid-template-columns:1fr}
    .dp-promo.dpd-panel .dp-promo__visual{order:-1;min-height:150px;place-items:start}
    .dp-promo.dpd-panel .dp-promo__globe{width:84px;height:84px;font-size:34px}
    .dpd-orbit{display:none}
}
@media (max-width:575px){
    .dp-promo.dpd-panel{border-radius:24px}
    .dp-promo.dpd-panel .dp-domain-form__box{flex-wrap:wrap;border-radius:26px}
    .dp-promo.dpd-panel .dp-domain-form__input{order:1;flex:1 1 100%}
    .dp-promo.dpd-panel .dp-domain-form__tld{order:2}
    .dp-promo.dpd-panel .dp-domain-form__submit{order:3;flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.dpd-orbit--2{animation:none}}

/* ==========================================================================
   DASHBOARD SHOWCASE — mist section, paper window, pine tiles, ember accents
   ========================================================================== */
.dpm-sec{background:var(--dh-mist);border:0;padding-block:calc(var(--dh-gap) / 2)}
.dpm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(32px,5vw,72px)}

/* Content */
.dpm-title{margin:0 0 16px;font-size:clamp(30px,3.8vw,48px);font-weight:900;line-height:1.3;color:var(--dh-pine)}
.dpm-sub{margin:0 0 32px;max-width:46ch;font-size:16px;line-height:1.95;color:#55645B}

.dpm-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0 0 32px;padding:0;list-style:none;border-top:1px solid #C9D2CB}
.dpm-benefits li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #C9D2CB;font-size:15px;font-weight:600;color:var(--dh-pine)}
.dpm-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--dh-ember)}

.dpm-link{display:inline-flex;align-items:center;min-height:44px;gap:10px;font-size:16px;font-weight:800;color:var(--dh-pine);transition:gap .25s ease,color .25s ease}
.dpm-link i{font-size:13px;color:var(--dh-ember)}
.dpm-link:hover{gap:16px;color:var(--dh-ember)}

/* Window */
.dpm-window{
    position:relative;overflow:hidden;border-radius:28px;
    background:var(--dh-paper,#F7F9F6);border:1px solid #C9D2CB;
    box-shadow:0 40px 80px -48px rgba(10,29,24,.35),inset 0 1px 0 rgba(255,255,255,.7);
}
.dpm-window__bar{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid #C9D2CB}
.dpm-window__dots{display:flex;gap:6px}
.dpm-window__dots i{width:9px;height:9px;border-radius:50%;background:#C9D2CB}
.dpm-window__live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#55645B}
.dpm-window__live i{width:7px;height:7px;border-radius:50%;background:var(--dh-ember);animation:dpm-pulse 2.4s ease-out infinite}
@keyframes dpm-pulse{0%{box-shadow:0 0 0 0 rgba(242,84,45,.5)}70%,100%{box-shadow:0 0 0 7px rgba(242,84,45,0)}}

.dpm-window__body{padding:24px}

/* Tiles */
.dpm-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:28px}
.dpm-tile{display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-radius:20px;background:var(--dh-pine);box-shadow:inset 0 1px 0 rgba(233,238,234,.1)}
.dpm-tile__label{font-size:13px;font-weight:600;color:var(--dh-sage)}
.dpm-tile__value{font-size:clamp(36px,3.6vw,48px);font-weight:900;line-height:1;color:var(--dh-mist)}

/* Meters */
.dpm-meters{display:grid;gap:18px;margin-bottom:28px}
.dpm-meter__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;font-size:13px;font-weight:600;color:#55645B}
.dpm-meter__top b{font-weight:800;color:var(--dh-pine)}
.dpm-meter__track{display:block;height:6px;border-radius:999px;background:rgba(10,29,24,.1)}
.dpm-meter__fill{
    position:relative;display:block;height:100%;width:0;border-radius:999px;background:var(--dh-pine);
    transition:width 1.3s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 140ms);
}
.dpm-meter__fill::after{content:"";position:absolute;inset-inline-end:-3px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--dh-ember);box-shadow:0 0 0 3px var(--dh-paper,#F7F9F6)}
.dpm-window.is-in .dpm-meter__fill{width:var(--w)}

/* Log */
.dpm-caption{margin:0 0 6px;font-size:13px;font-weight:700;color:#55645B}
.dpm-log{margin:0;padding:0;list-style:none}
.dpm-log li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #C9D2CB;font-size:14px;font-weight:600;color:var(--dh-pine)}
.dpm-log li i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--dh-ember)}

.dpm-sec :focus-visible{outline:2px solid var(--dh-ember);outline-offset:3px}

@media (max-width:991px){
    .dpm-grid{grid-template-columns:1fr}
}
@media (max-width:575px){
    .dpm-benefits{grid-template-columns:1fr}
    .dpm-window__body{padding:18px}
    .dpm-tile{padding:16px}
}
@media (prefers-reduced-motion:reduce){
    .dpm-window__live i{animation:none}
    .dpm-meter__fill{transition:none;width:var(--w)}
}
/* ==========================================================================
   TESTIMONIALS — dark band, infinite marquee, blurred ends
   ========================================================================== */
.dpq-sec{background:var(--dh-mist);border:0;padding-block:calc(var(--dh-gap) / 2) calc(var(--dh-gap) * .75)}

.dpq-band{
    position:relative;overflow:hidden;isolation:isolate;
    width:min(100% - 40px,1600px);margin-inline:auto;
    padding-block:clamp(48px,6vw,88px);
    border-radius:clamp(28px,3.4vw,48px);
    background:var(--dh-pine);color:var(--dh-mist);
    box-shadow:inset 0 1px 0 rgba(233,238,234,.08),0 40px 80px -48px rgba(10,29,24,.7);
}
.dpq-band::before{ /* film grain */
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Head */
.dpq-head{margin-bottom:clamp(32px,4vw,56px)}
.dpq-head__title{margin:0 0 10px;font-size:clamp(28px,3.6vw,48px);font-weight:900;line-height:1.3;color:var(--dh-mist)}
.dpq-head__sub{margin:0;font-size:16px;line-height:1.9;color:var(--dh-sage)}

/* Marquee + blurred end zones */
.dpq-marquee{position:relative;overflow:hidden;padding-block:8px}
.dpq-marquee::before,
.dpq-marquee::after{
    content:"";position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;
    width:clamp(28px,13vw,220px); /* موبایل: ناحیه‌ی محو باریک‌تر تا کارت‌ها زیر لکه‌ی تار گم نشوند */
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.dpq-marquee::before{
    right:0;
    background:linear-gradient(to left,var(--dh-pine) 6%,rgba(10,29,24,0));
    -webkit-mask-image:linear-gradient(to left,#000 35%,transparent);mask-image:linear-gradient(to left,#000 35%,transparent);
}
.dpq-marquee::after{
    left:0;
    background:linear-gradient(to right,var(--dh-pine) 6%,rgba(10,29,24,0));
    -webkit-mask-image:linear-gradient(to right,#000 35%,transparent);mask-image:linear-gradient(to right,#000 35%,transparent);
}

.dpq-track{
    display:flex;width:max-content;
    animation:dpq-run var(--dpq-speed,70s) linear infinite;will-change:transform;
}
.dpq-marquee:hover .dpq-track,
.dpq-marquee.is-paused .dpq-track{animation-play-state:paused}
/* 4 identical copies: moving by 50% (2 copies) loops seamlessly. RTL: moves toward the end. */
@keyframes dpq-run{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* Card */
.dpq-card{
    flex:0 0 clamp(280px,26vw,380px);width:clamp(280px,26vw,380px);
    margin:0;margin-inline-end:22px;padding:28px;
    display:flex;flex-direction:column;
    border-radius:24px;background:var(--dh-moss);border:1px solid rgba(233,238,234,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
    transition:border-color .3s ease;
}
.dpq-card:hover{border-color:rgba(242,84,45,.55)}

.dpq-card__rate{display:flex;gap:3px;margin-bottom:20px}
.dpq-card__rate i{width:3px;height:16px;border-radius:2px;background:var(--dh-ember)}

.dpq-card__quote{flex:1 1 auto;margin:0 0 24px;padding:0;border:0;font-size:16px;line-height:2;color:rgba(233,238,234,.92)}

.dpq-card__author{display:flex;align-items:center;gap:12px;margin:0;padding-top:20px;border-top:1px solid rgba(233,238,234,.12)}
.dpq-card__avatar{
    flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
    background:var(--dh-pine);border:1px solid rgba(233,238,234,.16);
    font-size:17px;font-weight:800;color:var(--dh-mist);
}
.dpq-card__name{display:block;font-size:16px;font-weight:800;color:var(--dh-mist)}
.dpq-card__role{display:block;font-size:13px;color:var(--dh-sage)}

/* Accent card: every 3rd (the 2nd of each set), same language as the active plan */
.dpq-card--hot{
    background:var(--dh-ember);border-color:transparent;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 50px -24px rgba(242,84,45,.5);
}
.dpq-card--hot:hover{border-color:transparent}
.dpq-card--hot .dpq-card__rate i{background:var(--dh-pine)}
.dpq-card--hot .dpq-card__quote,
.dpq-card--hot .dpq-card__name{color:var(--dh-pine)}
.dpq-card--hot .dpq-card__role{color:rgba(10,29,24,.7)}
.dpq-card--hot .dpq-card__author{border-top-color:rgba(10,29,24,.2)}
.dpq-card--hot .dpq-card__avatar{background:rgba(10,29,24,.1);border-color:rgba(10,29,24,.25);color:var(--dh-pine)}

@media (max-width:575px){
    .dpq-card{padding:22px;margin-inline-end:16px}
    .dpq-card__quote{font-size:15px}
}

/* Reduced motion: no marquee, a plain scrollable row of the 3 originals */
@media (prefers-reduced-motion:reduce){
    .dpq-track{animation:none}
    .dpq-marquee{overflow-x:auto;scrollbar-width:none}
    .dpq-marquee::-webkit-scrollbar{display:none}
    .dpq-card[aria-hidden="true"]{display:none}
}
/* ==========================================================================
   FINAL CTA — editorial pine panel (.dpc-*)
   ========================================================================== */
.dpc-sec{background:var(--dh-mist);border:0;padding-block:clamp(40px,5vw,72px) clamp(64px,8vw,112px)}

.dpc-panel{
    position:relative;overflow:hidden;isolation:isolate;
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;
    gap:clamp(24px,4vw,56px);
    padding:clamp(36px,6vw,88px);
    border-radius:clamp(28px,3.4vw,48px);
    background:radial-gradient(80% 120% at 100% 0%,#17382e 0%,var(--dh-pine) 60%);
    color:var(--dh-mist);
    box-shadow:inset 0 1px 0 rgba(233,238,234,.1),0 40px 80px -48px rgba(10,29,24,.7);
}
.dpc-panel__grain{
    position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.dpc-title{margin:0 0 16px;font-size:clamp(32px,4.6vw,60px);font-weight:900;line-height:1.25;color:var(--dh-mist);letter-spacing:-.5px}
.dpc-desc{max-width:50ch;margin:0 0 clamp(26px,3.4vw,40px);font-size:clamp(15px,1.5vw,18px);line-height:1.95;color:var(--dh-sage)}
.dpc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}

.dpc-btn{gap:12px}
.dpc-btn i{font-size:13px;transition:transform .25s ease}
.dpc-btn:hover i{transform:translateX(-4px)}
.dpc-btn--outline{
    display:inline-flex;align-items:center;justify-content:center;height:54px;padding-inline:30px;
    border:1px solid rgba(233,238,234,.34);border-radius:999px;
    font-size:16px;font-weight:700;color:var(--dh-mist);text-decoration:none;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.dpc-btn--outline:hover,.dpc-btn--outline:focus{background:var(--dh-mist);border-color:var(--dh-mist);color:var(--dh-pine)}

/* Visual: ember circle + vertical "uptime" bars */
.dpc-visual{position:relative;min-height:clamp(180px,22vw,300px);display:grid;place-items:center}
.dpc-circle{
    position:relative;z-index:1;width:clamp(150px,17vw,240px);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle at 32% 28%,#ff7a55,var(--dh-ember) 60%);
    box-shadow:0 0 0 14px rgba(242,84,45,.12),0 0 0 34px rgba(242,84,45,.06),0 40px 80px -24px rgba(242,84,45,.65);
}
.dpc-lines{position:absolute;inset:0;z-index:0;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-inline:4%}
.dpc-lines i{flex:1;max-width:3px;border-radius:2px;background:rgba(143,163,153,.32)}
.dpc-lines i:nth-child(1){height:46%}
.dpc-lines i:nth-child(2){height:78%;background:rgba(242,84,45,.7)}
.dpc-lines i:nth-child(3){height:58%}

.dpc-sec :focus-visible{outline:2px solid var(--dh-ember);outline-offset:3px}

@media (max-width:991px){
    .dpc-panel{grid-template-columns:1fr}
    .dpc-visual{order:-1;min-height:130px;place-items:start}
    .dpc-circle{width:96px}
    .dpc-lines{display:none}
}
@media (max-width:575px){
    .dpc-actions .dp-btn,.dpc-btn--outline{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.dpc-btn i{transition:none}}

/* ==========================================================================
   FOOTER V2 — pine panel, newsletter band, flashlight wordmark (.dpft-*)
   به «انتهای» custom.css اضافه کنید. قوانین قدیمی .dp-footer باقی می‌مانند
   و با این بلوک override می‌شوند (می‌توانید بعداً حذفشان کنید).
   ========================================================================== */
.dp-footer.dpft{
    --mx:50%;--my:50%;--glow:0;
    position:relative;isolation:isolate;overflow:hidden;
    padding:clamp(40px,5vw,72px) 0 clamp(72px,11vw,170px);
    background:var(--dh-pine);color:var(--dh-mist);
    border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;
    box-shadow:inset 0 1px 0 rgba(233,238,234,.12);
}
.dp-footer.dpft::before{ /* film grain */
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.dpft-spot{ /* soft ember light that follows the pointer */
    position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--glow);transition:opacity .4s ease;
    background:radial-gradient(420px circle at var(--mx) var(--my),rgba(242,84,45,.13),transparent 70%);
}
.dpft-inner{position:relative;z-index:2}

/* ---- Newsletter band ---- */
.dpft-news{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,56px);
    padding:clamp(24px,3.6vw,44px) clamp(22px,3.6vw,48px);margin-bottom:clamp(36px,5vw,72px);
    border:1px solid rgba(233,238,234,.12);border-radius:32px;
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.dpft-news__title{margin:0 0 8px;font-size:clamp(24px,3vw,38px);font-weight:900;line-height:1.35;color:var(--dh-mist)}
.dpft-news__sub{margin:0;font-size:15px;line-height:1.9;color:var(--dh-sage)}

.dpft .dp-newsletter{
    display:flex;align-items:center;gap:8px;max-width:none;padding:6px;
    border:1px solid rgba(233,238,234,.16);border-radius:999px;background:rgba(10,29,24,.55);
    transition:border-color .25s ease,box-shadow .25s ease;
}
.dpft .dp-newsletter:focus-within{border-color:rgba(242,84,45,.6);box-shadow:0 0 0 4px rgba(242,84,45,.14)}
.dpft .dp-newsletter__input{flex:1 1 auto;min-width:0;height:48px;padding-inline:18px;border:0;background:transparent;font-size:16px;color:var(--dh-mist);text-align:right}
.dpft .dp-newsletter__input::placeholder{color:rgba(143,163,153,.75);text-align:right}
.dpft .dp-newsletter__submit{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;width:auto;height:48px;padding-inline:24px;
    border:0;border-radius:999px;background:var(--dh-ember);color:var(--dh-pine);
    font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;
    box-shadow:0 10px 26px -10px rgba(242,84,45,.7);transition:background .2s ease,transform .2s ease;
}
.dpft .dp-newsletter__submit:hover{background:#ff6a43;transform:translateY(-1px)}
.dpft .dp-newsletter__submit i{font-size:12px;transition:transform .25s ease}
.dpft .dp-newsletter__submit:hover i{transform:translateX(-4px)}
.dpft .dp-newsletter__msg{margin:10px 18px 0;font-size:13px;color:#9be5b4}
.dpft .dp-newsletter__msg.is-error{color:#ffab95}

/* ---- Brand + columns ---- */
.dpft-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,5vw,80px);padding-bottom:clamp(32px,4vw,56px)}
.dpft-brand__name{
    display:inline-flex;align-items:baseline;gap:5px;margin-bottom:16px;
    font-size:clamp(28px,3vw,38px);font-weight:900;letter-spacing:-.5px;color:var(--dh-mist);text-decoration:none;
}
.dpft-brand__name:hover{color:var(--dh-mist);text-decoration:none}
.dpft-brand__dot{width:10px;height:10px;border-radius:50%;background:var(--dh-ember);display:inline-block;box-shadow:0 0 0 5px rgba(242,84,45,.18)}
.dpft-brand__text{max-width:34ch;margin:0 0 24px;font-size:15px;line-height:1.95;color:var(--dh-sage)}

.dpft .dp-social{display:flex;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.dpft .dp-social a{
    display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
    border:1px solid rgba(233,238,234,.18);border-radius:50%;background:transparent;
    font-size:15px;color:var(--dh-mist);
    transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.dpft .dp-social a:hover{background:var(--dh-ember);border-color:var(--dh-ember);color:var(--dh-pine);transform:translateY(-3px)}

.dpft-status{
    display:inline-flex;align-items:center;gap:14px;padding:9px 16px;
    border:1px solid rgba(233,238,234,.12);border-radius:999px;background:rgba(233,238,234,.05);
    font-size:13px;font-weight:700;color:var(--dh-sage);text-decoration:none;transition:border-color .25s ease,color .25s ease;
}
.dpft-status:hover{border-color:rgba(242,84,45,.55);color:var(--dh-mist);text-decoration:none}
.dpft-status__ticks{display:flex;align-items:flex-end;gap:2px;height:16px;direction:ltr}
.dpft-status__ticks i{width:2px;height:9px;border-radius:1px;background:rgba(143,163,153,.45)}
.dpft-status__ticks i.is-hit{height:16px;background:var(--dh-ember)}

.dpft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.dpft-col__title{
    display:flex;align-items:center;gap:10px;margin:0 0 20px;
    font-size:13px;font-weight:800;letter-spacing:.3px;color:var(--dh-sage);
}
.dpft-col__title::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--dh-ember)}
.dpft-col__list{margin:0;padding:0;list-style:none}
.dpft-col__list li{margin:0}
.dpft-col__list a{
    position:relative;display:inline-block;padding-block:7px;
    font-size:15px;font-weight:600;color:rgba(233,238,234,.82);text-decoration:none;
    transition:color .2s ease,transform .25s ease;
}
.dpft-col__list a::after{
    content:"";position:absolute;inset-inline:0;bottom:3px;height:1px;
    background:var(--dh-ember);transform:scaleX(0);transform-origin:right center;transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.dpft-col__list a:hover{color:#fff;text-decoration:none;transform:translateX(-4px)}
.dpft-col__list a:hover::after{transform:scaleX(1)}

/* ---- Bottom bar ---- */
.dpft-bottom{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
    padding-top:24px;border-top:1px solid rgba(233,238,234,.12);
}
.dpft-bottom__copy{margin:0;font-size:13px;color:var(--dh-sage)}
.dpft-bottom__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.dpft-bottom__meta a:not([referrerpolicy]){font-size:13px;color:var(--dh-sage);text-decoration:none;transition:color .2s ease}
.dpft-bottom__meta a:not([referrerpolicy]):hover{color:var(--dh-mist)}
.dpft .dp-footer__locale{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;font-family:inherit;font-size:13px;color:var(--dh-sage);cursor:pointer}
.dpft .dp-footer__locale:hover{color:var(--dh-mist)}
.dpft-enamad{display:inline-flex;padding:4px;border-radius:12px;background:#fff;line-height:0}
.dpft-enamad img{display:block;width:auto;height:44px}

/* ---- Giant wordmark ---- */
.dpft-mark{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;direction:ltr}
.dpft-mark span{
    position:absolute;inset:0 0 -.17em 0;display:flex;align-items:flex-end;justify-content:center;
    font-size:clamp(48px,12.4vw,230px);font-weight:900;line-height:.82;letter-spacing:-.045em;white-space:nowrap;
}
.dpft-mark__base{
    color:transparent;-webkit-text-stroke:1px rgba(233,238,234,.12);
    -webkit-mask-image:linear-gradient(to top,#000 25%,transparent 100%);mask-image:linear-gradient(to top,#000 25%,transparent 100%);
}
/* نسخهٔ نارنجی که فقط زیر نور موس دیده می‌شود (مختصات = مختصات فوتر) */
.dpft-mark__lit{
    color:var(--dh-ember);opacity:var(--glow);transition:opacity .4s ease;
    -webkit-mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000,transparent 70%);
            mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000,transparent 70%);
}

.dpft :focus-visible{outline:2px solid var(--dh-ember);outline-offset:3px}

@media (max-width:991px){
    .dpft-news{grid-template-columns:1fr}
    .dpft-main{grid-template-columns:1fr}
    .dpft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
}
@media (max-width:575px){
    .dpft-news{border-radius:24px}
    .dpft .dp-newsletter{flex-wrap:wrap;border-radius:26px}
    .dpft .dp-newsletter__input{flex:1 1 100%}
    .dpft .dp-newsletter__submit{flex:1 1 100%;justify-content:center}
    .dpft-bottom{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
    .dpft-spot,.dpft-mark__lit,.dpft-col__list a,.dpft-col__list a::after,.dpft .dp-social a{transition:none}
}

/* ==========================================================================
   HERO — ریسپانسیو تصویر سه‌بعدی (تبلت و موبایل)
   به «انتهای» custom.css اضافه کنید.
   روی دسکتاپ (≥۹۹۲px) تصویر مثل قبل پس‌زمینه‌ی سمت چپ است. زیر ۹۹۲px تصویر
   پس‌زمینه‌ی absolute نیست؛ یک بلوک مستقل زیر فرم است و پشته‌ی کامل دیده می‌شود.
   ========================================================================== */
@media (max-width: 991px) {
    .dp-hero { min-height: 0; }
    .dp-hero__inner { order: 1; flex: 0 0 auto; }

    .dp-hero__object {
        order: 2;
        position: relative;
        left: auto; top: auto; bottom: auto;
        width: min(100% - 24px, 640px);
        height: auto;
        aspect-ratio: 1.35 / 1;
        margin: 28px auto 0;
        transform: none;
        opacity: 1;
        background-size: cover;   /* عکس 2000×1091 است؛ قاب 1.35:1 کل پشته را در مرکز نشان می‌دهد */
        background-repeat: no-repeat;
        background-position: center;
        -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 50%, #000 42%, transparent 100%);
                mask-image: radial-gradient(ellipse 58% 56% at 50% 50%, #000 42%, transparent 100%);
        -webkit-mask-composite: source-over;
                mask-composite: add;
    }

    .dp-hero__uptime { order: 3; margin-top: 8px; }
}

@media (max-width: 575px) {
    .dp-hero__object {
        width: calc(100% - 8px);
        aspect-ratio: 1.3 / 1;
        margin-top: 20px;
    }
}

/* ==========================================================================
   ORDER FORM — صفحه‌ی هاستینگ (.dpo-*)   |  به «انتهای» custom.css اضافه کنید
   همان زبان بصری صفحه‌ی اصلی: mist / pine / ember
   ========================================================================== */
/* ---- Theme chrome reset (class .dpo-body را همان اسکریپت بالای تپل روی <body> می‌گذارد) ---- */
body.dpo-body{background:var(--dh-mist) !important;overflow-x:hidden}
body.dpo-body #main-body{padding:0 !important;margin:0 !important;background:transparent !important}
body.dpo-body #main-body > .container,
body.dpo-body #main-body > .container-fluid{width:100% !important;max-width:none !important;padding:0 !important}
body.dpo-body #main-body .row{margin-inline:0 !important}
body.dpo-body #main-body .primary-content{float:none !important;flex:0 0 100% !important;width:100% !important;max-width:100% !important;padding:0 !important;background:transparent !important}
body.dpo-body #main-body .sidebar,
body.dpo-body .master-breadcrumb{display:none !important}

.dpo-page{
    --dpo-gap:clamp(56px,7vw,104px);
    position:relative;direction:rtl;width:100%;max-width:100%;overflow-x:clip;color:var(--dh-pine);
    background:var(--dh-mist);
}
.dpo-page *{min-width:0}
.dpo-in{width:min(100% - 40px,1200px);margin-inline:auto}
.dpo-sec{padding-block:var(--dpo-gap)}
.dpo-page a{text-decoration:none}

/* ---- Hero ---- */
.dpo-hero{
    position:relative;isolation:isolate;overflow:hidden;margin:0;
    display:flex;align-items:center;min-height:clamp(460px,64vh,640px);
    padding-block:clamp(40px,6vw,88px);
    border-radius:0 0 clamp(32px,4vw,64px) clamp(32px,4vw,64px);
    background:radial-gradient(80% 120% at 100% 0%,#17382e 0%,var(--dh-pine) 62%);
    box-shadow:inset 0 -1px 0 rgba(233,238,234,.1);
}
.dpo-hero__inner{position:relative;width:min(100% - 40px,1200px)}
.dpo-hero__grain{
    position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.dpo-hero__object{
    position:absolute;z-index:-1;left:-4%;top:4%;bottom:4%;width:54%;
    background-size:cover;background-position:center;background-repeat:no-repeat;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 42%,transparent 100%);
            mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 42%,transparent 100%);
}
.dpo-hero__content{position:relative;max-width:560px}
.dpo-eyebrow{
    display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 16px;
    border:1px solid rgba(233,238,234,.16);border-radius:999px;font-size:13px;font-weight:700;color:var(--dh-sage);
}
.dpo-eyebrow i{color:var(--dh-ember);font-size:12px}
.dpo-hero__title{margin:0 0 18px;font-size:clamp(38px,5.6vw,76px);font-weight:900;line-height:1.2;letter-spacing:-.5px;color:var(--dh-mist)}
.dpo-hero__text{max-width:50ch;margin:0 0 30px;font-size:clamp(15px,1.5vw,18px);line-height:1.95;color:var(--dh-sage)}
.dpo-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-bottom:34px}
.dpo-hero__actions .dp-btn i{font-size:13px}
.dpo-link-ghost{font-size:15px;font-weight:700;color:var(--dh-mist);border-bottom:1px solid rgba(233,238,234,.35);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.dpo-link-ghost:hover{color:var(--dh-ember);border-color:var(--dh-ember)}
.dpo-hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:22px 0 0;list-style:none;border-top:1px solid rgba(233,238,234,.12)}
.dpo-hero__trust li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:rgba(233,238,234,.82)}
.dpo-hero__trust i{color:var(--dh-ember);font-size:13px}

/* ---- Alerts / categories ---- */
.dpo-alerts{padding-top:24px}
.dpo-alert{border-radius:16px}
.dpo-categories{padding-top:8px}
.dpo-categories:empty{display:none}

/* ---- Section head ---- */
.dpo-head{max-width:640px;margin:0 auto clamp(32px,4vw,56px);text-align:center}
.dpo-kicker{display:inline-flex;align-items:center;margin:0 0 14px;padding:5px 14px;border:1px solid rgba(10,29,24,.22);border-radius:999px;font-size:13px;font-weight:800;color:var(--dh-pine)}
.dpo-kicker--dark{border-color:rgba(233,238,234,.2);color:var(--dh-sage)}
.dpo-head__title{margin:0 0 12px;font-size:clamp(28px,3.8vw,48px);font-weight:900;line-height:1.3;color:var(--dh-pine)}
.dpo-head__sub{margin:0;font-size:16px;line-height:1.9;color:#55645B}

/* ---- Plans grid ---- */
.dpo-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),285px));
    justify-content:center;gap:20px;align-items:stretch;padding-top:16px;
}
.dpo-plan{
    position:relative;display:flex;flex-direction:column;padding:26px;
    border:1px solid rgba(233,238,234,.08);border-radius:28px;overflow-wrap:anywhere;
    background:var(--dh-moss);color:var(--dh-mist);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px -24px rgba(10,29,24,.55);
    transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s ease,color .4s ease,box-shadow .5s ease;
}
.dpo-plan--featured,
.dpo-plan:hover{
    transform:translateY(-14px);
    background:var(--dh-ember);color:var(--dh-pine);border-color:transparent;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 34px 60px -22px rgba(242,84,45,.55),0 22px 44px -20px rgba(10,29,24,.4);
}
/* با هاور روی یک کارت، کارت پیشنهادی به حالت عادی برمی‌گردد */
.dpo-grid:has(.dpo-plan:hover) .dpo-plan--featured:not(:hover){
    transform:none;background:var(--dh-moss);color:var(--dh-mist);border-color:rgba(233,238,234,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px -24px rgba(10,29,24,.55);
}

.dpo-plan__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.dpo-plan__id{display:flex;align-items:center;gap:14px}
.dpo-plan__icon{
    display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:14px;
    background:rgba(242,84,45,.16);color:var(--dh-ember);font-size:18px;transition:background .4s ease,color .4s ease;
}
.dpo-plan__name{margin:0;font-size:19px;font-weight:800;line-height:1.3;color:inherit}
.dpo-plan__stock{margin:3px 0 0;font-size:13px;color:var(--dh-sage);transition:color .4s ease}
.dpo-plan__badge{
    position:absolute;top:-13px;inset-inline-start:26px;padding:4px 14px;border-radius:999px;background:rgba(242,84,45,.16);color:var(--dh-ember);
    font-size:12px;font-weight:800;white-space:nowrap;transition:background .4s ease,color .4s ease;
}
.dpo-plan__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 18px;font-size:14px;line-height:1.9;color:var(--dh-sage);transition:color .4s ease}

.dpo-plan__list{margin:0 0 28px;padding:18px 0 0;list-style:none;display:grid;gap:11px;border-top:1px solid rgba(233,238,234,.12);transition:border-color .4s ease}
.dpo-plan__list li{position:relative;padding-inline-start:20px;font-size:15px;color:rgba(233,238,234,.88);transition:color .4s ease}
.dpo-plan__list li::before{content:"";position:absolute;inset-inline-start:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--dh-ember);transition:background .4s ease}
.dpo-plan__list b{font-weight:800;color:inherit}

.dpo-plan__more{margin:-14px 0 24px}
.dpo-plan__more summary{cursor:pointer;list-style:none;font-size:13px;font-weight:800;color:var(--dh-ember);transition:color .3s ease}
.dpo-plan__more summary::-webkit-details-marker{display:none}
.dpo-plan__more .dpo-plan__list{margin:14px 0 0;padding-top:14px}
.dpo-plan--featured .dpo-plan__more summary,.dpo-plan:hover .dpo-plan__more summary{color:var(--dh-pine)}
.dpo-plan__buy{margin-top:auto}
.dpo-plan__from{display:block;margin-bottom:4px;font-size:13px;color:var(--dh-sage);transition:color .4s ease}
.dpo-plan__amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 6px}
.dpo-plan__amount strong{font-size:clamp(26px,2.6vw,32px);font-weight:900;line-height:1.2}
.dpo-plan__amount span{font-size:13px;color:var(--dh-sage);transition:color .4s ease}
.dpo-plan__setup{display:block;margin-bottom:6px;font-size:12px;color:var(--dh-sage);transition:color .4s ease}

.dpo-plan__cta{
    width:100%;height:50px;margin-top:16px;background:transparent;color:var(--dh-mist);
    border:1px solid rgba(233,238,234,.34);box-shadow:none;
}
.dpo-plan__cta i{font-size:12px;transition:transform .25s ease}
.dpo-plan__cta:hover,.dpo-plan__cta:focus{background:var(--dh-mist);color:var(--dh-pine);border-color:var(--dh-mist);transform:none;box-shadow:none}
.dpo-plan__cta:hover i{transform:translateX(-4px)}

/* active (featured / hovered) palette */
.dpo-plan--featured .dpo-plan__badge,.dpo-plan:hover .dpo-plan__badge{background:var(--dh-pine);color:var(--dh-mist)}
.dpo-plan--featured .dpo-plan__icon,.dpo-plan:hover .dpo-plan__icon{background:rgba(10,29,24,.12);color:var(--dh-pine)}
.dpo-plan--featured .dpo-plan__stock,.dpo-plan--featured .dpo-plan__desc,.dpo-plan--featured .dpo-plan__from,
.dpo-plan--featured .dpo-plan__amount span,.dpo-plan--featured .dpo-plan__setup,
.dpo-plan:hover .dpo-plan__stock,.dpo-plan:hover .dpo-plan__desc,.dpo-plan:hover .dpo-plan__from,
.dpo-plan:hover .dpo-plan__amount span,.dpo-plan:hover .dpo-plan__setup{color:rgba(10,29,24,.72)}
.dpo-plan--featured .dpo-plan__list,.dpo-plan:hover .dpo-plan__list{border-top-color:rgba(10,29,24,.2)}
.dpo-plan--featured .dpo-plan__list li,.dpo-plan:hover .dpo-plan__list li{color:var(--dh-pine)}
.dpo-plan--featured .dpo-plan__list li::before,.dpo-plan:hover .dpo-plan__list li::before{background:var(--dh-pine)}
.dpo-plan--featured .dpo-plan__cta,.dpo-plan:hover .dpo-plan__cta{background:var(--dh-pine);color:var(--dh-mist);border-color:var(--dh-pine)}
.dpo-plan--featured .dpo-plan__cta:hover,.dpo-plan:hover .dpo-plan__cta:hover{background:#13342b;color:#fff}
/* وقتی کارت پیشنهادی غیرفعال شد، رنگ‌های داخلی هم برگردند */
.dpo-grid:has(.dpo-plan:hover) .dpo-plan--featured:not(:hover) .dpo-plan__badge{background:rgba(242,84,45,.16);color:var(--dh-ember)}
.dpo-grid:has(.dpo-plan:hover) .dpo-plan--featured:not(:hover) .dpo-plan__icon{background:rgba(242,84,45,.16);color:var(--dh-ember)}
.dpo-grid:has(.dpo-plan:hover) .dpo-plan--featured:not(:hover) :is(.dpo-plan__stock,.dpo-plan__desc,.dpo-plan__from,.dpo-plan__amount span,.dpo-plan__setup){color:var(--dh-sage)}
.dpo-grid:has(.dpo-plan:hover) .dpo-plan--featured:not(:hover) .dpo-plan__list{border-top-color:rgba(233,238,234,.12)}
.dpo-grid:has(.dpo-plan:hover) .dpo-plan--featured:not(:hover) .dpo-plan__list li{color:rgba(233,238,234,.88)}
.dpo-grid:has(.dpo-plan:hover) .dpo-plan--featured:not(:hover) .dpo-plan__list li::before{background:var(--dh-ember)}
.dpo-grid:has(.dpo-plan:hover) .dpo-plan--featured:not(:hover) .dpo-plan__cta{background:transparent;color:var(--dh-mist);border-color:rgba(233,238,234,.34)}

/* ---- Benefits ---- */
.dpo-benefits__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid #C9D2CB}
.dpo-benefit{padding:30px 26px 30px 0;border-bottom:1px solid #C9D2CB}
.dpo-benefit:not(:nth-child(3n+1)){padding-inline-start:26px;border-inline-start:1px solid #C9D2CB}
.dpo-benefit__icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;border-radius:50%;background:var(--dh-pine);color:var(--dh-ember);font-size:17px}
.dpo-benefit h3{margin:0 0 8px;font-size:19px;font-weight:800;color:var(--dh-pine)}
.dpo-benefit p{margin:0;font-size:15px;line-height:1.9;color:#55645B}

/* ---- How to choose ---- */
.dpo-choose__panel{
    position:relative;overflow:hidden;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);
    padding:clamp(28px,5vw,64px);border-radius:clamp(28px,3.4vw,48px);
    background:radial-gradient(90% 120% at 0% 100%,#17382e 0%,var(--dh-pine) 62%);color:var(--dh-mist);
    box-shadow:inset 0 1px 0 rgba(233,238,234,.1),0 40px 80px -48px rgba(10,29,24,.7);
}
.dpo-choose__text h2{margin:0 0 14px;font-size:clamp(26px,3.2vw,40px);font-weight:900;line-height:1.35;color:var(--dh-mist)}
.dpo-choose__text p{margin:0 0 26px;font-size:16px;line-height:1.95;color:var(--dh-sage)}
.dpo-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.dpo-step{display:flex;align-items:center;gap:18px;padding:18px 22px;border:1px solid rgba(233,238,234,.12);border-radius:22px;background:rgba(233,238,234,.05);transition:border-color .3s ease,background .3s ease}
.dpo-step:hover{border-color:rgba(242,84,45,.55);background:rgba(233,238,234,.08)}
.dpo-step b{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--dh-ember);color:var(--dh-pine);font-size:17px;font-weight:900}
.dpo-step strong{display:block;font-size:16px;font-weight:800;color:var(--dh-mist)}
.dpo-step small{display:block;margin-top:2px;font-size:13px;color:var(--dh-sage)}

/* ---- FAQ ---- */
.dpo-faq__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.dpo-faq__head{position:sticky;top:calc(var(--dp-header-h) + 32px)}
.dpo-faq__head .dpo-head__title{font-size:clamp(28px,3.4vw,44px)}
.dpo-faq__head .dpo-head__sub{margin-bottom:22px}
.dpo-link{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--dh-pine);transition:gap .25s ease,color .25s ease}
.dpo-link i{font-size:13px;color:var(--dh-ember)}
.dpo-link:hover{gap:16px;color:var(--dh-ember)}
.dpo-faq__list{border-top:1px solid #C9D2CB}
.dpo-faq__item{border-bottom:1px solid #C9D2CB}
.dpo-faq__item summary{
    display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;
    font-size:clamp(16px,1.6vw,19px);font-weight:800;color:var(--dh-pine);
}
.dpo-faq__item summary::-webkit-details-marker{display:none}
.dpo-faq__icon{position:relative;flex:0 0 auto;width:36px;height:36px;border:1px solid #C9D2CB;border-radius:50%;transition:background .3s ease,border-color .3s ease}
.dpo-faq__icon::before,.dpo-faq__icon::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:var(--dh-pine);transition:transform .3s ease,opacity .3s ease}
.dpo-faq__icon::after{transform:rotate(90deg)}
.dpo-faq__item[open] .dpo-faq__icon{background:var(--dh-ember);border-color:var(--dh-ember)}
.dpo-faq__item[open] .dpo-faq__icon::after{transform:rotate(0);opacity:0}
.dpo-faq__item p{margin:0;padding:0 0 24px;max-width:62ch;font-size:15px;line-height:2;color:#55645B}
.dpo-faq__item summary:hover{color:var(--dh-ember)}

/* ---- Final CTA (uses .dpc-*) ---- */
.dpo-cta{padding-block:0 var(--dpo-gap);background:var(--dh-mist)}
.dpo-cta .dpc-panel{margin:0}

.dpo-page :focus-visible{outline:2px solid var(--dh-ember);outline-offset:3px}

/* ---- Responsive ---- */
@media (max-width:991px){
    .dpo-hero{min-height:0;padding-block:40px 0;flex-direction:column;align-items:stretch}
    .dpo-hero__inner{width:min(100% - 40px,1200px);margin-inline:auto}
    .dpo-hero__object{position:relative;order:2;left:auto;top:auto;bottom:auto;width:100%;aspect-ratio:1.35/1;margin-top:20px;
        -webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,#000 42%,transparent 100%);
                mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,#000 42%,transparent 100%)}
    .dpo-hero__content{order:1;max-width:none}
    .dpo-plan--featured,.dpo-plan:hover{transform:none}
    .dpo-benefits__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dpo-benefit,.dpo-benefit:not(:nth-child(3n+1)){padding:26px 0;border-inline-start:0}
    .dpo-benefit:nth-child(even){padding-inline-start:24px;border-inline-start:1px solid #C9D2CB}
    .dpo-choose__panel,.dpo-faq__grid{grid-template-columns:1fr}
    .dpo-faq__head{position:static}
}
@media (max-width:575px){
    .dpo-hero{padding:32px 0 0;border-radius:0 0 28px 28px}
    .dpo-hero__actions .dp-btn{flex:1 1 100%}
    .dpo-benefits__grid{grid-template-columns:1fr}
    .dpo-benefit:nth-child(even){padding-inline-start:0;border-inline-start:0}
    .dpo-plan{padding:24px}
    .dpo-step{padding:16px}
}
@media (prefers-reduced-motion:reduce){
    .dpo-plan,.dpo-plan *,.dpo-faq__icon,.dpo-faq__icon::before,.dpo-faq__icon::after{transition:none !important}
}
/* ==========================================================================
   AUTH — ASYMMETRIC ARCHITECTURAL CANVAS (login.tpl) — پیشوند dax-
   Pine Night: #0A1D18 | Deep Moss: #112A23 | Mist: #E9EEEA | Sage: #8FA399 | Persimmon: #F2542D
   ========================================================================== */

html:has(body.dax-body) {
    overflow-x: hidden;
    background: #0A1D18;
}

body.dax-body {
    background: #0A1D18 !important;
    color: #E9EEEA;
    font-family: "Estedad", "Vazirmatn", "IRANYekan", Tahoma, sans-serif;
    overflow-x: hidden;
    margin: 0;
}

@media (min-width: 992px) and (min-height: 700px) {
    html:has(body.dax-body),
    body.dax-body {
        height: 100vh;
        height: 100svh;
        overflow: hidden;
    }
}

/* مخفی کردن کامل هدر/فوتر عمومی قالب در صفحه لاگین */
body.dax-body #header.dp-header,
body.dax-body #dpMobileMenu,
body.dax-body .dp-footer,
body.dax-body .sidebar,
body.dax-body .master-breadcrumb {
    display: none !important;
}

body.dax-body #main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

body.dax-body #main-body > .container,
body.dax-body #main-body > .container-fluid {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.dax-body .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.dax-body .primary-content {
    float: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.dax-body .dp-system-alerts:empty {
    display: none !important;
}

/* ---------- متغیرها و گرید کلی صفحه ---------- */
.dax-page {
    --x-pine: #0A1D18;
    --x-moss: #112A23;
    --x-mist: #E9EEEA;
    --x-sage: #8FA399;
    --x-ember: #F2542D;
    --x-hairline: rgba(233, 238, 234, 0.11);
    --dax-bg: url("../img/login-bg.webp?v=4");
    /* محل دقیق خط عمودی از سمت راست (منطبق با طرح اصلی) */
    --dax-split-right: 30%;

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 72px minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100svh;
    direction: rtl;
    color: var(--x-mist);
    background-color: var(--x-pine);
    overflow: hidden;
}

.dax-page *,
.dax-page *::before,
.dax-page *::after {
    box-sizing: border-box;
}

/* ---------- پس‌زمینه، مکعب‌های سه‌بعدی (محدود به گوشه پایین-چپ) و گرین ۳٪ ---------- */
.dax-wall {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--x-pine);
    background-image:
        radial-gradient(480px 380px at 14% 86%, rgba(242, 84, 45, 0.12), transparent 72%),
        radial-gradient(680px 580px at 48% 52%, rgba(17, 42, 35, 0.55), transparent 78%);
    pointer-events: none;
}

/* محدود کردن تصویر به گوشه پایین-چپ تا خطوط اضافی بالای عکس کاملاً حذف شوند و ابعاد دقیق شود */
.dax-wall::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(50vw, 760px);
    height: min(76vh, 680px);
    background-image: var(--dax-bg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 165% auto;
    -webkit-mask-image: radial-gradient(ellipse 88% 84% at 18% 88%, #000 48%, transparent 82%);
            mask-image: radial-gradient(ellipse 88% 84% at 18% 88%, #000 48%, transparent 82%);
}

/* افکت ۳٪ Film Grain روی کل بوم */
.dax-wall::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.035;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* خط عمودی ۱ پیکسلی معماری */
.dax-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--dax-split-right);
    width: 1px;
    background: var(--x-hairline);
    z-index: 1;
}

/* نشانگر تقاطع (+) در محل برخورد هدر ۷۲ پیکسلی و خط عمودی */
.dax-crosshair {
    position: absolute;
    top: 72px;
    right: var(--dax-split-right);
    z-index: 2;
    width: 11px;
    height: 11px;
    transform: translate(50%, -50%);
    background: var(--x-pine);
    box-shadow: 0 0 0 4px var(--x-pine);
}

.dax-crosshair::before,
.dax-crosshair::after {
    content: "";
    position: absolute;
    background: var(--x-sage);
    opacity: 0.7;
}

.dax-crosshair::before {
    top: 5px;
    left: 0;
    width: 11px;
    height: 1px;
}

.dax-crosshair::after {
    top: 0;
    left: 5px;
    width: 1px;
    height: 11px;
}

/* ---------- ۱. هدر بالایی (Minimal Top Chrome - 72px) ---------- */
.dax-top {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 72px;
    padding-inline: clamp(24px, 3.5vw, 48px);
    border-bottom: 1px solid var(--x-hairline);
}

.dax-logo {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.4px;
    color: var(--x-mist) !important;
    text-decoration: none !important;
}

.dax-logo i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--x-ember);
}

.dax-uptime {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.dax-uptime__bars {
    display: flex;
    align-items: center;
    gap: 3.5px;
    direction: ltr;
}

.dax-uptime__bars i {
    display: block;
    width: 1.5px;
    height: 11px;
    border-radius: 1px;
    background: rgba(143, 163, 153, 0.45);
}

.dax-uptime__bars i.is-ember {
    background: var(--x-ember);
    box-shadow: 0 0 6px rgba(242, 84, 45, 0.45);
}

.dax-uptime__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--x-sage);
}

/* قرارگیری قطعی دکمه بازگشت در منتهی‌الیه چپ (ستون ۳) */
.dax-nav {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dax-back,
.dax-nav > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding-inline: 18px;
    border: 1px solid rgba(233, 238, 234, 0.22) !important;
    border-radius: 999px;
    background: rgba(17, 42, 35, 0.35);
    font-size: 13px;
    font-weight: 500;
    color: var(--x-sage) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.dax-back:hover,
.dax-nav > a:hover {
    color: var(--x-mist) !important;
    border-color: rgba(233, 238, 234, 0.45) !important;
    background: rgba(233, 238, 234, 0.06);
}

.dax-back__arrow {
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.dax-back:hover .dax-back__arrow {
    transform: translateX(-3px);
}

/* ---------- ۲. چیدمان صحنه اصلی (Stage) ---------- */
.dax-stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--dax-split-right) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ---------- ۳. ستون راست: تایپوگرافی ادیتوریال (قفل روی ستون ۱) ---------- */
.dax-editorial {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: clamp(28px, 4vw, 56px);
    padding-left: clamp(20px, 2.5vw, 36px);
    text-align: right;
}

.dax-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding-inline: 14px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(233, 238, 234, 0.06);
    border: 1px solid rgba(233, 238, 234, 0.10);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--x-mist);
}

.dax-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--x-ember);
    box-shadow: 0 0 8px rgba(242, 84, 45, 0.6);
}

.dax-headline {
    margin: 0 0 20px;
    font-size: clamp(44px, 4.5vw, 68px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--x-mist);
}

.dax-desc {
    margin: 0;
    max-width: 340px;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--x-sage);
}

/* ---------- ۴. ستون چپ-مرکز: پنل لاگین مونولیتیک (قفل روی ستون ۲) ---------- */
.dax-panel-area,
.dax-door {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: clamp(28px, 3vw, 44px);
    padding-left: 24px;
}

.dax-card {
    position: relative;
    width: 440px;
    max-width: 100%;
    margin: 0;
    padding: 36px 40px;
    border-radius: 26px;
    background: rgba(17, 42, 35, 0.88);
    border: 1px solid var(--x-hairline);
    box-shadow:
        0 32px 70px -20px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(233, 238, 234, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.dax-card__head {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 22px;
}

.dax-card__pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding-inline: 15px;
    border-radius: 999px;
    background: rgba(233, 238, 234, 0.06);
    border: 1px solid rgba(233, 238, 234, 0.09);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--x-mist);
}

/* پیام‌های خطای WHMCS */
.dax-flash:empty {
    display: none;
}

.dax-flash .alert {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--x-mist);
    background: rgba(242, 84, 45, 0.14);
    border: 1px solid rgba(242, 84, 45, 0.45);
}

.dax-flash .alert-success {
    background: rgba(143, 163, 153, 0.12);
    border-color: rgba(233, 238, 234, 0.25);
}

/* فیلدها */
.dax-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dax-field label {
    display: block;
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--x-mist);
    text-align: right;
}

.dax-ig {
    position: relative;
    display: flex;
    align-items: center;
}

.dax-input {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    text-align: right;
    border: 1px solid rgba(233, 238, 234, 0.12);
    border-radius: 10px;
    background: rgba(10, 29, 24, 0.72);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--x-mist);
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.dax-input::placeholder {
    color: var(--x-sage);
    opacity: 0.75;
    font-weight: 400;
}

.dax-input:hover {
    border-color: rgba(233, 238, 234, 0.24);
    background: rgba(10, 29, 24, 0.85);
}

.dax-input:focus {
    outline: none;
    border-color: var(--x-ember);
    background: var(--x-pine);
    box-shadow: 0 0 0 3px rgba(242, 84, 45, 0.16);
}

.dax-input:-webkit-autofill {
    -webkit-text-fill-color: var(--x-mist);
    box-shadow: 0 0 0 100px #0A1D18 inset;
}

/* فیلد رمز عبور و لینک فراموشی رمز در داخل فیلد */
.dax-input--pw {
    padding-left: 124px;
    letter-spacing: 2px;
}

.dax-input--pw::placeholder {
    letter-spacing: 2px;
}

.dax-pw-actions {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
}

.dax-forgot {
    font-size: 12px;
    font-weight: 500;
    color: var(--x-sage) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.dax-forgot:hover {
    color: var(--x-mist) !important;
}

.dax-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--x-sage);
    font-size: 12px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.dax-reveal:hover {
    opacity: 1;
    color: var(--x-mist);
}

.dax-hint {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--x-ember);
}

.dax-hint[hidden] {
    display: none;
}

/* استایل کپچا */
.dax-captcha {
    font-size: 12.5px;
    color: var(--x-sage);
}

.dax-captcha p {
    display: none;
}

.dax-captcha .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.dax-captcha [class*="col-"] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

.dax-captcha [class*="col-"]:has(img) {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dax-captcha input[type="text"] {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    text-align: center;
    letter-spacing: 2px;
    border: 1px solid rgba(233, 238, 234, 0.12);
    border-radius: 10px;
    background: rgba(10, 29, 24, 0.72);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--x-mist);
}

.dax-captcha input[type="text"]::placeholder {
    letter-spacing: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--x-sage);
}

.dax-captcha input[type="text"]:focus {
    outline: none;
    border-color: var(--x-ember);
    background: var(--x-pine);
}

.dax-captcha img {
    display: block;
    height: 42px;
    width: auto;
    border-radius: 8px;
    border: 1px solid var(--x-hairline);
    cursor: pointer;
}

.dax-captcha__refresh {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(233, 238, 234, 0.16);
    border-radius: 8px;
    background: transparent;
    color: var(--x-sage);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.35s ease;
}

.dax-captcha__refresh:hover {
    color: var(--x-mist);
    border-color: var(--x-ember);
    transform: rotate(180deg);
}

/* دکمه اصلی ورود */
.dax-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 2px;
    border: 0;
    border-radius: 10px;
    background: var(--x-ember);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    color: var(--x-pine) !important;
    cursor: pointer;
    box-shadow: 0 12px 26px -10px rgba(242, 84, 45, 0.55);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dax-submit:hover {
    background: #ff643d;
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -10px rgba(242, 84, 45, 0.7);
}

.dax-submit.is-loading {
    pointer-events: none;
}

.dax-submit.is-loading .dax-submit__label {
    opacity: 0.25;
}

.dax-submit.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(10, 29, 24, 0.28);
    border-top-color: var(--x-pine);
    border-radius: 50%;
    animation: dax-spin 0.7s linear infinite;
}

@keyframes dax-spin {
    to { transform: rotate(360deg); }
}

.dax-linked:not(:has(a, button, .btn, iframe)) {
    display: none;
}

.dax-linked {
    margin-top: 16px;
    text-align: center;
}

/* فوتر داخل کارت */
.dax-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    font-size: 13px;
    color: var(--x-sage);
}

.dax-foot__link,
.dax-foot a {
    font-weight: 700;
    color: var(--x-mist) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(233, 238, 234, 0.65) !important;
    text-underline-offset: 6px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.dax-foot__link:hover,
.dax-foot a:hover {
    color: var(--x-ember) !important;
    text-decoration-color: var(--x-ember) !important;
}

/* یادداشت پایین صفحه */
.dax-note {
    position: fixed;
    bottom: 12px;
    right: clamp(24px, 3.5vw, 48px);
    z-index: 3;
    font-size: 11px;
    color: rgba(143, 163, 153, 0.45);
    pointer-events: none;
}

.dax-note[hidden] {
    display: none;
}

.dax-note i {
    margin-inline-end: 5px;
    color: var(--x-ember);
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 1199px) {
    .dax-page {
        --dax-split-right: 34%;
    }
}

@media (max-width: 991px) {
    .dax-page {
        grid-template-rows: 68px auto;
        overflow-y: auto;
    }

    .dax-vline,
    .dax-crosshair,
    .dax-uptime {
        display: none;
    }

    .dax-top {
        height: 68px;
        grid-template-columns: 1fr auto;
    }

    .dax-nav {
        grid-column: 2;
    }

    .dax-stage {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 20px 60px;
        justify-items: center;
    }

    .dax-editorial,
    .dax-panel-area,
    .dax-door {
        grid-column: 1;
    }

    .dax-editorial {
        padding-inline: 0;
        align-items: center;
        text-align: center;
        max-width: 440px;
    }

    .dax-headline {
        font-size: clamp(36px, 8vw, 48px);
    }

    .dax-headline br {
        display: none;
    }

    .dax-panel-area,
    .dax-door {
        padding: 0;
        width: 100%;
        justify-content: center;
    }

    .dax-card {
        padding: 30px 24px;
    }

    .dax-note {
        position: static;
        padding: 0 20px 20px;
        text-align: center;
    }
}
/* ==========================================================================
   AUTH PATCH — بدون اسکرول روی دسکتاپ (هر ارتفاعی) + موبایل ریسپانسیو
   ⚠ این بلوک را «به انتهای custom.css» اضافه کنید (بعد از آخرین قانون .dax-*).
   چیزی را پاک نکنید؛ این پچ روی بلوک فعلی override می‌شود.
   ========================================================================== */

/* ---------- دسکتاپ (≥۹۹۲px): صفحه همیشه به اندازه‌ی ویوپورت است ---------- */
@media (min-width: 992px) {
    .dax-page { --dax-top: clamp(56px, 8.2vh, 72px); }
    .dax-top { height: var(--dax-top); }
    .dax-crosshair { top: var(--dax-top); }

    /* اندازه‌ها با ارتفاع ویوپورت مقیاس می‌گیرند، نه با آستانه‌ی ثابت */
    .dax-card { padding: clamp(18px, 3.4vh, 36px) clamp(26px, 2.6vw, 40px); }
    .dax-card__head { margin-bottom: clamp(10px, 2vh, 22px); }
    .dax-fields { gap: clamp(9px, 1.7vh, 18px); }
    .dax-field label { margin-bottom: clamp(5px, .8vh, 8px); }
    .dax-input { height: clamp(40px, 5.4vh, 48px); }
    .dax-captcha input[type="text"],
    .dax-captcha img { height: clamp(36px, 4.8vh, 42px); }
    .dax-submit { height: clamp(42px, 5.4vh, 48px); }
    .dax-linked { margin-top: clamp(8px, 1.6vh, 16px); }
    .dax-foot { margin-top: clamp(10px, 2vh, 22px); }
    .dax-badge { margin-bottom: clamp(12px, 2.4vh, 22px); }
    .dax-headline { font-size: clamp(38px, min(4.5vw, 8.4vh), 68px); margin-bottom: clamp(10px, 2vh, 20px); }
}

/* قفل ارتفاع: از ۵۲۰px به بالا (قبلاً ۷۰۰px بود و روی لپ‌تاپ‌های ۱۰۸۰p با اسکیل ۱۲۵–۱۵۰٪ قفل نمی‌شد) */
@media (min-width: 992px) and (min-height: 520px) {
    html:has(body.dax-body),
    body.dax-body { height: 100%; overflow: hidden; overscroll-behavior: none; }

    /* fixed: حتی اگر WHMCS بالای صفحه چیزی اضافه کند، صفحه جابه‌جا یا اسکرول نمی‌شود */
    body.dax-body .dax-page {
        position: fixed; inset: 0; z-index: 2;
        height: auto; min-height: 0; overflow: hidden;
        grid-template-rows: var(--dax-top) minmax(0, 1fr);
    }
    .dax-stage { height: 100%; min-height: 0; }

    /* اگر کارت (مثلاً با کپچا + پیام خطا) بلندتر از فضا شد، فقط همین ناحیه اسکرول می‌شود، نه صفحه */
    .dax-panel-area,
    .dax-door {
        align-items: flex-start; height: 100%; max-height: 100%;
        padding-block: 12px; overflow-y: auto; scrollbar-width: none;
    }
    .dax-panel-area::-webkit-scrollbar,
    .dax-door::-webkit-scrollbar { display: none; }
    .dax-card { margin-block: auto; }
}

/* ارتفاع‌های خیلی کم: فشرده‌سازی متن‌های غیرضروری */
@media (min-width: 992px) and (max-height: 640px) {
    .dax-desc { display: none; }
    .dax-flash .alert { margin-bottom: 10px; padding: 8px 12px; }
}
@media (min-width: 992px) and (max-height: 560px) {
    .dax-badge { display: none; }
}

/* ---------- تبلت و موبایل (≤۹۹۱px): جریان عادی، اسکرول طبیعی ---------- */
@media (max-width: 991px) {
    html:has(body.dax-body),
    body.dax-body { height: auto; overflow-x: hidden; overflow-y: auto; }

    body.dax-body .dax-page {
        position: relative; inset: auto; z-index: auto;
        height: auto; min-height: 100vh; min-height: 100dvh;
        overflow: visible; overflow-x: clip;
        grid-template-rows: auto 1fr;
    }

    .dax-top { height: 64px; padding-inline: 20px; }
    .dax-logo { font-size: 22px; }

    /* تصویر پس‌زمینه: ملایم و فقط در پایین */
    .dax-wall::before {
        width: 100%; height: 44%; opacity: .32;
        background-size: cover; background-position: left bottom;
        -webkit-mask-image: linear-gradient(to top, #000 30%, transparent);
                mask-image: linear-gradient(to top, #000 30%, transparent);
    }

    .dax-stage {
        height: auto; grid-template-columns: minmax(0, 1fr); gap: 26px;
        padding: 26px 20px max(40px, env(safe-area-inset-bottom));
        align-items: start; justify-items: center;
    }
    .dax-editorial { max-width: 460px; width: 100%; }
    .dax-badge { margin-bottom: 14px; }
    .dax-headline { font-size: clamp(34px, 9.5vw, 48px); margin-bottom: 12px; }
    .dax-desc { max-width: 34ch; font-size: 15px; }

    .dax-panel-area,
    .dax-door { height: auto; max-height: none; overflow: visible; padding: 0; width: 100%; justify-content: center; }
    .dax-card { width: 100%; max-width: 460px; margin: 0; padding: 26px 20px 24px; border-radius: 22px; }

    /* فونت ۱۶px در ورودی‌ها: جلوی زوم خودکار iOS را می‌گیرد */
    .dax-input { height: 50px; font-size: 16px; }
    .dax-captcha input[type="text"] { height: 46px; font-size: 16px; }
    .dax-captcha img { height: 46px; }
    .dax-submit { height: 52px; font-size: 16px; }
}

/* موبایل: لینک «فراموشی رمز» از داخل فیلد به زیر آن می‌آید تا جای تایپ تنگ نشود */
@media (max-width: 575px) {
    .dax-ig:has(.dax-pw-actions) { flex-wrap: wrap; }
    .dax-ig:has(.dax-pw-actions) .dax-input { flex: 1 1 100%; padding-left: 52px; letter-spacing: 1px; }
    .dax-pw-actions { display: contents; }
    .dax-reveal {
        position: absolute; top: 25px; left: 6px; transform: translateY(-50%);
        width: 40px; height: 40px; font-size: 14px; opacity: .8;
    }
    .dax-forgot { order: 3; flex: 1 1 100%; margin-top: 10px; font-size: 13px; }

    .dax-captcha .row { flex-wrap: wrap; }
    .dax-captcha [class*="col-"] { flex: 1 1 100%; }
    .dax-captcha [class*="col-"]:has(img) { justify-content: space-between; }
}

/* موبایل خیلی کوچک (۳۲۰–۳۸۰px) */
@media (max-width: 380px) {
    .dax-top { padding-inline: 16px; }
    .dax-back { padding-inline: 12px; }
    /* متن دکمه‌ی بازگشت فقط برای صفحه‌خوان می‌ماند؛ فلش دیده می‌شود */
    .dax-back span:first-child {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap;
    }
    .dax-card { padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .dax-card, .dax-input, .dax-submit { transition: none; }
}
/* ==========================================================================
   REGISTER PAGE — ASYMMETRIC ARCHITECTURAL CANVAS (clientregister.tpl)
   سازگار با سیستم .dax-* و پالت Pine Night / Deep Moss / Persimmon
   ========================================================================== */

/* بارکد افقی در هدر بالای صفحه ثبت‌نام */
.dax-uptime--inline {
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
}

/* شاخص عمودی ۳ مرحله‌ای در ستون سمت راست */
.dax-steps {
    position: relative;
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* خط عمودی ۱ پیکسلی اتصال‌دهنده مراحل */
.dax-steps::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 4px;
    width: 1px;
    background: rgba(233, 238, 234, 0.14);
}

.dax-steps__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--x-sage);
    transition: color 0.25s ease;
}

.dax-steps__dot {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2A4038;
    border: 1.5px solid var(--x-sage);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.dax-steps__num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--x-sage);
    min-width: 18px;
    transition: color 0.25s ease;
}

.dax-steps__item.is-active {
    color: var(--x-mist);
    font-weight: 700;
}

.dax-steps__item.is-active .dax-steps__dot {
    background: var(--x-ember);
    border-color: var(--x-ember);
    box-shadow: 0 0 10px rgba(242, 84, 45, 0.75);
    transform: scale(1.12);
}

.dax-steps__item.is-active .dax-steps__num {
    color: var(--x-ember);
}

/* کانتینر و کارت مونولیتیک ثبت‌نام در ستون چپ-مرکز */
.dax-panel-area--register {
    justify-content: flex-start;
    padding-right: clamp(24px, 3vw, 44px);
    padding-left: 24px;
}

.dax-reg-wrap {
    width: 100%;
    max-width: 680px;
}

.dax-card--register {
    width: 100% !important;
    max-width: 680px !important;
    padding: 24px 30px !important;
    border-radius: 24px !important;
    max-height: calc(89.2vh - 28px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(233, 238, 234, 0.16) transparent;
}

.dax-card--register::-webkit-scrollbar {
    width: 4px;
}

.dax-card--register::-webkit-scrollbar-thumb {
    background: rgba(233, 238, 234, 0.18);
    border-radius: 999px;
}

/* بخش‌های سه‌گانه داخل کارت (۰۱، ۰۲، ۰۳) */
.dax-sec {
    padding-block: 16px;
    border-top: 1px solid var(--x-hairline);
}

#personalInformation.dax-sec {
    padding-top: 2px;
    border-top: 0;
}

.dax-sec__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dax-sec__head--split {
    justify-content: space-between;
}

.dax-sec__head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dax-sec__num {
    font-size: 13px;
    font-weight: 800;
    color: var(--x-ember);
    letter-spacing: 0.5px;
}

.dax-sec__title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--x-mist);
}

/* گریدهای چندستونه داخل هر بخش */
.dax-grid {
    display: grid;
    gap: 10px 14px;
}

.dax-grid--1 {
    grid-template-columns: 1fr;
}

.dax-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dax-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dax-mt-12 {
    margin-top: 10px;
}

/* تنظیم فشردگی و ظرافت فیلدها در صفحه ثبت‌نام */
.dax-card--register .dax-field {
    margin: 0 !important;
}

.dax-card--register .dax-field label {
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--x-sage) !important;
}

.dax-card--register .dax-input,
.dax-card--register #stateselect,
.dax-card--register #stateinput,
.dax-card--register .control .form-control {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    background: rgba(10, 29, 24, 0.78) !important;
    border: 1px solid rgba(233, 238, 234, 0.11) !important;
    color: var(--x-mist) !important;
    box-shadow: none !important;
}

.dax-card--register .dax-input:focus,
.dax-card--register #stateselect:focus,
.dax-card--register .control .form-control:focus {
    border-color: var(--x-ember) !important;
    background: var(--x-pine) !important;
    box-shadow: 0 0 0 3px rgba(242, 84, 45, 0.15) !important;
}

/* استایل سلکت‌بار کشور و استان (با فلش مینیمال در سمت چپ) */
.dax-select-wrap {
    position: relative;
}

.dax-card--register select.dax-select,
.dax-card--register select#stateselect {
    appearance: none;
    -webkit-appearance: none;
    padding-left: 32px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238FA399' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    cursor: pointer;
}

.dax-card--register select.dax-select option,
.dax-card--register select#stateselect option {
    background: #112A23;
    color: #E9EEEA;
}

/* دکمه کپسولی «ایجاد گذرواژه» در هدر بخش ۰۳ */
.dax-gen-pw {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding-inline: 12px;
    border: 1px solid rgba(233, 238, 234, 0.22);
    border-radius: 999px;
    background: rgba(10, 29, 24, 0.45);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--x-sage);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.dax-gen-pw:hover {
    color: var(--x-mist);
    border-color: var(--x-ember);
    background: rgba(242, 84, 45, 0.1);
}

.dax-gen-pw i {
    font-size: 10px;
}

/* نوار ۱۰ سگمنتی سنجش قدرت رمز عبور مطابق دیزاین */
.dax-pw-meter {
    margin-top: 10px;
}

.dax-pw-meter__top {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
}

.dax-pw-meter__label {
    margin: 0;
    font-size: 11.5px;
    color: var(--x-sage);
}

.dax-pw-meter__label strong {
    color: var(--x-mist);
    font-weight: 700;
}

.dax-sr-progress {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.dax-pw-segments {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    direction: ltr; /* پر شدن سگمنت‌ها از چپ به راست مطابق تصویر */
}

.dax-pw-segments i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(10, 29, 24, 0.85);
    border: 1px solid rgba(233, 238, 234, 0.08);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dax-pw-segments i.is-on {
    background: var(--x-ember);
    border-color: var(--x-ember);
    box-shadow: 0 0 8px rgba(242, 84, 45, 0.45);
}

/* فوتر کارت ثبت‌نام (قوانین در راست + دکمه نارنجی در چپ) */
.dax-reg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--x-hairline);
}

.dax-reg-foot__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.dax-check--tos {
    min-height: 0 !important;
    font-size: 12px !important;
    color: var(--x-sage) !important;
}

.dax-check--tos a {
    color: var(--x-mist);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dax-reg-foot__login {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--x-sage);
}

.dax-reg-foot__left {
    flex: 0 0 auto;
}

.dax-submit--register {
    width: auto !important;
    min-width: 176px;
    height: 44px !important;
    padding-inline: 24px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
}

/* سازگاری با افزونه شماره تلفن WHMCS (intl-tel-input) در صورت فعال بودن */
.dax-card--register .iti {
    width: 100%;
    direction: ltr;
}

.dax-card--register .iti__country-list {
    background: #112A23;
    border-color: rgba(233, 238, 234, 0.16);
    color: #E9EEEA;
}

/* ---------- ریسپانسیو صفحه ثبت‌نام (تبلت و موبایل) ---------- */
@media (max-width: 991px) {
    html:has(body.dax-body--register),
    body.dax-body--register {
        position: static !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    .dax-page--register {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .dax-steps {
        display: none;
    }

    .dax-card--register {
        max-height: none;
        overflow: visible;
        padding: 24px 20px !important;
    }
}

@media (max-width: 640px) {
    .dax-grid--2,
    .dax-grid--3 {
        grid-template-columns: 1fr;
    }

    .dax-reg-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .dax-submit--register {
        width: 100% !important;
    }
}
/* ==========================================================================
   UNIFIED ARCHITECTURAL CAPTCHA (includes/captcha.tpl) — پیشوند dh-captcha
   تبدیل تصویر سفید/آبی پیش‌فرض WHMCS به ماژول بومی Dark Mode
   ========================================================================== */

.dh-captcha-wrap {
    width: 100%;
    margin: 0;
}

.dh-captcha {
    width: 100%;
    text-align: right;
    direction: rtl;
}

/* مخفی کردن متن‌ها و استایل‌های قدیمی در صورت وجود در کش */
.dax-captcha::before,
.dh-captcha > p,
.dh-captcha .dax-captcha__refresh {
    display: none !important;
}

/* هدر ظریف بالای باکس کپچا */
.dh-captcha__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.dh-captcha__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--x-mist, #E9EEEA);
}

.dax-card--register .dh-captcha__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--x-sage, #8FA399);
}

.dh-captcha__hint {
    font-size: 11px;
    color: var(--x-sage, #8FA399);
    opacity: 0.75;
}

/* داک یکپارچه (ورودی کد در راست + تصویر و دکمه رفرش در چپ) */
.dh-captcha__dock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 48px;
    padding: 5px 6px 5px 6px;
    border-radius: 10px;
    background: rgba(10, 29, 24, 0.78); /* Pine Night slot */
    border: 1px solid rgba(233, 238, 234, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dax-card--register .dh-captcha__dock {
    height: 42px;
    padding: 4px 5px;
    border-radius: 8px;
}

.dh-captcha__dock:focus-within {
    border-color: var(--x-ember, #F2542D);
    background: var(--x-pine, #0A1D18);
    box-shadow: 0 0 0 3px rgba(242, 84, 45, 0.16);
}

/* بخش ورودی کد ۶ رقمی */
.dh-captcha__field {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.dh-captcha__input {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: "Estedad", monospace, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 5px !important;
    text-transform: uppercase;
    text-align: center !important;
    color: var(--x-mist, #E9EEEA) !important;
}

.dh-captcha__input::placeholder {
    letter-spacing: 3px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--x-sage, #8FA399) !important;
    opacity: 0.55 !important;
}

.dh-captcha__input:focus {
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* بخش تصویر کپچا و دکمه رفرش در سمت چپ داک */
.dh-captcha__visual {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding-right: 10px;
    border-right: 1px solid rgba(233, 238, 234, 0.10);
    direction: ltr;
}

/* کپسول نگهدارنده تصویر با فیلتر نوری تبدیل سفید/آبی به سبز تیره/روشن */
.dh-captcha__img-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 6px;
    border-radius: 7px;
    background: #0D221C;
    border: 1px solid rgba(233, 238, 234, 0.08);
    overflow: hidden;
    cursor: pointer;
}

.dh-captcha__img {
    display: block !important;
    height: 28px !important;
    width: auto !important;
    max-width: 112px !important;
    object-fit: contain;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    /* فیلتر جادویی: معکوس کردن پس‌زمینه سفید/آبی به تیره و متون مشکی به روشن */
    filter: invert(0.93) hue-rotate(145deg) saturate(0.6) contrast(1.45) brightness(1.05) !important;
    mix-blend-mode: lighten;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dax-card--register .dh-captcha__img {
    height: 25px !important;
}

.dh-captcha__img-box:hover .dh-captcha__img {
    opacity: 0.9;
    transform: scale(1.02);
}

/* دکمه بارگذاری مجدد (Refresh) در کنار تصویر */
.dh-captcha__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 100%;
    max-height: 34px;
    padding: 0;
    border: 1px solid rgba(233, 238, 234, 0.12);
    border-radius: 7px;
    background: rgba(17, 42, 35, 0.65);
    color: var(--x-sage, #8FA399);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.dax-card--register .dh-captcha__refresh {
    width: 30px;
    max-height: 30px;
    font-size: 11px;
}

.dh-captcha__refresh:hover {
    color: var(--x-pine, #0A1D18);
    background: var(--x-ember, #F2542D);
    border-color: var(--x-ember, #F2542D);
}

.dh-captcha__refresh.is-spinning i {
    animation: dh-cap-spin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes dh-cap-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* استایل Google reCAPTCHA در صورت فعال شدن */
.dh-recaptcha {
    display: flex;
    justify-content: center;
    margin-block: 8px;
}

/* ریسپانسیو برای موبایل‌های خیلی کوچک */
@media (max-width: 400px) {
    .dh-captcha__hint {
        display: none;
    }
    .dh-captcha__input {
        letter-spacing: 3px !important;
        font-size: 14px !important;
    }
    .dh-captcha__img {
        max-width: 92px !important;
    }
}/* ==========================================================================
   FIX v8 — جایگزین هر سه بلوک ریسپانسیو هیرو (@media 991 / 575 داخل «Responsive»
   هیرو + بلوک «HERO — ریسپانسیو تصویر سه‌بعدی») ؛ و اصلاح آکاردئون مزیت‌ها.
   این بلوک را «در انتهای custom.css» بگذارید.
   ========================================================================== */

/* ---- HERO ≤991: تصویر دیگر زیر فرم نمی‌آید؛ پس‌زمینه‌ی مهارشده پشت متن ---- */
@media (max-width:991px){
    .dp-hero{min-height:0;overflow:hidden}
    .dp-hero__object{
        position:absolute;z-index:0;order:0;
        inset:0 0 auto 0;left:0;right:0;top:0;bottom:auto;
        width:100%;height:min(78%,560px);margin:0;transform:none;aspect-ratio:auto;
        opacity:.38;pointer-events:none;
        background-size:cover;background-position:50% 40%;background-repeat:no-repeat;
        -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);
                mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);
        -webkit-mask-composite:source-over;mask-composite:add;
    }
    .dp-hero__inner{order:0;padding-top:calc(var(--dp-header-h) + 40px);max-width:100%}
    .dp-hero__content{max-width:100%}
    .dp-hero__desc{margin-bottom:32px;max-width:100%}
    .dp-hero__uptime{margin-top:40px}
    .dp-domain-form--glass{width:100%;max-width:100%;box-sizing:border-box}
    .dp-domain-form--glass::before{inset:-14px -8px}
}
@media (max-width:575px){
    .dp-hero__title{font-size:clamp(32px,10vw,40px);line-height:1.3}
    .dp-hero__desc{font-size:16px;line-height:1.85}
    .dp-hero__object{height:62%;opacity:.3}
    .dp-domain-form--glass{padding:8px;border-radius:24px}
    .dp-domain-form--glass .dp-domain-form__box{flex-wrap:wrap;border-radius:22px;min-width:0}
    .dp-domain-form--glass .dp-domain-form__input{order:1;flex:1 1 100%;min-width:0;font-size:18px;padding-inline:14px}
    .dp-domain-form--glass .dp-domain-form__tld{order:2;flex:0 0 auto}
    .dp-domain-form--glass .dp-domain-form__submit{order:3;flex:1 1 0;min-width:0;white-space:nowrap}
    .dp-hero__uptime{gap:12px;margin-top:32px}
    .dp-hero__uptime-label{white-space:normal;text-align:center}
}

/* ---- FEATURES: حذف کادر مشکی (focus/active پیش‌فرض مرورگر/قالب) ---- */
.dpf-item,.dpf-item__trigger{-webkit-tap-highlight-color:transparent}
.dpf-item__trigger,
.dpf-item__trigger:hover,
.dpf-item__trigger:focus,
.dpf-item__trigger:active{
    outline:0 !important;box-shadow:none !important;border:0 !important;
    background:transparent !important;color:inherit;
}
.dpf-item:focus,.dpf-item:focus-within:not(:has(:focus-visible)){outline:0}
.dpf-item__trigger:focus-visible{
    outline:2px solid var(--dh-ember) !important;outline-offset:6px;border-radius:12px;
}

/* ==========================================================================
   FIX v8.2 — حذف باکس «شروع مطمئن»، تنظیم فواصل، فوتر فشرده، اینماد در بالا
   این بلوک را «در انتهای custom.css» (بعد از fix v8) بگذارید.
   ========================================================================== */

/* فاصله‌ی سکشن‌ها حالا از --dh-gap (بالای فایل) می‌آید */

/* ---- اینماد: داخل ستون برند، بالای فوتر ---- */
.dpft-brand{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.dpft-brand__name{flex:0 0 100%;margin:0}
.dpft-brand__text{flex:0 0 100%;margin:0 0 4px}
.dpft .dp-social{margin:0}
.dpft-brand .dpft-enamad{margin:0}
.dpft-status{box-sizing:border-box;max-width:100%}
.dpft-enamad img{height:48px}

/* ---- فوتر فشرده (تبلت/موبایل) ---- */
@media (max-width:991px){
    .dp-footer.dpft{padding:36px 0 clamp(64px,13vw,110px)}
    .dpft-news{margin-bottom:28px;padding:22px 20px;gap:16px}
    .dpft-news__title{font-size:22px;margin:0 0 4px}
    .dpft-news__sub{font-size:13px;line-height:1.7}
    .dpft-main{gap:24px;padding-bottom:24px}

    .dpft-brand{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
    .dpft-brand__name{flex:0 0 100%;margin:0;font-size:26px}
    .dpft-brand__text{flex:0 0 100%;max-width:none;margin:0;font-size:14px;line-height:1.8}
    .dpft .dp-social{margin:0;gap:8px}
    .dpft .dp-social a{width:38px;height:38px;font-size:14px}
    .dpft .dp-social{order:1;flex:1 1 auto}
    .dpft-brand .dpft-enamad{order:2;margin:0;flex:0 0 auto}
    .dpft-status{order:3;flex:0 0 100%;justify-content:center;box-sizing:border-box}
    .dpft-enamad img{height:44px}

    .dpft-cols{gap:20px 16px}
    .dpft-col__title{margin:0 0 8px}
    .dpft-col__list a{padding-block:5px;font-size:14px}
    .dpft-bottom{padding-top:18px;gap:10px 16px}
}
@media (max-width:575px){
    .dpft-news{padding:18px 16px;border-radius:22px}
    .dpft-news__sub{display:none}
    /* ورودی و دکمه در یک ردیف (به‌جای دو ردیف) */
    .dpft .dp-newsletter{flex-wrap:nowrap;border-radius:999px;padding:4px}
    .dpft .dp-newsletter__input{flex:1 1 auto;min-width:0;height:42px;padding-inline:14px;font-size:15px}
    .dpft .dp-newsletter__submit{flex:0 0 auto;height:42px;padding-inline:18px;font-size:14px}
    .dpft .dp-newsletter__submit i{display:none}

    .dpft-brand__text{display:none}
    .dpft-status{padding:7px 12px;gap:10px;font-size:12px}
    .dpft-status__ticks i:nth-child(n+19){display:none}
    .dpft-bottom{flex-direction:row;align-items:center;justify-content:space-between}
    .dpft-bottom__copy{flex:1 1 100%;order:2;font-size:12px;text-align:center}
    .dpft-bottom__meta{flex:1 1 100%;order:1;justify-content:center;gap:10px 18px}
}