css
:root{
    --navy:#0B1F33;
    --navy2:#102B45;
    --teal:#087F83;
    --teal2:#0DB6BD;
    --ink:#182127;
    --muted:#66737C;
    --bg:#F6F8F9;
    --white:#fff;
    --line:#DDE5E8;
    --max:1180px;
    --r:20px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Inter,Vazirmatn,Tahoma,Arial,sans-serif;
    color:var(--ink);
    line-height:1.8;
    background:#fff;
}

img{
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
textarea,
select{
    font:inherit;
}

.container{
    width:min(var(--max),calc(100% - 32px));
    margin:auto;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar{
    background:var(--navy);
    color:#d9e7ed;
    font-size:12px;
}

.topbar .container{
    height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}


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

header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}

header .container{
    width:min(var(--max),calc(100% - 32px));
}

nav{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    direction:ltr;
}

.brandmark{
    width:43px;
    height:32px;
    position:relative;
}

.brandmark:before,
.brandmark:after{
    content:"";
    position:absolute;
    border:7px solid var(--teal2);
    border-top:0;
    border-radius:0 0 18px 18px;
    transform:skew(-18deg);
    height:25px;
    width:13px;
    top:2px;
}

.brandmark:before{
    left:4px;
}

.brandmark:after{
    right:4px;
}

.brandname{
    font-size:21px;
    font-weight:900;
    letter-spacing:.01em;
    color:var(--navy);
}

.brandname span{
    color:var(--teal);
}

.brandtag{
    display:block;
    font-size:8px;
    letter-spacing:.16em;
    color:#71808a;
    line-height:1.2;
    direction:ltr;
    text-align:left;
}

.menu{
    display:flex;
    gap:24px;
    font-size:14px;
    font-weight:700;
}

.menu a{
    transition:color .2s ease;
}

.menu a:hover{
    color:var(--teal);
}

.actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:11px;
    padding:11px 17px;
    font-weight:800;
    font-size:14px;
    border:1px solid transparent;
    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.primary{
    background:var(--teal);
    color:#fff;
}

.primary:hover{
    background:#066b6e;
}

.secondary{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.30);
    color:#fff;
}

.secondary:hover{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.55);
}

.outline{
    border-color:#aab9c1;
    background:#fff;
    color:var(--navy);
}

.hamb{
    display:none;
    border:0;
    background:none;
    font-size:24px;
    color:var(--navy);
    cursor:pointer;
}


/* =========================================================
   GENERAL
========================================================= */

section{
    padding:78px 0;
}

.head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:28px;
}

.head h2{
    font-size:30px;
    color:var(--navy);
    margin:0;
}

.head p{
    margin:5px 0 0;
    color:var(--muted);
}

.link{
    color:var(--teal);
    font-weight:900;
}


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

.hero{
    position:relative;
    width:100%;
    min-height:590px;
    overflow:hidden;
    color:#fff;
    background:#061725;
}

.hero-product{
    position:absolute;

    top:-25px;
    bottom:-25px;
    left:0;
    right:0;

    width:auto;
    height:auto;

    z-index:1;
    overflow:hidden;
    pointer-events:none;
}.hero-product img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;

    object-fit:cover;
    object-position:center center;

    filter:drop-shadow(
        0 35px 45px rgba(0,0,0,.40)
    );

    transition:
        transform .45s ease,
        filter .45s ease;

    pointer-events:none;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(4,18,31,.92) 0%,
            rgba(4,18,31,.80) 17%,
            rgba(4,18,31,.58) 32%,
            rgba(4,18,31,.25) 50%,
            rgba(4,18,31,.05) 72%,
            rgba(4,18,31,0) 100%
        );
}

.hero::after{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    right:-180px;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(13,182,189,.16) 0%,
            rgba(13,182,189,.07) 34%,
            transparent 70%
        );

    z-index:2;
    pointer-events:none;
}

.hero-inner{
    position:relative;
    z-index:10;
    width:min(var(--max),calc(100% - 32px));
    min-height:590px;
    margin:auto;
}

.hero-visual{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
}

.hero-glow{
    display:none;
}

.hero-content{
    position:absolute;
    z-index:30;

    left:4.5%;
    top:50%;
    transform:translateY(-50%);

    width:min(560px,46%);
    padding:20px 0;

    direction:ltr;
    text-align:left;

    pointer-events:auto;
}

.hero-content::before{
    content:"";
    position:absolute;
    z-index:-1;

    left:-45px;
    top:50%;

    width:650px;
    height:115%;

    transform:translateY(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(5,19,31,.58) 0%,
            rgba(5,19,31,.40) 42%,
            rgba(5,19,31,0) 100%
        );

    filter:blur(4px);
    pointer-events:none;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    margin-bottom:16px;

    direction:ltr;
    color:#62d9dd;

    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.hero h1{
    margin:0 0 22px;

    direction:ltr;
    text-align:left;

    font-family:Inter,Arial,sans-serif;
    font-size:clamp(44px,5vw,68px);
    line-height:1.04;
    letter-spacing:-2px;
    font-weight:800;
    color:#fff;

    text-shadow:0 4px 22px rgba(0,0,0,.30);
}

.hero h1 span{
    display:block;
    margin-top:8px;

    color:#35d4d8;

    background:
        linear-gradient(
            90deg,
            #27c3ca,
            #72e3e5
        );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-description{
    max-width:520px;
    margin:0 0 27px;

    direction:rtl;
    text-align:left;

    font-family:Vazirmatn,Tahoma,Arial,sans-serif;
    font-size:16px;
    line-height:2;
    color:rgba(255,255,255,.80);

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

.hero-actions{
    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:12px;

    flex-wrap:wrap;

    margin-top:45px;
    margin-bottom:30px;

    position:relative;

    z-index:40;

    pointer-events:auto;

    transform:translate(70px, 135px);
}
.hero-actions .btn{
    min-height:49px;
    padding:11px 20px;

    border-radius:11px;
    font-size:13px;
    font-weight:800;

    backdrop-filter:blur(8px);

    position:relative;
    z-index:50;

    pointer-events:auto;
    cursor:pointer;
}

.hero-actions .primary{
    background:var(--teal);
    color:#fff;

    box-shadow:
        0 12px 30px rgba(13,182,189,.28);
}

.hero-actions .primary:hover{
    background:#066b6e;
}

.hero-actions .secondary{
    color:#fff;

    border:1px solid rgba(255,255,255,.34);

    background:rgba(255,255,255,.07);
}

.hero-actions .secondary:hover{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.55);
}

.hero-features{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;

    width:100%;
    max-width:700px;
    margin-top:4px;
}

.hero-feature{
    display:flex;
    align-items:center;
    gap:8px;

    min-width:0;
    min-height:48px;
    padding-top:8px;

    border-top:1px solid rgba(255,255,255,.16);
    color:#bdd1d9;
}

.feature-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;

    display:grid;
    place-items:center;

    border:1px solid rgba(53,212,216,.30);
    border-radius:9px;

    background:rgba(13,182,189,.10);
    color:#5de0e3;

    font-size:13px;
    font-weight:900;
}

.feature-text{
    display:flex;
    flex-direction:column;
    line-height:1.45;
    min-width:0;
}

.feature-text strong{
    color:#fff;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.feature-text span{
    color:#91aab5;
    font-size:8px;
    white-space:nowrap;
}
.hero:hover .hero-product img{
    transform:scale(1.009);

    filter:
        drop-shadow(
            0 40px 48px rgba(0,0,0,.46)
        );
}

/* =========================================================
   OLD DEVICE
========================================================= */

.machine{
    position:relative;

    width:315px;
    height:370px;

    border-radius:28px 28px 18px 18px;

    background:
        linear-gradient(
            145deg,
            #fbfdfe,
            #d7e0e4
        );

    padding:20px;

    box-shadow:
        25px 30px 70px rgba(0,0,0,.38);
}

.screen{
    height:155px;

    border-radius:17px;

    background:#071d31;

    border:5px solid #dbe3e6;

    padding:14px;

    color:#dffcff;
}

.screen small{
    font-size:9px;
    color:#8ea8b4;
}

.co2{
    font-size:34px;
    font-weight:900;
    color:#42dfe3;
    margin-top:7px;
}

.screen-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:7px;
}

.chip{
    border:1px solid #31556b;
    border-radius:8px;
    padding:3px 6px;
    font-size:9px;
}

.mlogo{
    text-align:center;
    margin-top:23px;
    font-weight:900;
    color:var(--navy);
    font-size:21px;
    direction:ltr;
}

.mlogo span{
    color:var(--teal);
}

.hands{
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:15px;
}

.hand{
    width:22px;
    height:98px;

    border-radius:13px;

    background:
        linear-gradient(
            #fff,
            #c9d4d8
        );

    box-shadow:
        4px 6px 12px rgba(0,0,0,.12);

    transform:rotate(8deg);
}

.hand:nth-child(2){
    transform:rotate(-6deg);
}

.hand:nth-child(3){
    transform:rotate(6deg);
}


/* =========================================================
   PRODUCTS
========================================================= */

#products{
    background:#fff;
    padding-top:70px;
    padding-bottom:70px;
}

.grid4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.card{
    position:relative;
    overflow:hidden;

    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:24px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(11,31,51,.09);

    border-color:#b7d8da;
}

#products .card{
    min-height:250px;
    padding:28px;
    border-radius:22px;
}

#products .card::after{
    content:"";

    position:absolute;

    width:110px;
    height:110px;

    border-radius:50%;

    background:rgba(13,182,189,.055);

    left:-40px;
    bottom:-40px;

    pointer-events:none;
}

.icon{
    width:52px;
    height:52px;

    border-radius:15px;

    background:#eaf8f8;
    color:var(--teal);

    display:grid;
    place-items:center;

    font-weight:900;
    margin-bottom:18px;
}

#products .icon{
    width:60px;
    height:60px;

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            #e9f8f8,
            #f4fbfb
        );

    border:1px solid #d6eeee;
    font-size:17px;
}

.card h3{
    margin:0 0 5px;
    color:var(--navy);
    font-size:18px;
}

.card p{
    font-size:13px;
    color:var(--muted);
    margin:0 0 15px;
}


/* =========================================================
   FEATURED PRODUCT
   متن = چپ
   تصویر = راست
========================================================= */

.feature{
    position:relative;
    overflow:hidden;

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

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(13,182,189,.09),
            transparent 30%
        ),
        linear-gradient(
            110deg,
            #edf7f8,
            #fff
        );

    padding-top:75px;
    padding-bottom:75px;
}


/* بسیار مهم:
   جهت Grid را LTR می‌کنیم تا:
   ستون اول = چپ
   ستون دوم = راست
*/

.feature .container{
    min-height:520px;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:45px;

    align-items:center;

    direction:ltr;
}


/* ستون متن */

.feature .container > div:first-child{
    direction:rtl;
    text-align:left;

    width:100%;
    max-width:560px;

    justify-self:start;
}


/* eyebrow */

.feature .eyebrow{
    display:inline-block;

    margin-bottom:8px;

    color:var(--teal);

    font-size:12px;
    font-weight:900;

    letter-spacing:.04em;
}


/* APOLON */

.feature h2{
    margin:5px 0;

    direction:ltr;
    text-align:left;

    color:var(--navy);

    font-size:clamp(54px,6vw,76px);

    line-height:1;
    font-weight:900;
    letter-spacing:-3px;
}

.feature h2 span{
    color:var(--teal);
}

.feature h3{
    color:var(--navy);

    font-size:22px;

    margin:-3px 0 14px;

    direction:ltr;
    text-align:left;
}

.feature p{
    max-width:590px;

    color:#52616a;

    font-size:15px;

    line-height:2;

    direction:rtl;
    text-align:left;

    margin:0 0 22px;
}


/* =========================================================
   FEATURE LIST
   سه آیتم قابل کلیک
========================================================= */

.feature-list{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:9px;

    margin:22px 0;
}


/* هم برای a و هم برای div */

.feature-list div,
.feature-list a{
    display:flex;

    align-items:center;
    justify-content:center;

    min-height:54px;

    background:#fff;

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

    border-radius:12px;

    padding:10px;

    text-align:center;

    font-size:11px;
    font-weight:800;

    color:var(--navy);

    box-shadow:
        0 8px 25px rgba(11,31,51,.05);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        color .2s ease,
        background .2s ease;
}

.feature-list a:hover{
    transform:translateY(-3px);

    border-color:#9fd4d6;

    color:var(--teal);

    background:#f8fdfd;

    box-shadow:
        0 12px 28px rgba(11,31,51,.09);
}


/* =========================================================
   FEATURE BUTTON
========================================================= */

.feature .btn{
    direction:rtl;

    margin-top:4px;

    min-height:48px;

    padding:11px 22px;

    position:relative;
    z-index:10;
}


/* =========================================================
   FEATURE VISUAL
   تصویر محصول همیشه سمت راست
========================================================= */

.feature-visual{
    position:relative;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:visible;

    direction:ltr;

    grid-column:2;

    grid-row:1;

    justify-self:center;

    width:100%;
}

.feature-product-image{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:500px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 30px 45px rgba(11,31,51,.24)
        );

    transition:
        transform .35s ease,
        filter .35s ease;
}

.feature-visual:hover .feature-product-image{
    transform:scale(1.025);

    filter:
        drop-shadow(
            0 36px 52px rgba(11,31,51,.28)
        );
}


/* =========================================================
   WHY
========================================================= */

.why{
    background:var(--bg);
    padding-top:75px;
    padding-bottom:75px;
}

.why .card{
    min-height:210px;
    padding:28px;
    border-color:transparent;
    border-radius:22px;
    background:transparent;
}

.why .card:hover{
    background:#fff;
}

.why .icon{
    background:#fff;

    border:1px solid #dce8eb;

    box-shadow:
        0 8px 20px rgba(11,31,51,.05);
}


/* =========================================================
   KNOWLEDGE
========================================================= */

#knowledge{
    background:#fff;
    padding-top:75px;
    padding-bottom:75px;
}


/* ---------------------------------------------------------
   ARTICLES GRID
--------------------------------------------------------- */

.articles{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}


/* ---------------------------------------------------------
   ARTICLE CARD
--------------------------------------------------------- */

.article{
    position:relative;

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

    overflow:hidden;

    background:#fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.article:hover{
    transform:translateY(-6px);

    border-color:rgba(13,182,189,.25);

    box-shadow:
        0 22px 50px rgba(11,31,51,.10);
}


/* ---------------------------------------------------------
   ARTICLE VISUAL
--------------------------------------------------------- */

.article-img{
    height:165px;

    overflow:hidden;

    position:relative;

    background:#f4f7f8;
}

.article-img img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:transform .35s ease;
}

.article:hover .article-img img{
    transform:scale(1.035);
}
/* ---------------------------------------------------------
   ARTICLE BODY
--------------------------------------------------------- */

.article-body{
    padding:20px;
}

.article-body small{
    display:block;

    margin-bottom:8px;

    color:#8a979e;

    font-size:11px;
    font-weight:700;
}

.article-body h3{
    font-size:15px;
    line-height:1.7;

    margin:0 0 14px;

    color:var(--navy);

    transition:color .2s ease;
}

.article:hover .article-body h3{
    color:var(--teal);
}


/* ---------------------------------------------------------
   ARTICLE LINK
--------------------------------------------------------- */

.article-link{
    display:inline-flex;
    align-items:center;
    gap:6px;

    color:var(--teal);

    font-size:12px;
    font-weight:800;

    text-decoration:none;

    transition:
        color .2s ease,
        gap .2s ease;
}

.article-link::after{
    content:"←";

    font-size:13px;

    transition:transform .2s ease;
}

.article-link:hover{
    color:var(--teal2);
}

.article-link:hover::after{
    transform:translateX(-3px);
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media(max-width:1000px){

    .articles{
        grid-template-columns:repeat(2,1fr);
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media(max-width:600px){

    #knowledge{
        padding-top:60px;
        padding-bottom:60px;
    }

    .articles{
        grid-template-columns:1fr;
        gap:16px;
    }

    .article-img{
        height:150px;
    }

}

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

.cta{
    padding-top:0;
    padding-bottom:75px;
}

.cta-box{
    position:relative;
    overflow:hidden;

    min-height:195px;

    padding:44px 48px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:25px;

    border-radius:28px;

    color:#fff;

    background:
        radial-gradient(
            circle at 90% 25%,
            rgba(13,182,189,.21),
            transparent 28%
        ),
        linear-gradient(
            110deg,
            #061725,
            #0B3B51
        );

    box-shadow:
        0 28px 65px rgba(11,31,51,.16);
}

.cta-box::after{
    content:"";

    position:absolute;

    width:230px;
    height:230px;

    border:1px solid rgba(255,255,255,.07);

    border-radius:50%;

    right:-80px;
    bottom:-120px;
}

.cta-box > *{
    position:relative;
    z-index:2;
}

.cta-box h2{
    margin:0;
    font-size:28px;
}

.cta-box p{
    margin:5px 0 0;
    color:#c7dbe3;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(13,182,189,.08),
            transparent 25%
        ),
        #061724;

    color:#a9bbc4;

    padding:62px 0 20px;
}

.footer-grid{
    display:grid;

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

    gap:40px;
}

.footer-title{
    margin-bottom:12px;
    color:#fff;
    font-size:14px;
    font-weight:900;
}

footer a{
    display:block;
    margin:7px 0;
    font-size:13px;

    transition:color .2s ease;
}

footer a:hover{
    color:#35D4D8;
}

footer p{
    font-size:13px;
}

.copy{
    display:flex;
    justify-content:space-between;

    padding-top:18px;
    margin-top:28px;

    border-top:1px solid #1d3545;

    color:#7f949e;
    font-size:11px;
}


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

.page-hero{
    background:
        linear-gradient(
            110deg,
            var(--navy),
            #0b435c
        );

    color:#fff;

    padding:70px 0;
}

.page-hero h1{
    font-size:44px;
    margin:5px 0;
}

.page-hero p{
    max-width:760px;
    color:#d1e2e8;
}

.crumb{
    color:#82dfe1;
    font-size:12px;
}


/* =========================================================
   PRODUCT PAGE
========================================================= */

.product-page{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:55px;

    align-items:start;
}

.product-photo{
    min-height:520px;

    display:grid;
    place-items:center;

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

    background:
        linear-gradient(
            135deg,
            #edf7f8,
            #f8fbfc
        );
}

.product-photo .machine{
    transform:scale(1.05);
}


/* =========================================================
   SPECS
========================================================= */

.specs{
    display:grid;

    grid-template-columns:
        1fr 1fr;

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

    border-radius:16px;

    overflow:hidden;

    margin:25px 0;
}

.specs div{
    padding:12px;

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

    font-size:13px;
}

.specs div:nth-child(odd){
    font-weight:800;
    background:#f7fafb;
}

.notice{
    border-right:4px solid var(--teal);

    background:#effafa;

    padding:15px 17px;

    border-radius:10px;

    font-size:13px;

    color:#36545a;
}


/* =========================================================
   FORM
========================================================= */

.form{
    display:grid;
    gap:14px;
}

.form-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:14px;
}

.field label{
    display:block;

    margin-bottom:5px;

    font-size:13px;
    font-weight:800;
}

.field input,
.field textarea,
.field select{
    width:100%;

    border:1px solid #cbd7dc;

    border-radius:10px;

    padding:12px;

    font:inherit;

    background:#fff;
}

.field textarea{
    min-height:130px;
    resize:vertical;
}


/* =========================================================
   APOLON GALLERY
========================================================= */

.apolon-gallery{
    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;
}

.apolon-main-image{
    position:relative;

    width:100%;

    max-width:580px;

    aspect-ratio:4 / 3;

    overflow:hidden;

    border-radius:28px;

    background:#f7f9fb;

    border:1px solid rgba(11,31,51,.08);

    box-shadow:
        0 28px 70px rgba(11,31,51,.14);
}

.apolon-main-image::after{
    content:"APOLON";

    position:absolute;

    top:18px;
    left:18px;

    padding:7px 12px;

    border-radius:999px;

    background:rgba(11,31,51,.88);

    color:#fff;

    font-size:10px;

    letter-spacing:1.5px;

    pointer-events:none;
}

.apolon-main-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    transition:transform .35s ease;
}

.apolon-main-image:hover img{
    transform:scale(1.025);
}

.apolon-thumbs{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;
}

.apolon-thumb{
    position:relative;

    width:94px;
    height:76px;

    padding:4px;

    border:1px solid rgba(11,31,51,.12);

    border-radius:14px;

    background:#fff;

    cursor:pointer;

    overflow:hidden;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.apolon-thumb:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(11,31,51,.10);
}

.apolon-thumb img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:10px;
}

.apolon-thumb.active{
    border:2px solid #0B1F33;

    box-shadow:
        0 8px 24px rgba(11,31,51,.12);
}


/* =========================================================
   TECHNICAL SPECIFICATIONS
========================================================= */

.technical-specs{
    background:#f7f9fb;
}

.spec-table{
    width:100%;

    max-width:1000px;

    margin:0 auto;

    overflow:hidden;

    border:1px solid rgba(11,31,51,.08);

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 18px 50px rgba(11,31,51,.07);
}

.spec-row{
    display:grid;

    grid-template-columns:
        1fr 1.5fr;

    border-bottom:1px solid rgba(11,31,51,.07);
}

.spec-row:last-child{
    border-bottom:none;
}

.spec-row > div{
    padding:17px 22px;
}

.spec-header{
    background:#0B1F33;
    color:#fff;
    font-weight:700;
}

.spec-row:not(.spec-header) > div:first-child{
    color:#0B1F33;
    font-weight:600;
}

.spec-row:not(.spec-header) > div:last-child{
    color:#526171;
}


/* =========================================================
   PRODUCT DOCUMENTS
========================================================= */

.product-documents{
    background:#fff;
}

.documents-grid{
    display:grid;

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

    gap:18px;
}

.document-card{
    min-height:230px;

    padding:24px;

    display:flex;

    flex-direction:column;

    border:1px solid rgba(11,31,51,.08);

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 14px 40px rgba(11,31,51,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.document-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 22px 50px rgba(11,31,51,.10);
}

.document-icon{
    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:22px;

    border-radius:12px;

    background:#0B1F33;

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;
}

.document-content h3{
    margin:0 0 10px;

    color:#0B1F33;

    font-size:18px;
}

.document-content p{
    margin:0;

    color:#657383;

    font-size:14px;

    line-height:1.9;
}

.document-status{
    display:inline-flex;

    align-self:flex-start;

    margin-top:auto;

    padding:6px 12px;

    border-radius:999px;

    background:#f1f4f7;

    color:#687585;

    font-size:11px;
}


/* =========================================================
   FAQ
========================================================= */

.apolon-faq{
    background:#f7f9fb;
}

.faq-list{
    width:100%;

    max-width:900px;

    margin:0 auto;
}

.faq-item{
    margin-bottom:12px;

    border:1px solid rgba(11,31,51,.08);

    border-radius:16px;

    background:#fff;

    overflow:hidden;

    box-shadow:
        0 8px 25px rgba(11,31,51,.04);
}

.faq-item summary{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px 24px;

    cursor:pointer;

    list-style:none;

    color:#0B1F33;

    font-weight:700;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary span{
    flex:0 0 auto;

    font-size:24px;

    font-weight:400;

    transition:transform .25s ease;
}

.faq-item[open] summary span{
    transform:rotate(45deg);
}

.faq-answer{
    padding:0 24px 22px;

    color:#657383;

    line-height:2;
}

.faq-answer p{
    margin:0;
}


/* =========================================================
   APOLON FINAL CTA
========================================================= */

.apolon-final-cta{
    padding:80px 0;
    background:#fff;
}

.apolon-cta-box{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    padding:48px 52px;

    border-radius:28px;

    background:#0B1F33;

    box-shadow:
        0 30px 70px rgba(11,31,51,.18);
}

.apolon-cta-content{
    max-width:720px;
}

.apolon-cta-content .eyebrow{
    color:rgba(255,255,255,.65);
}

.apolon-cta-content h2{
    margin:12px 0 16px;

    color:#fff;

    font-size:clamp(28px,4vw,42px);

    line-height:1.35;
}

.apolon-cta-content p{
    margin:0;

    color:rgba(255,255,255,.72);

    line-height:2;
}

.apolon-cta-action{
    flex:0 0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;
}

.apolon-cta-action .btn{
    white-space:nowrap;
}

.apolon-cta-action span{
    color:rgba(255,255,255,.55);

    font-size:12px;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
}

.whatsapp-icon{
    width:19px;
    height:19px;

    fill:#25D366;

    flex:0 0 auto;

    transition:transform .2s ease;
}

.whatsapp-btn:hover .whatsapp-icon{
    transform:scale(1.08);
}

.whatsapp-float{
    position:fixed;

    right:24px;
    bottom:24px;

    z-index:999;

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:12px 17px;

    background:#25D366;

    color:#fff;

    border-radius:999px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

    font-size:13px;

    font-weight:800;

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

.whatsapp-float svg{
    width:21px;
    height:21px;

    fill:#fff;

    flex:0 0 auto;
}

.whatsapp-float:hover{
    transform:translateY(-3px);

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


/* =========================================================
   LOGO IMAGE
========================================================= */

.site-logo{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    line-height:0;
}

.site-logo img{
    display:block;

    width:190px;

    height:auto;

    max-width:100%;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

    .menu{
        display:none;
    }

    .hamb{
        display:block;
    }


    /* HERO */

    .hero{
        min-height:700px;
    }

    .hero-inner{
        width:calc(100% - 32px);
        min-height:700px;
    }

    .hero-product img{
        object-position:center center;
    }

    .hero::before{
        background:
            linear-gradient(
                90deg,
                rgba(4,18,31,.88) 0%,
                rgba(4,18,31,.62) 32%,
                rgba(4,18,31,.28) 60%,
                rgba(4,18,31,.12) 100%
            );
    }

    .hero-content{
        left:4%;
        width:min(560px,58%);
        top:50%;
        transform:translateY(-50%);
    }

    .hero-content::before{
        width:620px;
    }

    .hero h1{
        font-size:52px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-features{
        grid-template-columns:repeat(2,1fr);
        max-width:480px;
        gap:10px 18px;
    }


    /* FEATURED PRODUCT */

    .feature .container{
        grid-template-columns:
            1fr 1fr;

        gap:30px;

        min-height:470px;
    }

    .feature .container > div:first-child{
        max-width:100%;
    }

    .feature h2{
        font-size:58px;
    }

    .feature h3{
        font-size:19px;
    }

    .feature p{
        font-size:14px;
    }

    .feature-visual{
        min-height:420px;
    }

    .feature-product-image{
        max-width:90%;
        max-height:420px;
    }


    /* OTHER */

    .grid4,
    .articles{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .documents-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .apolon-cta-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .apolon-cta-action{
        align-items:flex-start;
    }

    .spec-row{
        grid-template-columns:1fr 1.3fr;
    }
}


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

@media(max-width:600px){

    .topbar{
        display:none;
    }

    .container,
    header .container,
    .hero-inner{
        width:calc(100% - 24px);
    }

    nav{
        height:68px;
    }

    .actions .btn{
        display:none;
    }

    .brandname{
        font-size:19px;
    }

    .site-logo img{
        width:155px;
    }


    /* HERO */

    .hero{
        min-height:720px;
    }

    .hero-inner{
        min-height:720px;
        width:100%;
    }

    .hero-product img{
        object-position:58% center;
    }

    .hero::before{
        background:
            linear-gradient(
                180deg,
                rgba(4,18,31,.88) 0%,
                rgba(4,18,31,.55) 38%,
                rgba(4,18,31,.72) 100%
            );
    }

    .hero::after{
        width:420px;
        height:420px;

        right:50%;
        top:45%;

        transform:translate(50%,-50%);
    }

    .hero-content{
        position:absolute;

        left:0;
        top:50%;

        transform:translateY(-50%);

        width:100%;

        padding:35px 22px;

        direction:ltr;

        text-align:center;
    }

    .hero-content::before{
        left:0;
        top:50%;

        width:100%;
        height:100%;

        background:
            linear-gradient(
                180deg,
                rgba(5,19,31,.78),
                rgba(5,19,31,.50),
                rgba(5,19,31,.20)
            );

        filter:none;

        border-radius:0;
    }

    .hero-eyebrow{
        justify-content:center;

        width:100%;

        font-size:9px;

        letter-spacing:.12em;

        margin-bottom:14px;
    }

    .hero h1{
        font-size:40px;

        line-height:1.05;

        letter-spacing:-1.3px;

        text-align:center;

        margin-bottom:18px;
    }

    .hero h1 span{
        margin-top:7px;
    }

    .hero-description{
        max-width:340px;

        margin:0 auto 22px;

        font-size:13px;

        line-height:1.9;

        text-align:center;
    }

    .hero-actions{
        flex-direction:column;

        align-items:center;
        justify-content:center;

        width:100%;

        gap:10px;

        margin-bottom:25px;

        transform:none;
    }

    .hero-actions .btn{
        width:100%;
        max-width:310px;
    }

    .hero-features{
        width:100%;

        max-width:350px;

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

        gap:9px;

        margin:0 auto;
    }

    .hero-feature{
        min-height:48px;

        padding:7px;

        gap:7px;

        border-top:
            1px solid rgba(255,255,255,.13);
    }

    .feature-icon{
        width:27px;
        height:27px;
        flex-basis:27px;
        font-size:11px;
    }

    .feature-text strong{
        font-size:9px;
    }

    .feature-text span{
        font-size:7px;
    }

    .hero:hover .hero-product img{
        transform:none;
    }


    /* GENERAL */

    section{
        padding:60px 0;
    }

    .head{
        display:block;
    }

    .head .link{
        display:inline-block;
        margin-top:8px;
    }


    /* PRODUCTS */

    #products{
        padding-top:60px;
        padding-bottom:60px;
    }

    #products .card{
        min-height:auto;
    }


    /* =====================================================
       FEATURED PRODUCT MOBILE
       متن بالا
       تصویر پایین
    ===================================================== */

    .feature{
        padding-top:60px;
        padding-bottom:60px;
    }

    .feature .container{
        display:grid;

        grid-template-columns:1fr;

        gap:35px;

        min-height:auto;

        direction:ltr;
    }

    .feature .container > div:first-child{
        grid-column:1;
        grid-row:1;

        width:100%;
        max-width:none;

        direction:rtl;
        text-align:center;

        justify-self:center;
    }

    .feature .eyebrow{
        margin-bottom:7px;
    }

    .feature h2{
        font-size:52px;

        text-align:center;
    }

    .feature h3{
        font-size:19px;

        text-align:center;
    }

    .feature p{
        max-width:100%;

        margin-left:auto;
        margin-right:auto;

        font-size:14px;

        text-align:center;
    }

    .feature-list{
        grid-template-columns:1fr;

        max-width:330px;

        margin:22px auto;
    }

    .feature-list a{
        min-height:50px;
    }

    .feature .btn{
        margin-top:4px;
    }

    .feature-visual{
        grid-column:1;
        grid-row:2;

        width:100%;

        min-height:350px;

        justify-self:center;
    }

    .feature-product-image{
        max-width:92%;
        max-height:350px;
    }

    .feature-visual:hover .feature-product-image{
        transform:none;
    }


    /* WHY */

    .why{
        padding-top:60px;
        padding-bottom:60px;
    }

    .why .card{
        min-height:auto;
    }


    /* KNOWLEDGE */

    #knowledge{
        padding-top:60px;
        padding-bottom:60px;
    }

    .article-img{
        height:150px;
    }


    /* CTA */

    .cta{
        padding-bottom:60px;
    }

    .cta-box{
        display:block;

        min-height:auto;

        padding:32px 25px;
    }

    .cta-box .btn{
        margin-top:20px;
    }


    /* PAGE HERO */

    .page-hero{
        padding:50px 0;
    }

    .page-hero h1{
        font-size:35px;
    }


    /* PRODUCT PAGE */

    .product-page{
        grid-template-columns:1fr;
        gap:30px;
    }

    .product-photo{
        min-height:400px;
    }

    .product-photo .machine{
        transform:scale(.85);
    }


    /* SPECS */

    .specs{
        grid-template-columns:1fr 1fr;
    }

    .spec-table{
        border-radius:15px;
    }

    .spec-row{
        grid-template-columns:1fr;
    }

    .spec-row > div{
        padding:13px 16px;
    }

    .spec-row:not(.spec-header) > div:first-child{
        padding-bottom:5px;
    }

    .spec-row:not(.spec-header) > div:last-child{
        padding-top:5px;
    }


    /* DOCUMENTS */

    .documents-grid{
        grid-template-columns:1fr;
    }

    .document-card{
        min-height:auto;
    }


    /* APOLON GALLERY */

    .apolon-main-image{
        max-width:100%;
        border-radius:20px;
    }

    .apolon-thumb{
        width:78px;
        height:64px;
    }


    /* FAQ */

    .faq-item summary{
        padding:17px;
        font-size:14px;
    }

    .faq-answer{
        padding:0 17px 18px;
        font-size:14px;
    }


    /* APOLON CTA */

    .apolon-cta-box{
        padding:34px 26px;
    }


    /* FOOTER */

    .copy{
        display:block;
    }

    .copy span{
        display:block;
        margin-top:7px;
    }


    /* WHATSAPP */

    .whatsapp-float{
        right:16px;
        bottom:16px;

        width:52px;
        height:52px;

        padding:0;

        justify-content:center;
    }

    .whatsapp-float span{
        display:none;
    }

    .whatsapp-float svg{
        width:24px;
        height:24px;
    }
}/* =========================================================
   FEATURED PRODUCT — FINAL FIX
   متن سمت چپ / تصویر سمت راست
========================================================= */

.feature{
    position:relative;
    overflow:hidden;
    padding:80px 0;
    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(13,182,189,.09),
            transparent 32%
        ),
        linear-gradient(
            110deg,
            #edf7f8,
            #ffffff
        );
}

.feature .container{
    width:min(var(--max),calc(100% - 32px));
    margin:auto;

    min-height:520px;

    display:grid;

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

    gap:55px;

    align-items:center;

    direction:ltr;
}


/* ---------------------------------------------------------
   TEXT SIDE
--------------------------------------------------------- */

.feature .container > div:first-child{
    min-width:0;

    direction:ltr;
    text-align:left;

    position:relative;
    z-index:5;
}

.feature .eyebrow{
    display:inline-block;

    margin-bottom:8px;

    color:var(--teal);

    font-size:13px;
    font-weight:900;
}

.feature h2{
    margin:0 0 8px;

    direction:ltr;
    text-align:left;

    color:var(--navy);

    font-size:clamp(54px,6vw,76px);

    line-height:1;

    font-weight:900;

    letter-spacing:-3px;
}

.feature h2 span{
    color:var(--teal);
}

.feature h3{
    margin:0 0 15px;

    color:var(--navy);

    font-size:22px;

    line-height:1.4;
}

.feature p{
    max-width:560px;

    margin:0 0 22px;

    color:#52616a;

    font-size:15px;

    line-height:2;
}


/* ---------------------------------------------------------
   FEATURE BUTTONS
--------------------------------------------------------- */

.feature .btn.primary{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:12px 22px;

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

    border-radius:11px;

    background:var(--teal);

    color:#ffffff !important;

    font-size:13px;
    font-weight:800;

    opacity:1;

    visibility:visible;

    box-shadow:
        0 10px 25px rgba(8,127,131,.20);

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.feature .btn.primary:hover{
    background:#066b6e;

    color:#ffffff !important;

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(8,127,131,.28);
}


/* ---------------------------------------------------------
   FEATURE LIST
--------------------------------------------------------- */

.feature-list{
    display:grid;

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

    gap:9px;

    max-width:570px;

    margin:22px 0;
}

.feature-list div{
    display:flex;

    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:10px;

    background:#ffffff;

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

    border-radius:12px;

    text-align:center;

    font-size:11px;

    font-weight:700;

    color:var(--navy);

    box-shadow:
        0 8px 25px rgba(11,31,51,.05);
}


/* ---------------------------------------------------------
   IMAGE SIDE
--------------------------------------------------------- */

.feature-visual{
    position:relative;

    width:100%;
    min-height:500px;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:visible;

    direction:ltr;

    z-index:2;
}

.feature-product-image{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:500px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 30px 45px rgba(11,31,51,.24)
        );

    transition:
        transform .35s ease,
        filter .35s ease;
}

.feature-visual:hover .feature-product-image{
    transform:scale(1.025);

    filter:
        drop-shadow(
            0 36px 52px rgba(11,31,51,.28)
        );
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

    .feature{
        padding:70px 0;
    }

    .feature .container{
        grid-template-columns:
            1fr 1fr;

        gap:30px;

        min-height:470px;
    }

    .feature h2{
        font-size:52px;
    }

    .feature h3{
        font-size:19px;
    }

    .feature p{
        font-size:14px;
    }

    .feature-list{
        grid-template-columns:
            repeat(3,1fr);

        gap:7px;
    }

    .feature-list div{
        font-size:10px;
    }

    .feature-visual{
        min-height:420px;
    }

    .feature-product-image{
        max-width:95%;
        max-height:420px;
    }
}


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

@media(max-width:600px){

    .feature{
        padding:60px 0;
    }

    .feature .container{
        width:calc(100% - 24px);

        display:grid;

        grid-template-columns:1fr;

        gap:30px;

        min-height:auto;

        direction:ltr;
    }

    /* متن اول */

    .feature .container > div:first-child{
        width:100%;

        text-align:left;
    }

    .feature h2{
        font-size:50px;

        letter-spacing:-2px;
    }

    .feature h3{
        font-size:19px;
    }

    .feature p{
        font-size:14px;
    }

    .feature-list{
        grid-template-columns:
            1fr;

        max-width:100%;
    }

    .feature-list div{
        min-height:45px;
    }

    .feature .btn.primary{
        width:auto;

        min-width:180px;
    }

    /* تصویر زیر متن */

    .feature-visual{
        width:100%;

        min-height:350px;

        display:flex;

        align-items:center;
        justify-content:center;
    }

    .feature-product-image{
        max-width:92%;
        max-height:350px;
    }

    .feature-visual:hover .feature-product-image{
        transform:none;
    }
}
/* =========================================================
FEATURE — PERSIAN TEXT ALIGNMENT
========================================================= */

/* متن توضیحات فارسی */
.feature-content > p{
direction:rtl;
text-align:right;
}

/* عنوان فارسی محصول منتخب */
.feature-content > .eyebrow{
direction:rtl;
text-align:right;
}

/* سه گزینه فارسی */
.feature-list a{
direction:rtl;
text-align:center;
}

/* در موبایل */
@media(max-width:600px){

.feature-content > p{
    text-align:right;
}

.feature-content > .eyebrow{
    text-align:right;
}


}
/* =========================================================
   FEATURED PRODUCT - TEXT ALIGNMENT
========================================================= */

.feature > .container > div:first-child{
    text-align:center;
}

.feature > .container > div:first-child .eyebrow{
    display:block;
    width:100%;
    text-align:center;
}

.feature > .container > div:first-child h2{
    text-align:center;
    direction:ltr;
}

.feature > .container > div:first-child h3{
    text-align:center;
    direction:ltr;
}

.feature > .container > div:first-child p{
    margin-left:auto;
    margin-right:auto;
    text-align:right;
    direction:rtl;
}

.feature-list{
    justify-content:center;
}

.feature > .container > div:first-child > .btn{
    margin-left:auto;
    margin-right:auto;
}
.feature > .container > div:first-child > .btn.primary{
    display:inline-flex;

    background:#087F83 !important;
    color:#ffffff !important;

    border:1px solid #087F83 !important;

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

    box-shadow:
        0 10px 25px rgba(8,127,131,.22);
}

.feature > .container > div:first-child > .btn.primary:hover{
    background:#066b6e !important;
    color:#ffffff !important;

    border-color:#066b6e !important;

    box-shadow:
        0 14px 30px rgba(8,127,131,.28);
}
/* =========================================================
   HERO BUTTONS - FINAL STYLE
========================================================= */

.hero-actions .btn{
    border-radius:11px !important;
    min-height:49px !important;

    padding:11px 20px !important;

    color:#fff !important;

    text-shadow:none !important;

    box-shadow:none !important;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}


/* درباره کربوکسی */

.hero-actions .btn.primary{
    background:rgba(255,255,255,.07) !important;

    border:1px solid rgba(255,255,255,.34) !important;
}

.hero-actions .btn.primary:hover{
    background:rgba(255,255,255,.14) !important;

    border-color:rgba(255,255,255,.55) !important;
}


/* مشاهده دستگاه */

.hero-actions .btn.secondary{
    background:rgba(255,255,255,.07) !important;

    border:1px solid rgba(255,255,255,.34) !important;

    color:#fff !important;
}

.hero-actions .btn.secondary:hover{
    background:rgba(255,255,255,.14) !important;

    border-color:rgba(255,255,255,.55) !important;
}
/* =========================================================
   CTA - CONSULTATION BUTTON
========================================================= */

.cta-box .btn.primary{
    background:rgba(255,255,255,.07) !important;

    border:1px solid rgba(255,255,255,.34) !important;

    color:#fff !important;

    box-shadow:none !important;

    text-shadow:none !important;

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);
}

.carboxy-page .cta-box{
  border:1px solid rgba(8,127,131,.28);
  background:
    radial-gradient(circle at 85% 20%,rgba(13,182,189,.25),transparent 35%),
    linear-gradient(135deg,#d9f1f1,#edf8f8);
  box-shadow:0 18px 44px rgba(8,127,131,.14);
  color:#0B1F33;
}

.carboxy-page .cta-box h2{
  color:#0B1F33!important;
  font-weight:900;
}

.carboxy-page .cta-box p{
  color:#294556!important;
  font-weight:600;
}
}
/* =========================================================
   HEADER - CONSULTATION BUTTON - FINAL
========================================================= */

header .actions a.btn.primary{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    background-color:#087F83 !important;
    background-image:none !important;

    color:#ffffff !important;

    border:1px solid #087F83 !important;

    box-shadow:none !important;

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

    text-shadow:none !important;
}

header .actions a.btn.primary:hover{
    background-color:#066b6e !important;
    background-image:none !important;

    color:#ffffff !important;

    border-color:#066b6e !important;

    box-shadow:none !important;
}
/* =========================================================
   PRODUCTS CATEGORY - PREMIUM
========================================================= */

#products{
    background:#fff;
    padding:82px 0 85px;
}


/* عنوان بخش */

#products .head{
    display:block;
    text-align:center;
    margin-bottom:42px;
}

#products .head h2{
    margin:0;

    color:var(--navy);

    font-size:32px;
    font-weight:900;

    line-height:1.4;
}

#products .head p{
    margin:8px 0 0;

    color:var(--muted);

    font-size:14px;
}


/* کارت‌ها */

#products .grid4{
    display:grid;

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

    gap:20px;
}


/* کارت */

#products .card{
    position:relative;

    min-height:265px;

    padding:28px 25px;

    display:flex;
    flex-direction:column;

    background:#fff;

    border:1px solid #DDE5E8;

    border-radius:22px;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

#products .card:hover{
    transform:translateY(-6px);

    border-color:#b8dfe1;

    box-shadow:
        0 20px 45px rgba(11,31,51,.10);
}


/* نور ظریف پایین کارت */

#products .card::after{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    left:-65px;
    bottom:-75px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(13,182,189,.13),
            transparent 70%
        );

    pointer-events:none;
}


/* آیکون */

#products .icon{
    width:58px;
    height:58px;

    margin-bottom:20px;

    display:grid;
    place-items:center;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #e8f8f8,
            #f5fbfb
        );

    border:1px solid #d5eeee;

    color:var(--teal);

    font-size:17px;
    font-weight:900;

    flex:0 0 auto;
}


/* عنوان کارت */

#products .card h3{
    margin:0 0 7px;

    color:var(--navy);

    font-size:18px;
    font-weight:900;

    line-height:1.5;

    direction:ltr;
    text-align:left;
}


/* توضیح */

#products .card p{
    margin:0;

    color:var(--muted);

    font-size:13px;

    line-height:1.9;

    direction:rtl;
    text-align:right;
}


/* لینک پایین کارت */

#products .card .link{
    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    align-self:flex-start;

    margin-top:auto;
    padding-top:18px;

    color:var(--teal);

    font-size:13px;
    font-weight:900;

    transition:
        color .2s ease,
        transform .2s ease;
}

#products .card .link:hover{
    color:#066b6e;

    transform:translateX(-3px);
}



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

@media(max-width:950px){

    #products .grid4{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:600px){

    #products{
        padding:65px 0;
    }

    #products .head{
        margin-bottom:30px;
    }

    #products .head h2{
        font-size:27px;
    }

    #products .head p{
        font-size:13px;
    }

    #products .grid4{
        grid-template-columns:1fr;

        gap:15px;
    }

    #products .card{
        min-height:235px;

        padding:25px 22px;
    }

}
/* =========================================================
   WHY MEDCOTEB - HEADER
========================================================= */

#about .head{
    justify-content:center;
}

#about .head > div{
    width:100%;
    text-align:center;
}

#about .head h2,
#about .head p{
    text-align:center;
}
/* =========================================================
   WHY MEDCOTEB - IMAGES
========================================================= */

#about .category-image{
    width:100%;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:22px;

    overflow:hidden;
    border-radius:16px;

    background:#f4f7f8;
}

#about .category-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:
        transform .35s ease,
        filter .35s ease;
}

#about .card:hover .category-image img{
    transform:scale(1.035);
}
/* =========================================================
   APOLON FEATURED DEVICE
========================================================= */

.feature .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:55px;
}

.feature-content{
    min-width:0;
}

.feature-visual{
    position:relative;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
}

/* پس‌زمینه نور دستگاه */

.feature-visual::before{
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    right:50%;
    top:50%;
    transform:translate(50%,-50%);
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(13,182,189,.18) 0%,
            rgba(13,182,189,.08) 38%,
            transparent 72%
        );

    z-index:-1;
    pointer-events:none;
}


/* تصویر اصلی */

.apolon-image-main{
    position:relative;
    z-index:2;

    width:360px;
    height:470px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;

    overflow:hidden;

background:
        linear-gradient(
            145deg,
            #eef3f5,
            #dfe8eb
        );

    border:1px solid rgba(11,31,51,.10);
    box-shadow:
        0 28px 60px rgba(5,25,38,.20);
}

.apolon-image-main img{
    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

    padding:18px;

    transition:
        transform .4s ease;
}


/* تصویر دوم */

.apolon-image-secondary{
    position:absolute;

    z-index:3;

    left:15px;
    bottom:35px;

    width:205px;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    overflow:hidden;

   background:#e8eff1;

    border:5px solid rgba(13,182,189,.55);

    box-shadow:
        0 18px 40px rgba(5,25,38,.22),
        0 0 0 1px rgba(13,182,189,.08);
}

.apolon-image-secondary img{
    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

    transition:
        transform .4s ease;
}


/* Hover */

.feature:hover .apolon-image-main img{
    transform:scale(1.025);
}

.feature:hover .apolon-image-secondary img{
    transform:scale(1.035);
}


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

@media (max-width:900px){

    .feature .container{
        grid-template-columns:1fr;
        gap:35px;
    }

    .feature-content{
        text-align:right;
    }

    .feature-visual{
        min-height:500px;
        margin-top:10px;
    }

}


@media (max-width:600px){

    .feature-visual{
        min-height:410px;
    }

    .apolon-image-main{
        width:285px;
        height:380px;
    }

    .apolon-image-secondary{
        width:150px;
        height:115px;

        left:0;
        bottom:25px;

        border-width:4px;
    }

}
/* =========================================================
   PRODUCT CATEGORIES - RTL ALIGNMENT
========================================================= */

#products .grid4 .card{
    direction:rtl !important;
    text-align:right !important;
}

#products .grid4 .card h3{
    direction:rtl !important;
    text-align:right !important;
    width:100%;
}

#products .grid4 .card p{
    direction:rtl !important;
    text-align:right !important;
    width:100%;
}

#products .grid4 .card .link{
    direction:rtl !important;
    text-align:right !important;
    display:block;
    width:100%;
}
/* =========================================================
   ACCESSORIES EMPTY STATE
========================================================= */

.empty-state{
    min-height:280px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:45px 25px;

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

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1f5f6
        );

    box-shadow:
        0 15px 40px rgba(11,31,51,.06);
}

.empty-state-icon{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:18px;

    border-radius:16px;

    background:rgba(13,182,189,.10);

    border:1px solid rgba(13,182,189,.20);

    color:#0db6bd;

    font-size:25px;
}

.empty-state h3{
    margin:0 0 10px;

    font-size:20px;
    color:var(--navy);
}

.empty-state p{
    max-width:560px;

    margin:0 0 25px;

    color:var(--muted);

    line-height:1.9;
}
/* =========================================================
   GLOBAL SITE LOGO - FINAL
========================================================= */

.site-logo{
    display:flex !important;
    align-items:center !important;
    flex-shrink:0 !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    text-decoration:none !important;
    line-height:0 !important;
    direction:ltr !important;
}

.site-logo img{
    display:block !important;
    width:190px !important;
    height:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
}


/* MOBILE */

@media(max-width:600px){

    .site-logo img{
        width:155px !important;
        height:auto !important;
    }

}
/* =========================================================
   KNOWLEDGE - CENTERED HEADER
========================================================= */

#knowledge .head{
    display:block !important;
    width:100%;
    text-align:center !important;
    margin-bottom:42px;
}

#knowledge .head > div{
    width:100%;
    text-align:center !important;
}

#knowledge .head h2{
    width:100%;
    margin:0;
    text-align:center !important;
    direction:rtl;
}

#knowledge .head p{
    width:100%;
    margin:8px 0 0;
    text-align:center !important;
    direction:rtl;
}
/* =========================================================
   FOOTER LOGO - PREMIUM
========================================================= */

footer .brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    width:100%;

    direction:rtl;
    text-align:right;
}

/* لوگو */

footer .site-logo{
    display:flex !important;
    align-items:center;
    justify-content:flex-start;

    width:auto !important;
    height:auto !important;

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

    direction:ltr;

    /* زمینه بسیار ظریف برای جدا شدن لوگو */
    padding:8px 12px !important;
    border-radius:12px;

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

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);
}

/* خود لوگو */

footer .site-logo img{
    display:block !important;

    width:190px !important;
    height:auto !important;

    max-width:100%;

    object-fit:contain;

    /* رنگ اصلی لوگو حفظ می‌شود */
    filter:none !important;
}

/* متن فارسی زیر لوگو */

footer .brand + p{
    width:100%;

    margin:16px 0 0;

    direction:rtl;
    text-align:right;

    color:#a9bbc4;

    font-size:13px;
    line-height:1.9;
}


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

@media(max-width:600px){

    footer .site-logo{
        padding:7px 10px !important;
    }

    footer .site-logo img{
        width:155px !important;
    }

    footer .brand + p{
        text-align:right;
    }

}

/* =========================================================
   FOOTER CONTACT ICONS
========================================================= */

.footer-contact{
    display:flex;
    align-items:center;
    gap:9px;

    margin:10px 0;

    color:#9cafb8;

    font-size:13px;
    line-height:1.7;

    text-decoration:none;

    transition:
        color .2s ease,
        padding-right .2s ease;
}

.footer-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:17px;
    height:17px;

    flex:0 0 17px;

    color:var(--teal2);
}

.footer-icon svg{
    display:block;

    width:16px;
    height:16px;

    max-width:16px;
    max-height:16px;
}

.footer-contact:hover{
    color:#35D4D8;
}

.footer-contact:hover .footer-icon{
    color:#35D4D8;
}

.footer-address{
    cursor:default;
}

.footer-consult{
    margin-top:12px;
}


/* =========================================================
   FOOTER SOCIAL LINKS
========================================================= */

.footer-socials{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:18px;
}

.footer-socials a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

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

    color:#9cafb8;

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

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

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

.footer-socials svg{
    width:17px;
    height:17px;

    display:block;
}

.footer-socials a:hover{
    color:#35D4D8;

    background:rgba(13,182,189,.08);

    border-color:rgba(13,182,189,.30);

    transform:translateY(-2px);
}
/* =========================================================
   MEDCOTEB — GLOBAL BUTTON VISIBILITY FIX
   Append this block at the VERY END of assets/style.css.
   ========================================================= */

/* Header consultation button — visible by default */
header .actions a.btn.primary,
header .actions a.btn.primary:hover,
header .actions a.btn.primary:focus-visible,
header .actions a.btn.primary:active{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#087F83 !important;
  background-image:none !important;
  color:#fff !important;
  border:1px solid #087F83 !important;
  opacity:1 !important;
  visibility:visible !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 10px 24px rgba(8,127,131,.18) !important;
}

header .actions a.btn.primary:hover{
  background:#066B6E !important;
  border-color:#066B6E !important;
}

/* CTA consultation buttons — visible on light CTA boxes */
.cta-box .btn.primary,
.cta-box .btn.primary:hover,
.cta-box .btn.primary:focus-visible,
.cta-box .btn.primary:active{
  background:#087F83 !important;
  background-image:none !important;
  color:#fff !important;
  border-color:#087F83 !important;
  opacity:1 !important;
  visibility:visible !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 12px 25px rgba(8,127,131,.20) !important;
}

.cta-box .btn.outline,
.cta-box .btn.outline:hover,
.cta-box .btn.outline:focus-visible,
.cta-box .btn.outline:active{
  background:#fff !important;
  color:#0B1F33 !important;
  border-color:rgba(11,31,51,.20) !important;
  opacity:1 !important;
  visibility:visible !important;
  -webkit-text-fill-color:#0B1F33 !important;
}
.ap-pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}

.ap-price-card{
  padding:28px;
  border:1px solid rgba(11,31,51,.09);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(11,31,51,.06);
}

.ap-price-card.featured{
  border-color:rgba(8,127,131,.28);
  background:linear-gradient(145deg,#edf8f8,#fff);
}

.ap-price-label{
  color:#087F83;
  font-size:14px;
  font-weight:800;
  margin-bottom:12px;
}

.ap-price{
  color:#0B1F33;
  font-size:clamp(25px,3vw,34px);
  font-weight:900;
  line-height:1.3;
  margin-bottom:14px;
}

.ap-price-card p{
  margin:0;
  color:#526572;
  line-height:2;
  font-size:14px;
}

.ap-pricing-note{
  margin-top:18px;
  padding:18px 20px;
  border-radius:16px;
  background:#f4f8f9;
  border:1px solid rgba(8,127,131,.12);
  color:#405563;
  line-height:2;
  font-size:14px;
}

.ap-pricing-note strong{
  color:#087F83;
}

@media(max-width:720px){
    .hero-actions{
    flex-direction:column;
    transform:none;
}
  .ap-pricing-grid{
    grid-template-columns:1fr;
  }
}
/* Knowledge archive button */

.knowledge-more{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:32px;
}

.knowledge-more .article-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  padding:13px 26px;
  border-radius:12px;
  background:#087F83;
  color:#fff !important;
  text-decoration:none;
  font-weight:700;
  text-align:center;
  transition:all .2s ease;
}

.knowledge-more .article-link:hover{
  background:#0B1F33;
  transform:translateY(-2px);
}