/* site.css — clean-tech.ir (کلین‌تک / آریان تجارت ماندگار)
   Brand stylesheet. Loads AFTER ir-kit.css. Logical properties only, RTL-first.
   Tokens derived from the company logo mark (cyan #00B8D1). */

:root{
  --brand:#00B8D1;          /* logo cyan — fills, glyphs, gradients */
  --brand-deep:#00707E;     /* accessible cyan for text/links on white (5.0:1) */
  --ink:#062A33;            /* deep teal ink — dark sections, headings */
  --ink-2:#0B3F4C;          /* dark section gradient partner */
  --signal:#EE7B36;         /* warm accent — primary CTA only, used sparingly */
  --paper:#FFFFFF;
  --paper-2:#F2F9FB;        /* tinted surface */
  --line:#D8E7EB;
  --body:#274A53;           /* body copy on light (7.4:1) */
  --muted:#5B7A83;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 14px 40px rgba(6,42,51,.10);
  --shadow-lg:0 24px 60px rgba(6,42,51,.16);
  --dark-grad:linear-gradient(215deg,#0B4A58 0%,#083945 38%,#062A33 70%,#04202A 100%);
}

body{background:var(--paper);color:var(--body);font-size:17px}
@media (max-width:520px){body{font-size:16px}}
h1,h2,h3,h4{color:var(--ink);font-weight:700}
h1{font-weight:900;font-size:clamp(1.85rem,1.15rem + 2.6vw,3.05rem);letter-spacing:-.01em}
h2{font-size:clamp(1.45rem,1.05rem + 1.5vw,2.15rem);font-weight:800}
h3{font-size:clamp(1.1rem,.98rem + .5vw,1.32rem)}
a{text-decoration:none}
a:not(.btn):not(.plain):not(.card-link):hover{text-decoration:underline;text-underline-offset:3px}
strong{color:var(--ink);font-weight:700}
::selection{background:var(--brand);color:#fff}

/* ---------- layout helpers ---------- */
.section{padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.section.tint{background:var(--paper-2)}
.section-head{max-inline-size:62ch;margin-block-end:2.2rem}
.section-head.center{margin-inline:auto;text-align:center}
.kicker{color:var(--brand-deep);font-weight:700;font-size:.92rem;letter-spacing:.04em}
.dark .kicker{color:var(--brand)}
.lead{font-size:1.08rem;color:var(--body)}
.dark{background:var(--dark-grad);color:#CFE6EC;position:relative}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark strong{color:#fff}
.dark .lead{color:#BBD8E0}
.grid{display:grid;gap:1.15rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.mb0{margin-block-end:0}

/* perspective floor texture on dark sections */
.dark::before{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;block-size:38%;
  background:
    repeating-linear-gradient(90deg,rgba(0,184,209,.16) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(0deg,rgba(0,184,209,.12) 0 1px,transparent 1px 46px);
  transform:perspective(420px) rotateX(64deg);transform-origin:bottom;
  opacity:.5;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);
}
.dark>*{position:relative;z-index:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-block-size:48px;
  padding:.7rem 1.6rem;border-radius:999px;font-weight:700;font-size:1rem;border:1.5px solid transparent;
  transition:transform .2s ease,box-shadow .25s ease,background-color .2s ease,color .2s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--signal);color:#fff;box-shadow:0 12px 26px rgba(238,123,54,.32)}
.btn-primary:hover{background:#D96A28}
.btn-brand{background:var(--brand);color:#04222A;box-shadow:0 12px 26px rgba(0,184,209,.3)}
.btn-brand:hover{background:#00A2B8}
.btn-ghost{border-color:var(--brand-deep);color:var(--brand-deep);background:transparent}
.btn-ghost:hover{background:var(--brand-deep);color:#fff}
.dark .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.dark .btn-ghost:hover{background:#fff;color:var(--ink)}
.btn svg{inline-size:20px;block-size:20px;fill:currentColor;flex:none}

/* ---------- header ---------- */
.site-header{position:sticky;inset-block-start:0;z-index:200;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-block-end:1px solid var(--line);transition:box-shadow .25s ease,padding .25s ease}
.site-header.scrolled{box-shadow:0 8px 26px rgba(6,42,51,.09)}
.hbar{display:flex;align-items:center;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand img{inline-size:42px;block-size:42px}
.brand b{display:block;font-size:1.12rem;color:var(--ink);font-weight:900;line-height:1.2}
.brand span{display:block;font-size:.72rem;color:var(--muted);font-weight:500;line-height:1.3}
.nav{margin-inline-start:auto;display:flex;gap:.15rem;align-items:center}
.nav a{padding:.55rem .7rem;border-radius:10px;font-weight:500;font-size:.98rem;color:var(--ink);transition:background-color .2s,color .2s}
.nav a:hover{background:var(--paper-2);color:var(--brand-deep);text-decoration:none}
.nav a[aria-current="page"]{color:var(--brand-deep);font-weight:700}
.header-cta{flex:none;display:flex;gap:.5rem;align-items:center}
.header-cta .btn{min-block-size:44px;padding:.5rem 1.1rem;font-size:.95rem}
.lang-link{font-size:.9rem;color:var(--muted);padding:.4rem .55rem;border-radius:8px;border:1px solid var(--line)}
.nav-toggle{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line);border-radius:12px;
  inline-size:46px;block-size:46px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span{display:block;inline-size:20px;block-size:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;inset-inline:0;block-size:2px;background:var(--ink)}
.nav-toggle span::before{inset-block-start:-6px}
.nav-toggle span::after{inset-block-start:6px}

@media (max-width:1040px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset-block-start:64px;inset-inline:0;inset-block-end:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:1rem;margin:0;overflow-y:auto;transform:translateY(-12px);opacity:0;
    visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:210}
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav a{padding:.95rem .8rem;border-block-end:1px solid var(--line);border-radius:0;font-size:1.05rem}
  .header-cta .btn-primary{display:none}
  body.nav-open{overflow:hidden}
}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#F6FCFD 0%,#FFFFFF 62%);
  padding-block:clamp(2.2rem,1.4rem + 3.5vw,4.4rem) clamp(2.6rem,1.6rem + 4vw,5rem)}
.hero .blob{inline-size:420px;block-size:420px;background:rgba(0,184,209,.20);inset-block-start:-120px;inset-inline-end:-100px}
.hero .blob.b2{inline-size:340px;block-size:340px;background:rgba(238,123,54,.14);inset-block-start:auto;inset-block-end:-140px;inset-inline-end:auto;inset-inline-start:-90px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:center;position:relative;z-index:1}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1{margin-block-end:.6rem}
.hero .lead{font-size:1.12rem;max-inline-size:52ch}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1.4rem;list-style:none}
.hero-chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.92rem;
  color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-end:1rem}
.hero-note{font-size:.94rem;color:var(--muted);margin:0}

/* signature element — pointer reveal mask (before → after) */
.xray{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;background:var(--ink);isolation:isolate;--cx:50%;--cy:50%;--r:clamp(96px,12vw,158px)}
.xray img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.xray-after{clip-path:circle(var(--r) at var(--cx) var(--cy));transition:clip-path .12s linear;will-change:clip-path}
.xray-ring{position:absolute;inline-size:calc(var(--r)*2);block-size:calc(var(--r)*2);border-radius:50%;
  inset-block-start:var(--cy);inset-inline-start:var(--cx);transform:translate(50%,-50%);
  border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,184,209,.5) inset;pointer-events:none;opacity:.9}
html:not([dir="rtl"]) .xray-ring{transform:translate(-50%,-50%)}
.xray-label{position:absolute;inset-block-end:14px;inset-inline-start:14px;background:rgba(6,42,51,.82);color:#fff;
  font-size:.85rem;font-weight:600;padding:.42rem .85rem;border-radius:999px;pointer-events:none;backdrop-filter:blur(4px)}
.xray-label.b{inset-inline-start:auto;inset-inline-end:14px;background:rgba(0,184,209,.92);color:#04222A}
.xray-hint{display:none;position:absolute;inset-block-start:14px;inset-inline-start:50%;transform:translateX(50%);
  background:rgba(255,255,255,.92);color:var(--ink);font-size:.84rem;font-weight:600;padding:.35rem .8rem;
  border-radius:999px;pointer-events:none;transition:opacity .3s ease}
html:not([dir="rtl"]) .xray-hint{transform:translateX(-50%)}
@media (hover:hover) and (pointer:fine){.xray-hint{display:block}}
@media (hover:none),(pointer:coarse){.xray-ring{opacity:.7}.xray-label{font-size:.8rem;padding:.35rem .7rem}}
@media (prefers-reduced-motion:reduce){
  .xray-after{clip-path:none;transition:none}
  .xray-ring,.xray-hint{display:none}
  .xray-label{display:none}
}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;display:flex;
  flex-direction:column;gap:.55rem;position:relative;overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease}
.card:hover{box-shadow:var(--shadow);border-color:#B9DDE5}
.card h3{margin:0}
.card p{margin:0;font-size:.98rem;color:var(--body)}
.card .more{margin-block-start:auto;padding-block-start:.6rem;color:var(--brand-deep);font-weight:700;font-size:.95rem}
.card-ico{inline-size:52px;block-size:52px;border-radius:14px;background:rgba(0,184,209,.12);display:grid;place-items:center;
  transition:transform .25s ease,background-color .25s ease}
.card-ico svg{inline-size:28px;block-size:28px;fill:none;stroke:var(--brand-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card:hover .card-ico{transform:scale(1.1) rotate(-4deg);background:var(--brand)}
.card:hover .card-ico svg{stroke:#04222A}
.card-link{color:inherit;display:block}
.card-link:hover{text-decoration:none}

.dark .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);backdrop-filter:blur(2px)}
.dark .card p{color:#B7D5DD}
.dark .card:hover{border-color:rgba(0,184,209,.55);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.dark .card .more{color:var(--brand)}
.dark .card-ico{background:rgba(0,184,209,.18)}
.dark .card-ico svg{stroke:var(--brand)}

/* photo cards */
.pcard{padding:0}
.pcard img{inline-size:100%;block-size:190px;object-fit:cover}
.pcard .pbody{padding:1.15rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pcard .pbody h3{margin:0}
.tiltwrap{position:relative}
[data-tilt]{will-change:transform}
[data-tilt]::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);opacity:0;
  transition:opacity .3s ease;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(0,184,209,.18),transparent 65%)}
[data-tilt]:hover::after{opacity:1}

/* ---------- inner page hero ---------- */
.phero{background:var(--dark-grad);color:#CFE6EC;position:relative;overflow:hidden;padding-block:clamp(2.4rem,1.6rem + 3vw,4rem)}
.phero .container{position:relative;z-index:1}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.4rem,1rem + 2vw,2.6rem);align-items:center}
@media (max-width:860px){.phero-grid{grid-template-columns:minmax(0,1fr)}}
.phero h1{color:#fff;margin-block:.3rem .7rem}
.phero .lead{color:#C6E1E9;font-size:1.08rem;margin-block-end:1.1rem}
.phero img{border-radius:var(--radius);box-shadow:var(--shadow-lg);inline-size:100%;block-size:auto}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0 0 1.2rem;list-style:none}
.chips li{border:1px solid rgba(0,184,209,.45);color:#DCF2F6;border-radius:999px;padding:.35rem .85rem;font-size:.9rem;overflow-wrap:anywhere}

/* breadcrumb */
.crumbs{font-size:.9rem;color:#9FC4CE;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 .4rem;list-style:none}
.crumbs a{color:#9FC4CE}
.crumbs li+li::before{content:"‹";margin-inline-end:.4rem;opacity:.6}
.crumbs-light{color:var(--muted)}
.crumbs-light a{color:var(--muted)}

/* ---------- prose ---------- */
.prose{max-inline-size:74ch}
.prose h2{margin-block:2.2rem .7rem}
.prose h2:first-child{margin-block-start:0}
.prose h3{margin-block:1.6rem .5rem}
.prose p{margin-block-end:1.05em}
.prose ul,.prose ol{padding-inline-start:1.3rem;margin-block:0 1.2em}
.prose li{margin-block-end:.45em}
.ticks{list-style:none;padding-inline-start:0!important}
.ticks li{position:relative;padding-inline-start:1.85rem;margin-block-end:.55em}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;inline-size:11px;block-size:11px;
  border-radius:3px;background:var(--brand)}
.prose figure{margin:1.6rem 0}
.prose figure img{border-radius:var(--radius);inline-size:100%;block-size:auto}
.prose figcaption{font-size:.9rem;color:var(--muted);margin-block-start:.5rem}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:start}
@media (max-width:960px){.layout{grid-template-columns:minmax(0,1fr)}}
.aside{position:sticky;inset-block-start:92px;display:flex;flex-direction:column;gap:1rem}
@media (max-width:960px){.aside{position:static}}
.box{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.box h3{margin-block:0 .6rem;font-size:1.08rem}
.box ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.15rem}
.box ul a{display:block;padding:.5rem .1rem;color:var(--ink);font-size:.97rem;border-block-end:1px dashed var(--line)}
.box ul li:last-child a{border-block-end:0}
.box.cta{background:var(--dark-grad);border-color:transparent;color:#CFE6EC}
.box.cta h3{color:#fff}
.box.cta p{font-size:.96rem;color:#BBD8E0}

/* ---------- stats / steps ---------- */
.steps{counter-reset:s;display:grid;gap:1.1rem}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem 1.3rem 1.4rem;position:relative}
.step::before{counter-increment:s;content:counter(s,persian);display:grid;place-items:center;inline-size:40px;block-size:40px;
  border-radius:12px;background:var(--brand);color:#04222A;font-weight:900;margin-block-end:.7rem;transition:transform .25s ease}
.step:hover::before{transform:scale(1.1)}
.step h3{margin:0 0 .35rem}
.step p{margin:0;font-size:.98rem}

/* ---------- products ---------- */
.prod{display:flex;flex-direction:column;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.prod .kind{font-size:.86rem;color:var(--brand-deep);font-weight:700}
.prod h3{margin:0}
.prod p{margin:0;font-size:.97rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.3rem 0 0;list-style:none}
.tags li{background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;font-size:.85rem;
  color:var(--muted);overflow-wrap:anywhere}

/* ---------- posts ---------- */
.post-meta{font-size:.92rem;color:var(--muted);margin-block-end:.8rem}
.post-body{max-inline-size:72ch}

/* ---------- form ---------- */
.form{display:grid;gap:.9rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.94rem;font-weight:600;color:var(--ink)}
.dark .field label,.box.cta .field label{color:#DCF2F6}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.72rem .9rem;
  background:#fff;color:var(--ink);min-block-size:48px;inline-size:100%}
.field textarea{min-block-size:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (max-width:640px){.form-row{grid-template-columns:minmax(0,1fr)}}
.form .hint{font-size:.88rem;color:var(--muted);margin:0}

/* ---------- contact info ---------- */
.info{display:grid;gap:1rem}
.info-item{display:flex;gap:.85rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.2rem}
.info-item svg{inline-size:26px;block-size:26px;fill:none;stroke:var(--brand-deep);stroke-width:1.7;flex:none;
  stroke-linecap:round;stroke-linejoin:round;margin-block-start:.2rem}
.info-item b{display:block;color:var(--ink);font-size:.95rem}
.info-item span,.info-item a{color:var(--body);font-size:1rem;overflow-wrap:anywhere}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#A9C9D2;padding-block:3rem 1.4rem;font-size:.97rem}
.site-footer h4{color:#fff;font-size:1.02rem;margin-block:0 .8rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:1.8rem}
@media (max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.site-footer a{color:#A9C9D2}
.site-footer a:hover{color:var(--brand)}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.42rem}
.fbrand{display:flex;align-items:center;gap:.6rem;margin-block-end:.9rem}
.fbrand img{inline-size:44px;block-size:44px}
.fbrand b{color:#fff;font-size:1.1rem;display:block;font-weight:900}
.fbrand span{font-size:.8rem;display:block}
.fnote{font-size:.94rem;line-height:1.85}
.fbottom{border-block-start:1px solid rgba(255,255,255,.12);margin-block-start:2rem;padding-block-start:1.2rem;
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.9rem}
.social{display:flex;gap:.55rem;margin-block-start:.9rem}
.social a{inline-size:42px;block-size:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);display:grid;
  place-items:center;transition:background-color .2s ease,border-color .2s ease}
.social a:hover{background:var(--brand);border-color:var(--brand)}
.social svg{inline-size:20px;block-size:20px;fill:currentColor}
.social a:hover svg{fill:#04222A}

/* ---------- misc ---------- */
.progress{background:linear-gradient(90deg,var(--brand),var(--signal))}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.center{text-align:center}
.cta-band{background:var(--dark-grad);color:#CFE6EC;border-radius:var(--radius);padding:clamp(1.6rem,1.2rem + 2vw,2.8rem);
  position:relative;overflow:hidden;isolation:isolate}
.cta-band h2{color:#fff;margin-block-start:0}
.cta-band .btnrow{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-start:1.2rem}
.notfound{padding-block:clamp(3rem,2rem + 5vw,6rem);text-align:center}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,184,209,.14);color:var(--brand-deep);
  border-radius:999px;padding:.35rem .9rem;font-size:.9rem;font-weight:700}
.dark .badge,.phero .badge{background:rgba(0,184,209,.2);color:#8EE6F5}
.trustbar{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center;align-items:center;padding-block:1.4rem;
  border-block:1px solid var(--line)}
.trustbar div{text-align:center;min-inline-size:150px}
.trustbar b{display:block;color:var(--ink);font-size:1.02rem;font-weight:800}
.trustbar span{font-size:.9rem;color:var(--muted)}

/* ---------- small-screen density (breakpoint-scoped, per CLAUDE rule 2) ---------- */
@media (max-width:560px){
  .hero-chips li{font-size:.86rem;padding:.3rem .72rem}
  .hero-chips{gap:.4rem;margin-block-end:1.1rem}
  .badge{font-size:.82rem;padding:.3rem .75rem}
  .hero .lead{font-size:1.04rem}
  .hero-cta .btn{inline-size:100%}
  .trustbar{gap:1.1rem}
}