body{background:radial-gradient(900px 500px at 90% -5%,rgba(47,168,98,.14),transparent 60%),radial-gradient(700px 500px at 0% 40%,rgba(56,189,160,.10),transparent 60%),var(--bg);background-attachment:fixed}
::selection{background:var(--pri2);color:#fff}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:var(--pri);border-radius:9px}
header{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.logo{background:linear-gradient(90deg,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{background:linear-gradient(120deg,var(--pri),#0f766e,var(--pri2),var(--pri));background-size:300% 300%;animation:flow 14s ease infinite;padding:84px 0 78px}
@keyframes flow{50%{background-position:100% 50%}}
.hero h1{font-size:clamp(44px,9vw,76px);line-height:1.15;letter-spacing:-1px;text-shadow:0 6px 40px rgba(0,0,0,.35);background:linear-gradient(180deg,#fff 30%,#d9ffe8);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);border-radius:99px;padding:4px 16px;font-size:14px;margin-bottom:14px}
.stat{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);border-radius:18px}
.btn{background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 22px -8px var(--pri);transition:.25s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px -8px var(--pri)}
.btn.l{background:#fff;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}.btn.g{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);box-shadow:none}.btn.o{background:transparent;box-shadow:none}
h2{position:relative;padding-bottom:10px}h2:after{content:"";position:absolute;bottom:0;right:0;width:54px;height:4px;border-radius:9px;background:linear-gradient(90deg,var(--pri),var(--pri2))}
.w[style*="center"] h2:after{right:50%;margin-right:-27px}
.card{border-radius:22px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 2px 14px rgba(20,90,50,.06)}
a.card:hover{transform:translateY(-6px);box-shadow:0 22px 46px -18px var(--pri);border-color:var(--pri2)}
.ph img{transition:transform .7s}a.card:hover .ph img{transform:scale(1.08)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pri2);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri2) 22%,transparent)}
form{border-radius:22px;box-shadow:0 20px 50px -30px var(--pri)}
.steps{counter-reset:s}.steps .card{position:relative;padding:26px 20px 18px;counter-increment:s}
.steps .card:before{content:counter(s);position:absolute;top:-16px;right:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 18px -6px var(--pri)}
.calc{display:grid;gap:12px;max-width:560px;margin:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;text-align:right}
.calc .res{background:var(--soft);border-radius:14px;padding:14px;text-align:center;font-weight:800;font-size:20px;color:var(--pri)}
details.fq{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 18px;margin-bottom:10px}
details.fq summary{cursor:pointer;font-weight:600;list-style:none}details.fq summary:after{content:"＋";float:left;color:var(--pri)}details.fq[open] summary:after{content:"－"}
details.fq p{margin:8px 0 0;color:var(--mut)}
.ok{text-align:center;background:var(--card);border:1px solid var(--pri2);border-radius:22px;padding:34px 20px;max-width:560px}
.ok .big{font-size:54px}.ok .cd{display:inline-block;background:var(--soft);color:var(--pri);border-radius:12px;padding:4px 18px;font-weight:800;letter-spacing:2px;margin:8px 0}
.er{background:#fde2e0;color:#a5281b;border-radius:12px;padding:10px 14px;font-size:14px}
.hp{position:absolute;top:0;right:0;opacity:0;height:0;width:0;padding:0;border:0;pointer-events:none}
.fph{border:2px dashed var(--line);border-radius:14px;padding:12px;background:var(--bg)}
.mbar{display:none}
@media(max-width:700px){.mbar{display:flex;position:fixed;bottom:0;right:0;left:0;z-index:19;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 10px;gap:8px}.mbar a{flex:1;text-align:center;border-radius:12px;padding:9px 4px;font-size:14px;font-weight:600;background:var(--soft);color:var(--pri)}.mbar a:first-child{background:var(--pri);color:#fff}body{padding-bottom:62px}.wa{bottom:74px!important}.top{bottom:140px;left:25px}}

.cta{background:linear-gradient(rgba(6,38,22,.72),rgba(6,38,22,.82)),url(images/hero.jpg) center/cover!important;color:#fff}.cta h2,.cta .sub{color:#fff}.cta h2:after{background:#fff}
.cta .btn{background:#fff;color:#145c33}.cta .btn.o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.card.cb .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--soft),var(--card));border:1px solid var(--line);font-size:28px;margin-bottom:6px}
.mq{background:linear-gradient(90deg,var(--pri),#0f766e,var(--pri2));color:#fff}
footer{background:linear-gradient(180deg,#0f3d23,#0a2d19)}
.hero{background:#0f4d2a;animation:none;padding:100px 0 160px}
.hero:before{content:"";position:absolute;top:0;right:0;left:0;bottom:0;width:auto;height:auto;border-radius:0;filter:none;opacity:1;animation:none;background:linear-gradient(180deg,rgba(4,30,17,.5),rgba(4,30,17,.2) 45%,rgba(4,30,17,.7)),url(images/hero.jpg) center/cover}
.hero:after{display:none}.hero .sun,.hero .cloud,.hero .ly{display:none}.hero>.w{position:relative;z-index:5}.hero .wave{pointer-events:none}
.page-h{background:linear-gradient(rgba(4,30,17,.62),rgba(4,30,17,.74)),url(images/hero.jpg) center 40%/cover;padding:48px 0}.page-h h1{color:#fff}.page-h .crumb,.page-h .crumb a{color:rgba(255,255,255,.85)}
.bld{background:linear-gradient(rgba(6,38,22,.5),rgba(6,38,22,.78)),url(images/cta.jpg) center/cover;color:#fff;padding:96px 0}.bld h2,.bld .sub{color:#fff}.bld h2:after{background:#fff}.bld .btn{background:#fff;color:#145c33}.bld .btn.o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.ok{margin:0 auto}.ok h2:after{display:none}
@media(max-width:700px){.gear,.panel{bottom:74px!important}}

/* ---- fixes ---- */
/* hero title: no letter-spacing on Persian (breaks joining), no text-shadow on clipped text */
.hero h1,.hero h1 .wd{letter-spacing:0;text-shadow:none}
.hero h1{filter:drop-shadow(0 6px 24px rgba(0,0,0,.4))}
/* step badges were cut in half by overflow:hidden; Persian digits */
.steps .card{overflow:visible}
.steps .card:before{content:counter(s,persian)}
.card:after{border-radius:inherit}
/* 4-item grid: 4 columns / 2x2 instead of 3+1 */
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
/* filter bar */
.fbar{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.fbar #fq{grid-column:1/-1}
input::placeholder{text-overflow:ellipsis}
/* forms */
form>.btn{margin:0}
input[type=tel]{direction:ltr;text-align:right}
.fph input[type=file]{padding:6px;font-size:13px}
input::file-selector-button{font-family:inherit;border:0;border-radius:8px;background:var(--pri);color:#fff;padding:5px 12px;margin-inline-end:10px;cursor:pointer}
/* mobile nav: hint that it scrolls */
@media(max-width:700px){nav{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px);mask-image:linear-gradient(to right,transparent,#000 28px);padding-inline-end:4px;scrollbar-width:none}nav::-webkit-scrollbar{display:none}}

/* dark mode: --pri is too dark for text on dark backgrounds, use a lighter --pt for text/outlines */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--pt:#5fd18a}:root:not([data-theme=light])[data-accent=blue]{--pt:#6bb8f0}:root:not([data-theme=light])[data-accent=gold]{--pt:#e7b94e}}
:root[data-theme=dark]{--pt:#5fd18a}:root[data-theme=dark][data-accent=blue]{--pt:#6bb8f0}:root[data-theme=dark][data-accent=gold]{--pt:#e7b94e}
h2,.chip,.btn.o,.calc .res,.ok .cd,.crumb a,details.fq summary:after,.note a,.card h3 a:hover,.top,nav a:hover,nav a.on{color:var(--pt,var(--pri))}
.btn.o{border-color:var(--pt,var(--pri))}
.logo{background-image:linear-gradient(90deg,var(--pt,var(--pri)),var(--pri2))}
.page-h .crumb a{color:rgba(255,255,255,.85)}
.cta+footer{margin-top:0}

.mb{display:none;background:none;border:0;padding:10px;cursor:pointer;flex-direction:column;gap:5px;justify-content:center}
.mb i{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--pri);transition:.25s}
nav a[href="account.html"]{max-width:120px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){
.mb{display:flex}
header .w{position:relative}
header nav{display:none;position:absolute;top:100%;right:0;left:0;flex-direction:column;gap:0;overflow:visible;-webkit-mask-image:none;mask-image:none;padding:8px 0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.18);max-height:calc(100vh - 70px);overflow-y:auto}
body.mo header nav{display:flex}
header nav a{padding:13px 20px;font-size:16px;border-bottom:1px solid var(--line);max-width:none!important}
header nav a:last-child{border-bottom:0;color:var(--pri);font-weight:700}
header nav a:after{display:none}
body.mo .mb i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.mo .mb i:nth-child(2){opacity:0}
body.mo .mb i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}