@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root {

    --ink: #22334d;

    --red: #e53d48;

    --red-dark: #c82a38;

    --cream: #fff8f0;

    --muted: #667287;

    --line: #e9e4df;

    --white: #fff;

    --shadow: 0 18px 52px rgba(34, 51, 77, .075)
}

* {

    box-sizing: border-box
}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px
}

body {

    margin: 0;

    font-family: 'Vazirmatn', Tahoma, sans-serif;

    color: var(--ink);

    background: #fff;

    line-height: 1.9
}

button,

input,

textarea,

select {

    font: inherit
}

a {

    color: inherit;

    text-decoration: none
}

img {

    max-width: 100%;

    height: auto
}

button {

    cursor: pointer
}

.container {

    width: min(1160px, calc(100% - 40px));

    margin-inline: auto
}

.skip {

    position: absolute;

    top: -80px;

    right: 15px;

    background: #fff;

    padding: 12px;

    z-index: 99
}

.skip:focus {

    top: 12px
}

.site-header {

    position: sticky;

    top: 0;

    z-index: 30;

    background: rgba(255, 255, 255, .97);

    border-bottom: 1px solid #f2ece5;

    backdrop-filter: blur(12px)
}

.nav {

    min-height: 88px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 24px
}

.logo img {

    display: block;

    object-fit: contain
}

.desktop-nav {

    display: flex;

    gap: 30px;

    align-items: center;

    font-size: 14px;

    font-weight: 700
}

.desktop-nav a:hover,

.text-link:hover {

    color: var(--red)
}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    background: var(--red);

    color: white;

    border: 2px solid var(--red);

    border-radius: 15px;

    padding: 13px 26px;

    font-weight: 800;

    font-size: 15px;

    transition: transform .2s, background .2s;

    box-shadow: 0 10px 20px rgba(229, 61, 72, .13)
}

.btn:hover {

    background: var(--red-dark);

    transform: translateY(-2px)
}

.btn-small {

    padding: 9px 18px;

    font-size: 13px
}

.btn-outline {

    background: transparent;

    color: var(--ink);

    border-color: #d9dde2;

    box-shadow: none
}

.btn-outline:hover {

    background: #fff;

    color: var(--red);

    border-color: var(--red)
}

.hero {

    overflow: hidden;

    background: linear-gradient(118deg, #fff9f3 6%, #fff4e8 98%)
}

.hero-grid {

    min-height: 610px;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 45px
}

.eyebrow,

.kicker {

    color: var(--red);

    font-size: 14px;

    font-weight: 800
}

.eyebrow {

    background: #fff;

    border: 1px solid #fae1db;

    border-radius: 40px;

    padding: 8px 16px;

    display: inline-flex;

    align-items: center;

    gap: 10px
}

.dot {

    background: #ed4f5c;

    width: 8px;

    height: 8px;

    border-radius: 50%
}

h1,

h2,

h3,

p {

    margin-top: 0
}

h1 {

    font-size: clamp(35px, 4.6vw, 57px);

    line-height: 1.55;

    letter-spacing: -1.4px;

    margin: 20px 0
}

h1 span {

    color: var(--red);

    display: block
}

.lead {

    font-size: 17px;

    color: #5e6879;

    line-height: 2.15;

    max-width: 580px
}

.hero-actions {

    display: flex;

    gap: 13px;

    flex-wrap: wrap;

    margin: 28px 0
}

.hero-points {

    display: flex;

    flex-wrap: wrap;

    gap: 11px 19px;

    font-size: 12px;

    color: #58667b;

    font-weight: 700
}

.hero-visual {

    position: relative;

    height: 550px;

    display: flex;

    align-items: center;

    justify-content: center
}

.hero-visual>img {

    position: relative;

    z-index: 2;

    max-height: 515px
}

.circle {

    position: absolute;

    border-radius: 50%;

    background: #ffe5d9
}

.circle-a {

    width: 410px;

    height: 410px
}

.circle-b {

    width: 515px;

    height: 515px;

    border: 1px dashed #f6bdac;

    background: transparent
}

.floating-note {

    z-index: 3;

    position: absolute;

    right: -20px;

    bottom: 70px;

    transform: rotate(-5deg);

    background: white;

    padding: 12px 18px;

    border-radius: 15px;

    box-shadow: var(--shadow);

    font-weight: 800;

    font-size: 13px
}

.trust-bar {

    border-bottom: 1px solid var(--line)
}

.trust-items {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-block: 22px;

    flex-wrap: wrap;

    color: #3e4d63;

    font-weight: 700;

    font-size: 13px
}

.section {

    padding: 92px 0
}

.section-heading {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 42px
}

.section-heading h2,

.split-layout h2,

.request-info h2,

.about-card h2 {

    font-size: clamp(28px, 3vw, 38px);

    line-height: 1.55;

    margin: 10px 0
}

.section-heading p,

.muted {

    color: var(--muted)
}

.service-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px
}

.service-card {

    border: 1px solid var(--line);

    background: #fff;

    border-radius: 22px;

    padding: 25px;

    transition: transform .2s, box-shadow .2s
}

.service-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow)
}

.service-icon {

    width: 66px;

    height: 66px;

    display: grid;

    place-items: center;

    font-size: 28px;

    border-radius: 18px;

    margin-bottom: 20px
}

.powder {

    background: #ffe4e5
}

.co2 {

    background: #dff3fc
}

.water {

    background: #e4ecff
}

.foam {

    background: #e2faea
}

.service-card h3 {

    font-size: 17px;

    margin: 0 0 9px
}

.service-card p {

    color: var(--muted);

    font-size: 13px;

    min-height: 78px
}

.service-card a,

.text-link {

    color: var(--red);

    font-weight: 800;

    font-size: 13px
}

.prices-section {

    background: var(--cream)
}

.price-panel {

    max-width: 920px;

    margin: auto;

    border: 1px solid #f3e4dd;

    border-radius: 26px;

    background: #fff;

    box-shadow: var(--shadow);

    overflow: hidden
}

.price-header {

    padding: 26px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px
}

.price-header h3 {

    margin: 0;

    font-size: 20px
}

.price-header p {

    color: var(--muted);

    font-size: 13px;

    margin: 0
}

.price-pill {

    background: #eff9f1;

    color: #39845d;

    padding: 5px 13px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap
}

.tabs {

    display: flex;

    gap: 9px;

    padding: 4px 30px 22px;

    flex-wrap: wrap
}

.tab {

    border: 1px solid #e5e7ec;

    background: #f9fafb;

    color: #4d5b70;

    padding: 9px 21px;

    border-radius: 12px;

    font-weight: 800;

    font-size: 13px
}

.tab.active {

    color: white;

    background: var(--ink);

    border-color: var(--ink)
}

.table-wrap {

    overflow-x: auto
}

table {

    width: 100%;

    border-collapse: collapse;

    text-align: right
}

th {

    background: #fbf8f5;

    color: #556176;

    font-size: 13px
}

th,

td {

    padding: 14px 30px;

    border-bottom: 1px solid #f0f0f0
}

td {

    font-size: 14px
}

td:nth-child(2) {

    font-weight: 900;

    color: #1e835e
}

.price-foot {

    padding: 20px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #68758a;

    font-size: 12px
}

.fineprint {

    padding: 0 30px 20px;

    font-size: 12px;

    color: #8a6470
}

.split-layout {

    display: grid;

    grid-template-columns: 1fr .75fr;

    gap: 95px;

    align-items: center
}

.timeline {

    margin-top: 36px
}

.step {

    display: grid;

    grid-template-columns: 56px 1fr;

    gap: 12px;

    position: relative;

    min-height: 111px
}

.step:not(:last-child):before {

    content: "";

    position: absolute;

    right: 27px;

    top: 55px;

    height: calc(100% - 51px);

    border-right: 2px dashed #f3a5ac
}

.step-number {

    width: 56px;

    height: 56px;

    border-radius: 18px;

    background: #fff1f1;

    color: var(--red);

    display: grid;

    place-items: center;

    font-weight: 900;

    font-size: 21px
}

.step h3 {

    margin: 0;

    font-size: 17px
}

.step p {

    color: var(--muted);

    font-size: 14px;

    margin: 0
}

.steps-aside {

    border: 1px solid #f4dfd8;

    border-radius: 30px;

    padding: 35px;

    text-align: center;

    background: #fff8f1
}

.aside-art {

    height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 100px;

    position: relative
}

.aside-art span {

    font-size: 64px;

    position: absolute;

    bottom: 0;

    left: 20%
}

.steps-aside h3 {

    font-size: 23px
}

.steps-aside p {

    color: var(--muted)
}

.about-section {

    padding-top: 30px
}

.about-card {

    background: #f8fafc;

    border: 1px solid #eaf0f4;

    border-radius: 25px;

    padding: 30px 38px;

    display: flex;

    align-items: center;

    gap: 24px
}

.about-icon {

    flex: 0 0 74px;

    height: 74px;

    border-radius: 24px;

    background: #d9f4e7;

    color: #278660;

    display: grid;

    place-items: center;

    font-size: 37px
}

.about-card p {

    color: var(--muted);

    margin-bottom: 0
}

.narrow {

    max-width: 800px
}

.faq-section {

    padding-top: 60px
}

.faq-list details {

    border: 1px solid var(--line);

    border-radius: 15px;

    padding: 5px 20px;

    margin-bottom: 12px;

    background: #fff
}

.faq-list summary {

    cursor: pointer;

    padding: 14px 0;

    font-weight: 800;

    list-style: none
}

.faq-list summary::after {

    content: '+';

    float: left;

    color: var(--red);

    font-size: 24px
}

.faq-list details[open] summary::after {

    content: '−'

}

.faq-list p {

    color: var(--muted);

    font-size: 14px;

    padding: 0 0 12px
}

.request-section {

    background: var(--ink);

    color: #fff
}

.request-grid {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    align-items: center
}

.request-info .kicker {

    color: #ffb7ab
}

.request-info p {

    color: #ced7e2;

    font-size: 16px
}

.request-benefit {

    font-weight: 700;

    margin-top: 20px
}

.form-card {

    background: #fff;

    color: var(--ink);

    border-radius: 26px;

    padding: 32px;

    box-shadow: 0 25px 75px #111b2b30
}

.form-card h3 {

    font-size: 22px;

    margin: 0 0 0
}

.form-desc {

    color: var(--muted);

    font-size: 13px;

    margin-bottom: 22px
}

.field {

    margin-bottom: 15px
}

.field label {

    display: block;

    font-weight: 800;

    font-size: 13px;

    margin-bottom: 6px
}

.field label span {

    color: var(--red)
}

.field input,

.field textarea,

.field select {

    width: 100%;

    padding: 11px 13px;

    border: 1px solid #dce0e7;

    border-radius: 11px;

    background: #fbfcfd;

    outline: none;

    color: var(--ink);

    transition: border-color .15s
}

.field :is(input, textarea, select):focus {

    border-color: var(--red);

    box-shadow: 0 0 0 3px #e53d481c
}

.field textarea {

    resize: vertical
}

.form-two {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px
}

.privacy-note {

    color: #697589;

    font-size: 12px
}

.submit-btn {

    width: 100%
}

.status {

    font-weight: 700;

    font-size: 13px;

    margin: 12px 0 0
}

.status.ok {

    color: #16865a
}

.status.error {

    color: #c72c3c
}

.demo-info {

    font-size: 12px;

    background: #fff4dd;

    border-radius: 10px;

    padding: 11px 14px;

    margin-top: 14px;

    color: #835923
}

.hp {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;

    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    opacity: 0 !important;

    pointer-events: none !important;

}

.footer {

    background: #fff;

    padding: 58px 0 24px
}

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 70px
}

.footer-grid p {

    color: var(--muted);

    font-size: 13px
}

.footer-grid strong {

    display: block;

    margin-bottom: 12px
}

.footer-grid a:not(:first-child) {

    display: block;

    font-size: 13px;

    margin-bottom: 9px
}

.footer-bottom {

    border-top: 1px solid var(--line);

    margin-top: 40px;

    padding-top: 18px;

    color: #9a9da3;

    font-size: 12px
}

.mobile-sticky {

    display: none
}

::selection {

    background: #ffe1e2;

    color: var(--ink)
}

@media(max-width:1020px) {

    .desktop-nav {

        gap: 15px
    }

    .hero-grid {

        gap: 10px
    }

    .service-grid {

        grid-template-columns: repeat(2, 1fr)
    }

    .request-grid {

        gap: 40px
    }

    .split-layout {

        gap: 35px
    }

}

@media(max-width:760px) {

    html {

        scroll-padding-top: 73px
    }

    .container {

        width: min(100% - 28px, 540px)
    }

    .nav {

        min-height: 72px
    }

    .nav .btn-small {

        padding: 7px 10px;

        font-size: 12px
    }

    .logo img {

        width: 130px;

        height: auto
    }

    .desktop-nav {

        display: none
    }

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 0;

        padding-top: 33px
    }

    .hero-content {

        text-align: center
    }

    .hero .eyebrow {

        font-size: 11px
    }

    .lead {

        font-size: 14px
    }

    .hero-actions,

    .hero-points {

        justify-content: center
    }

    .hero-points {

        font-size: 11px
    }

    .hero-visual {

        height: 315px
    }

    .hero-visual>img {

        max-height: 320px
    }

    .circle-a {

        width: 230px;

        height: 230px
    }

    .circle-b {

        width: 290px;

        height: 290px
    }

    .floating-note {

        right: 0;

        bottom: 20px;

        font-size: 10px
    }

    .trust-items {

        display: grid;

        grid-template-columns: 1fr 1fr;

        font-size: 11px;

        gap: 12px
    }

    .section {

        padding: 64px 0
    }

    .section-heading {

        margin-bottom: 28px
    }

    .section-heading h2,

    .split-layout h2 {

        font-size: 27px
    }

    .service-grid {

        grid-template-columns: 1fr 1fr;

        gap: 10px
    }

    .service-card {

        padding: 15px;

        border-radius: 18px
    }

    .service-icon {

        width: 52px;

        height: 52px;

        font-size: 24px;

        margin-bottom: 12px
    }

    .service-card h3 {

        font-size: 14px
    }

    .service-card p {

        font-size: 11px;

        min-height: 94px
    }

    .service-card a {

        font-size: 11px
    }

    .price-header,

    .price-foot {

        padding-inline: 16px
    }

    .price-header {

        align-items: start;

        flex-wrap: wrap
    }

    .tabs {

        padding: 0 14px 15px;

        gap: 5px
    }

    .tab {

        padding: 8px 11px;

        font-size: 11px
    }

    .price-pill {

        font-size: 10px
    }

    .price-foot {

        flex-direction: column;

        align-items: start
    }

    .fineprint {

        padding-inline: 16px
    }

    .price-panel th,

    .price-panel td {

        padding: 13px 16px
    }

    .split-layout,

    .request-grid {

        grid-template-columns: 1fr;

        gap: 30px
    }

    .steps-aside {

        padding: 24px
    }

    .aside-art {

        height: 130px;

        font-size: 70px
    }

    .aside-art span {

        font-size: 44px
    }

    .about-card {

        align-items: start;

        padding: 20px;

        gap: 15px
    }

    .about-icon {

        flex-basis: 45px;

        height: 45px;

        font-size: 24px
    }

    .about-card h2 {

        font-size: 23px
    }

    .request-grid {

        gap: 27px
    }

    .form-card {

        padding: 18px
    }

    .form-two {

        grid-template-columns: 1fr
    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

        gap: 24px
    }

    .footer-grid>div:first-child {

        grid-column: 1/-1
    }

    .mobile-sticky {

        display: flex;

        position: fixed;

        bottom: 0;

        right: 0;

        left: 0;

        padding: 14px 24px calc(14px + env(safe-area-inset-bottom));

        background: var(--red);

        color: #fff;

        justify-content: center;

        gap: 20px;

        align-items: center;

        font-weight: 900;

        z-index: 35;

        box-shadow: 0 -6px 24px #10213a25
    }

    .footer {

        padding-bottom: 100px
    }

}

@media(prefers-reduced-motion:reduce) {

    html {

        scroll-behavior: auto
    }

    * {

        transition: none !important
    }

}

/* ===== Industrial hero — consolidated responsive styles ===== */

html,

body {

    max-width: 100%;

    overflow-x: clip;

}

.hero.hero-industrial {

    position: relative;

    isolation: isolate;

    display: block;

    width: 100%;

    min-height: 540px;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: #a7a6a4 url("industrial-hero.png") center / cover no-repeat;

}

.hero.hero-industrial::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background: linear-gradient(270deg, rgba(15, 22, 32, .34), rgba(15, 22, 32, .08) 48%, transparent 72%);

    pointer-events: none;

}

.hero-industrial .industrial-hero-inner {

    position: relative;

    display: flex;

    flex-direction: column;

    direction: rtl;

    width: 100%;

    max-width: 100%;

    min-height: 540px;

    margin: 0;

    padding: 44px clamp(24px, 5vw, 88px) 45px;

}

.hero-industrial .industrial-copy {

    position: relative;

    width: min(60%, 830px);

    max-width: 100%;

    margin: 0;

    padding: 0;

    text-align: right;

    transform: none;

    opacity: 1;

    visibility: visible;

}

.hero-industrial #hero-title {

    display: block;

    margin: 0 0 32px;

    color: #fff;

    font-size: clamp(30px, 2.6vw, 46px);

    font-weight: 800;

    line-height: 1.55;

    letter-spacing: normal;

    white-space: normal;

    text-shadow: 0 2px 12px rgba(0, 0, 0, .24);

}

.hero-industrial #hero-title span {

    display: inline;

    color: #ed2336;

}

.hero-industrial .industrial-benefits {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

    width: fit-content;

    max-width: 100%;

    margin: 0 20px 0 0;

    padding: 0;

    list-style: none;

}

.hero-industrial .industrial-benefits li {

    display: flex;

    align-items: center;

    gap: 14px;

    color: #142238;

    font-size: clamp(19px, 1.7vw, 27px);

    font-weight: 750;

    line-height: 1.7;

}

.hero-industrial .benefit-dot {

    flex: 0 0 12px;

    width: 12px;

    height: 12px;

    border: 3px solid #e51e32;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, .5);

}

.hero-industrial .industrial-price-link {

    position: absolute;

    left: 38%;

    bottom: 45px;

    transform: translateX(-50%);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 26px;

    border: 1px solid #e51e32;

    border-radius: 12px;

    background: #e51e32;

    color: #fff;

    font-size: 15px;

    font-weight: 800;

    white-space: nowrap;

    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);

    transition: background .2s, transform .2s;

}

.hero-industrial .industrial-price-link:hover {

    background: #bf1426;

    transform: translateX(-50%) translateY(-3px);

}

@media (min-width: 768px) and (max-width: 1199px) {

    .hero.hero-industrial,

    .hero-industrial .industrial-hero-inner {

        min-height: 490px;

    }

    .hero-industrial .industrial-hero-inner {

        padding: 34px 30px 90px;

    }

    .hero-industrial .industrial-copy {

        width: 68%;

    }

    .hero-industrial #hero-title {

        font-size: clamp(24px, 3vw, 34px);

    }

    .hero-industrial .industrial-benefits li {

        font-size: clamp(17px, 2vw, 22px);

    }

    .hero-industrial .industrial-price-link {

        left: 38%;

        bottom: 26px;

    }

}

@media (max-width: 767px) {

    .hero.hero-industrial {

        min-height: 580px;

        background-position: 27% center;

    }

    .hero.hero-industrial::before {

        background: linear-gradient(180deg, rgba(246, 246, 246, .96) 0%, rgba(246, 246, 246, .9) 45%, rgba(246, 246, 246, .12) 80%, rgba(0, 0, 0, .2) 100%);

    }

    .hero-industrial .industrial-hero-inner {

        min-height: 580px;

        padding: 24px 18px;

    }

    .hero-industrial .industrial-copy {

        width: 100%;

        max-width: 100%;

    }

    .hero-industrial #hero-title {

        margin-bottom: 22px;

        color: #17263d;

        font-size: clamp(24px, 6vw, 31px);

        line-height: 1.65;

        text-shadow: none;

    }

    .hero-industrial .industrial-benefits {

        gap: 12px;

        margin-right: 0;

    }

    .hero-industrial .industrial-benefits li {

        font-size: clamp(17px, 4.8vw, 20px);

    }

    .hero-industrial .industrial-price-link {

        position: relative;

        left: auto;

        right: auto;

        bottom: auto;

        transform: none;

        align-self: stretch;

        width: 100%;

        margin-top: auto;

        padding: 14px 18px;

    }

    .hero-industrial .industrial-price-link:hover {

        transform: none;

    }

}

/* Desktop hero: content and button in one aligned column */
@media (min-width: 1200px) {
    .hero-industrial .industrial-hero-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 36px 13% 36px 0;
    }

    .hero-industrial .industrial-copy {
        width: min(100%, 690px);
        max-width: 690px;
        margin: 0;
        transform: none;
        text-align: right;
    }

    .hero-industrial #hero-title {
        font-size: clamp(32px, 2.5vw, 44px);
        margin-bottom: 30px;
    }

    .hero-industrial .industrial-benefits {
        margin: 0 20px 0 0;
        gap: 14px;
    }

    .hero-industrial .industrial-benefits li {
        font-size: 26px;
    }

    .hero-industrial .industrial-price-link {
        position: static;
        align-self: flex-start;
        transform: none;
        margin: 32px 20px 0 0;
    }

    .hero-industrial .industrial-price-link:hover {
        transform: translateY(-3px);
    }
}
/* تصویر بخش مراحل خدمات */

.steps-aside .aside-art {
    height: auto;
    min-height: 0;
    display: block;
    overflow: hidden;
    border-radius: 18px;
}

.steps-aside .aside-art img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 18px;
}

@media (max-width: 767px) {
    .steps-aside .aside-art img {
        height: 190px;
    }
}
/* مرتب‌سازی عکس ماشین داخل کارت */

.steps-aside {
    overflow: hidden;
}

.steps-aside .aside-art {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 0 24px;
    display: block;
}

.steps-aside .aside-art img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 330px;
    object-fit: cover;
    border-radius: 18px;
}

@media (max-width: 767px) {
    .steps-aside .aside-art img {
        max-height: 240px;
    }
}