/* ==========================================================================
   Fakhteh Solutions — design system v2.0
   Tokens first. Every value below references a token, never an ad-hoc number.
   ========================================================================== */

:root{
  /* --- color ------------------------------------------------------------ */
  --teal:#107E8C;        /* primary fill — white on this = 4.79:1 AA        */
  --teal-text:#0B6270;   /* text-safe teal — 7.01:1 on white, 6.13:1 on mist*/
  --teal-deep:#0E6B78;   /* gradient end — light text on this = 5.35:1      */
  --cyan:#3EC6D0;        /* accent — ink on this = 7.24:1                   */
  --light-cyan:#9BE5EA;  /* accent on dark — 10.51:1 on ink                 */
  --ink:#0B2B33;         /* body text — 14.92:1 on white                    */
  --ink-2:#12525C;       /* dark surface variant                            */
  --slate:#55676D;       /* secondary text — 5.92:1 on white                */
  --mist:#E6F2F3;        /* tinted surface                                  */
  --page:#FAFCFC;        /* page background                                 */
  --white:#FFFFFF;
  --on-dark:#FFFFFF;
  --on-dark-muted:#E3F1F3;  /* 5.35:1 on --teal-deep, 12.89:1 on --ink      */

  /* --- space (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96) ------------------ */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* --- type (12 · 14 · 16 · 20 · 24 · 32 · 44 · 60) ---------------------- */
  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-lg:20px;
  --t-xl:24px; --t-2xl:32px; --t-3xl:44px; --t-4xl:60px;
  --lh-body:1.85;   /* Persian needs more room than Latin */
  --lh-tight:1.3;

  /* --- shape: one soft radius language ----------------------------------- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* --- depth: two elevations, tinted with ink ---------------------------- */
  --e1:0 2px 8px rgba(11,43,51,.06);
  --e2:0 16px 40px rgba(11,43,51,.12);

  /* --- motion ------------------------------------------------------------ */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-micro:180ms;
  --dur-enter:520ms;

  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Vazirmatn',Tahoma,sans-serif;
  direction:rtl;
  color:var(--ink);
  background:var(--page);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--s5)}

/* Latin fragments inside RTL text must be isolated or they scramble */
.en{font-family:'Inter','Vazirmatn',sans-serif;direction:ltr;unicode-bidi:isolate}

/* --- focus: styled, never removed ---------------------------------------- */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.on-hero :focus-visible,.page-head :focus-visible,footer :focus-visible{outline-color:var(--light-cyan)}

.skip-link{
  position:absolute;inset-inline-start:var(--s5);top:calc(var(--s5) * -4);
  z-index:200;background:var(--white);color:var(--teal-text);
  padding:var(--s3) var(--s5);border-radius:var(--r-sm);font-weight:600;
  transition:top var(--dur-micro) var(--ease);
}
.skip-link:focus{top:var(--s5)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:100;
  padding-block:var(--s3);background:transparent;
  transition:background var(--dur-enter) var(--ease),
             box-shadow var(--dur-enter) var(--ease),
             padding-block var(--dur-enter) var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:var(--e1);
  padding-block:var(--s2);
}
.site-header .wrap{display:flex;align-items:center;gap:var(--s6)}

.brand{display:flex;align-items:center;gap:var(--s3);font-weight:800;font-size:var(--t-lg)}
.brand svg{flex:none}
.brand .b-fa{line-height:1.1}
.brand .b-en{font-size:10px;letter-spacing:3px;color:var(--teal-text);font-weight:600}
.site-header:not(.scrolled).on-hero .brand,
.site-header:not(.scrolled).on-hero .nav a{color:var(--on-dark)}
.site-header:not(.scrolled).on-hero .brand .b-en{color:var(--light-cyan)}

.nav{display:flex;gap:var(--s6);font-weight:500}
.nav a{position:relative;padding-block:var(--s3);font-size:var(--t-base)}
.nav a::after{
  content:"";position:absolute;bottom:var(--s2);inset-inline-end:0;
  width:0;height:2px;background:var(--cyan);
  transition:width var(--dur-micro) var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after{width:100%}
.nav a[aria-current="page"]{color:var(--teal-text);font-weight:700}
.nav a[aria-current="page"]::after{width:100%}
.site-header:not(.scrolled).on-hero .nav a[aria-current="page"]{color:var(--light-cyan)}

.search-box{
  margin-inline-start:auto;display:flex;align-items:center;gap:var(--s2);
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);
  border-radius:var(--r-pill);padding-inline:var(--s4);min-width:220px;
  transition:background var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease);
}
.site-header.scrolled .search-box{background:var(--mist);border-color:transparent}
.search-box:focus-within{border-color:var(--cyan)}
.search-box input{
  border:0;background:transparent;font-family:inherit;font-size:var(--t-sm);
  width:100%;color:inherit;padding-block:var(--s3);min-height:44px;
}
.search-box input:focus{outline:none}
.site-header:not(.scrolled).on-hero .search-box input{color:var(--on-dark)}
.site-header:not(.scrolled).on-hero .search-box input::placeholder{color:rgba(255,255,255,.8)}
.search-box button{
  border:0;background:none;cursor:pointer;color:inherit;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-inline-end:calc(var(--s3) * -1);
  border-radius:var(--r-pill);
}
.search-box button:hover{color:var(--cyan)}

.menu-btn{
  display:none;border:0;background:none;cursor:pointer;color:inherit;
  width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-sm);
}

/* ==========================================================================
   Hero — the one dominant element on the homepage
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;color:var(--on-dark);
  padding-block:calc(var(--s9) + var(--s6)) var(--s9);
  background:linear-gradient(155deg,var(--ink) 0%,var(--ink-2) 48%,var(--teal-deep) 100%);
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero::before{
  width:640px;height:640px;top:-180px;inset-inline-end:-140px;
  background:radial-gradient(circle,rgba(62,198,208,.26),transparent 65%);
  animation:blob 9s ease-in-out infinite alternate;
}
.hero::after{
  width:460px;height:460px;bottom:-140px;inset-inline-start:-90px;
  background:radial-gradient(circle,rgba(155,229,234,.14),transparent 60%);
  animation:blob 11s ease-in-out infinite alternate-reverse;
}
@keyframes blob{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,36px,0) scale(1.1)}}

.hero-main{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:center}
.hero h1{font-size:clamp(32px,4.4vw,var(--t-4xl));font-weight:800;line-height:var(--lh-tight)}
.hero h1 .hl{color:var(--light-cyan)}
.hero-copy p{
  margin-top:var(--s5);color:var(--on-dark-muted);
  font-size:var(--t-lg);max-width:52ch;
}
.hero-cta{margin-top:var(--s6);display:flex;gap:var(--s4);flex-wrap:wrap}

.hero-dove{display:flex;justify-content:center;will-change:transform}
.hero-dove svg{
  width:min(420px,80%);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.3));
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-22px,0)}}

.hero-stats{
  position:relative;z-index:2;display:flex;gap:var(--s8);flex-wrap:wrap;
  margin-top:var(--s8);padding-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.16);
}
.stat b{display:block;font-size:var(--t-2xl);line-height:1.2;color:var(--light-cyan)}
.stat span{display:block;font-size:var(--t-sm);color:var(--on-dark-muted)}

/* ==========================================================================
   Sections
   ========================================================================== */
section{padding-block:var(--s9)}
.sec-label{
  font-size:var(--t-sm);font-weight:700;letter-spacing:.5px;
  color:var(--teal-text);margin-bottom:var(--s2);
}
.sec-title{font-size:clamp(var(--t-xl),3vw,var(--t-2xl));font-weight:800;line-height:var(--lh-tight);max-width:20ch}
.sec-lead{color:var(--slate);max-width:62ch;margin-top:var(--s3);margin-bottom:var(--s7)}

/* alternating rhythm so the page breathes */
.band-tint{background:var(--mist)}

/* --- reveal on scroll ----------------------------------------------------- */
.reveal{
  opacity:0;transform:translate3d(0,32px,0);
  transition:opacity var(--dur-enter) var(--ease),transform var(--dur-enter) var(--ease);
}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:60ms}  .reveal.d2{transition-delay:120ms}
.reveal.d3{transition-delay:180ms} .reveal.d4{transition-delay:240ms}
.reveal.d5{transition-delay:300ms} .reveal.d6{transition-delay:360ms}

/* ==========================================================================
   Cards — one elevation, one radius, consistent hover
   ========================================================================== */
/* categories */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s4)}
.cat{
  background:var(--white);border:1px solid var(--mist);border-radius:var(--r-lg);
  box-shadow:var(--e1);padding:var(--s6) var(--s4);text-align:center;
  transition:transform var(--dur-micro) var(--ease),
             box-shadow var(--dur-micro) var(--ease),
             border-color var(--dur-micro) var(--ease);
}
.cat:hover{transform:translate3d(0,-6px,0);box-shadow:var(--e2);border-color:var(--cyan)}
.cat:active{transform:translate3d(0,-2px,0)}
.cat .ico{
  width:var(--s7);height:var(--s7);margin:0 auto var(--s3);
  border-radius:var(--r-md);background:var(--mist);
  display:flex;align-items:center;justify-content:center;color:var(--teal-text);
  transition:background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease);
}
.cat:hover .ico{background:var(--teal);color:var(--white)}
.cat h3{font-size:var(--t-base);font-weight:700}
.cat span{display:block;font-size:var(--t-xs);color:var(--slate);line-height:1.6;margin-top:var(--s1)}

/* ==========================================================================
   Testimonials — dark band, breaks the rhythm
   ========================================================================== */
.testi-sec{background:linear-gradient(150deg,var(--ink),var(--ink-2));color:var(--on-dark)}
.testi-sec .sec-label{color:var(--light-cyan)}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:var(--s5)}
.testi{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-lg);padding:var(--s6);
  display:flex;flex-direction:column;
}
.testi blockquote{font-size:var(--t-base);color:var(--on-dark-muted)}
.testi figcaption{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s3)}
.testi .av{width:var(--s7);height:var(--s7);flex:none;border-radius:50%;display:block}
.testi .av-name{display:block;font-size:var(--t-sm);font-weight:700}
.testi .av-role{display:block;font-size:var(--t-xs);color:var(--light-cyan)}
.testi .prod-tag{
  display:inline-block;align-self:flex-start;margin-top:var(--s4);
  font-size:var(--t-xs);background:rgba(62,198,208,.2);color:var(--light-cyan);
  border-radius:var(--r-pill);padding:var(--s1) var(--s3);
}

/* ==========================================================================
   Products
   ========================================================================== */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:var(--s5)}
.prod{
  background:var(--white);border:1px solid var(--mist);border-radius:var(--r-lg);
  box-shadow:var(--e1);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--dur-micro) var(--ease),
             box-shadow var(--dur-micro) var(--ease),
             border-color var(--dur-micro) var(--ease);
}
.prod:hover{transform:translate3d(0,-6px,0);box-shadow:var(--e2);border-color:var(--cyan)}
.prod:active{transform:translate3d(0,-2px,0)}
.prod .thumb{aspect-ratio:400/260;overflow:hidden;background:var(--ink)}
.prod .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-enter) var(--ease)}
.prod:hover .thumb img{transform:scale(1.05)}
.prod .info{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.prod .info h3{font-size:var(--t-base);font-weight:700}
.prod .info p{font-size:var(--t-sm);color:var(--slate);line-height:1.7;margin-top:var(--s2);flex:1}
.prod .more{
  display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  font-size:var(--t-sm);color:var(--teal-text);font-weight:600;
}
.prod .more svg{transition:transform var(--dur-micro) var(--ease)}
.prod:hover .more svg{transform:translateX(4px)} /* RTL: forward is -X visually */

.g1{background:linear-gradient(140deg,#107E8C,#3EC6D0)}
.g2{background:linear-gradient(140deg,#0B2B33,#107E8C)}
.g3{background:linear-gradient(140deg,#0B6270,#9BE5EA)}
.g4{background:linear-gradient(140deg,#12525C,#3EC6D0)}

.filter-note{
  background:var(--white);border:1px solid var(--mist);border-radius:var(--r-md);
  padding:var(--s3) var(--s5);margin-bottom:var(--s6);font-size:var(--t-sm);
}
.empty-state{
  text-align:center;padding:var(--s9) var(--s5);color:var(--slate);
}
.empty-state h3{font-size:var(--t-lg);color:var(--ink);margin-bottom:var(--s2)}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:var(--s5)}
.post{
  background:var(--white);border:1px solid var(--mist);border-radius:var(--r-lg);
  box-shadow:var(--e1);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--dur-micro) var(--ease),
             box-shadow var(--dur-micro) var(--ease),
             border-color var(--dur-micro) var(--ease);
}
.post:hover{transform:translate3d(0,-6px,0);box-shadow:var(--e2);border-color:var(--cyan)}
.post .ph{aspect-ratio:400/260;overflow:hidden;background:var(--ink)}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-enter) var(--ease)}
.post:hover .ph img{transform:scale(1.05)}
.post .body{padding:var(--s5)}
.post .date{font-size:var(--t-xs);color:var(--teal-text);font-weight:600}
.post h3{font-size:var(--t-base);margin-block:var(--s2)}
.post p{font-size:var(--t-sm);color:var(--slate);line-height:1.7}

/* ==========================================================================
   Customer logos
   ========================================================================== */
.logos-strip{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.logo-chip{
  background:var(--white);border:1px solid var(--mist);border-radius:var(--r-pill);
  padding:var(--s2) var(--s5);font-size:var(--t-sm);font-weight:600;color:var(--slate);
  transition:color var(--dur-micro) var(--ease),
             border-color var(--dur-micro) var(--ease),
             transform var(--dur-micro) var(--ease);
}
.logo-chip:hover{color:var(--teal-text);border-color:var(--cyan);transform:translate3d(0,-3px,0)}

/* ==========================================================================
   Buttons — distinguishable by shape and weight, not colour alone
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s6);border-radius:var(--r-sm);
  font-family:inherit;font-weight:600;font-size:var(--t-base);
  border:2px solid transparent;cursor:pointer;
  transition:transform var(--dur-micro) var(--ease),
             box-shadow var(--dur-micro) var(--ease),
             background var(--dur-micro) var(--ease),
             color var(--dur-micro) var(--ease);
}
.btn:active{transform:translate3d(0,1px,0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

.btn-primary{background:var(--cyan);color:var(--ink)}
.btn-primary:hover{transform:translate3d(0,-3px,0);box-shadow:0 12px 26px rgba(62,198,208,.35)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:var(--on-dark)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-teal{background:var(--teal);color:var(--white)}
.btn-teal:hover{transform:translate3d(0,-3px,0);box-shadow:0 12px 26px rgba(16,126,140,.3)}
.btn-line{border-color:var(--teal);color:var(--teal-text)}
.btn-line:hover{background:var(--mist)}

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-head{
  background:linear-gradient(155deg,var(--ink),var(--ink-2) 55%,var(--teal-deep));
  color:var(--on-dark);padding-block:calc(var(--s9) + var(--s7)) var(--s8);
}
.page-head h1{font-size:clamp(var(--t-xl),3.4vw,var(--t-3xl));font-weight:800;line-height:var(--lh-tight)}
.page-head p{color:var(--on-dark-muted);margin-top:var(--s3);max-width:62ch}
.crumb{display:block;font-size:var(--t-sm);color:var(--light-cyan);margin-bottom:var(--s3)}
.crumb a:hover{text-decoration:underline}

/* product detail */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.pd-visual{
  border-radius:var(--r-lg);aspect-ratio:400/260;box-shadow:var(--e2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--white);background:var(--ink);
}
.pd-visual img{width:100%;height:100%;object-fit:cover}
.pd-visual > svg{width:130px;height:130px}
.pd-body p{color:var(--slate);max-width:62ch}
.pd-body h2{font-size:var(--t-xl);font-weight:800;line-height:var(--lh-tight)}
.pd-body h3{font-size:var(--t-lg);font-weight:700;margin-top:var(--s6)}

.features{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.feat{
  background:var(--white);border:1px solid var(--mist);border-radius:var(--r-md);
  padding:var(--s4);font-size:var(--t-sm);line-height:1.7;
  display:flex;gap:var(--s3);align-items:flex-start;
}
.feat svg{flex:none;color:var(--teal-text);margin-top:var(--s1)}
.pd-cta{margin-top:var(--s7);display:flex;gap:var(--s4);flex-wrap:wrap}

.info-card{
  background:var(--white);border:1px solid var(--mist);border-radius:var(--r-md);
  padding:var(--s5);margin-bottom:var(--s3);font-size:var(--t-sm);
}
.info-card b{display:block;color:var(--teal-text);font-size:var(--t-xs);margin-bottom:var(--s1)}

/* ==========================================================================
   Forms — label above, error below, validate on blur
   ========================================================================== */
.form{display:grid;gap:var(--s5);max-width:560px}
.field{display:grid;gap:var(--s2)}
.field label{font-size:var(--t-sm);font-weight:600}
.field .hint{font-size:var(--t-xs);color:var(--slate)}
.form input,.form textarea{
  font-family:inherit;font-size:var(--t-base);color:var(--ink);
  padding:var(--s3) var(--s4);min-height:48px;
  border:1px solid var(--mist);border-radius:var(--r-sm);background:var(--white);
  transition:border-color var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease);
}
.form textarea{min-height:120px;resize:vertical;line-height:1.8}
.form input:hover,.form textarea:hover{border-color:var(--cyan)}
.form input:focus-visible,.form textarea:focus-visible{
  border-color:var(--cyan);outline:2px solid var(--cyan);outline-offset:1px;
}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:#B3261E}
.field .err{font-size:var(--t-xs);color:#B3261E;min-height:1em}
.form-status{
  border-radius:var(--r-md);padding:var(--s4);font-size:var(--t-sm);
  background:var(--mist);color:var(--teal-text);border:1px solid var(--cyan);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{background:var(--ink);color:var(--on-dark-muted);padding-top:var(--s8)}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:var(--s7);padding-bottom:var(--s7)}
.f-grid h2{color:var(--on-dark);font-size:var(--t-base);margin-bottom:var(--s4)}
.f-grid ul{list-style:none}
.f-grid li{margin-bottom:var(--s2)}
.f-grid a{font-size:var(--t-sm)}
.f-grid a:hover{color:var(--cyan);text-decoration:underline}
.f-grid p{font-size:var(--t-sm)}
.f-about p{margin-top:var(--s4);max-width:44ch}
.f-social{display:flex;gap:var(--s2);margin-top:var(--s4)}
.f-social a{
  width:44px;height:44px;border-radius:var(--r-sm);background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-micro) var(--ease);
}
.f-social a:hover{background:var(--teal)}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-block:var(--s5);
  font-size:var(--t-xs);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);
}

/* ==========================================================================
   Responsive — 375 / 768 / 1440 verified
   ========================================================================== */
@media (max-width:900px){
  section{padding-block:var(--s8)}
  .hero{padding-block:calc(var(--s9) + var(--s5)) var(--s8)}
  .hero-main{grid-template-columns:1fr;text-align:center;gap:var(--s6)}
  .hero-copy p{margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-dove{order:-1}
  .hero-dove svg{width:min(220px,55%)}
  .hero-stats{gap:var(--s6);justify-content:center;text-align:center}
  .sec-title,.sec-lead{max-width:none}

  .site-header .wrap{gap:var(--s3)}
  .nav{
    display:none;position:absolute;top:100%;inset-inline:0;
    background:var(--white);color:var(--ink);
    flex-direction:column;gap:0;
    padding:var(--s3) var(--s5) var(--s5);box-shadow:var(--e2);
  }
  .nav.open{display:flex}
  /* mobile menu is always on white — override the hero's white text */
  .site-header:not(.scrolled).on-hero .nav a{color:var(--ink)}
  .nav a{padding-block:var(--s3);border-bottom:1px solid var(--mist)}
  .nav a::after{display:none}
  .menu-btn{display:flex}
  .search-box{min-width:0;flex:1}
  .brand .b-en{display:none}

  .pd-grid{grid-template-columns:1fr;gap:var(--s6)}
  .features{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
}
@media (max-width:560px){
  .cats{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr}
  .hero-stats{gap:var(--s5)}
  .btn{width:100%}
  .hero-cta,.pd-cta{flex-direction:column}
}

/* ==========================================================================
   Reduced motion — collapse everything animated
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{opacity:1;transform:none}
  .hero-dove{transform:none!important}
}

@media print{
  .site-header,.f-social,.hero::before,.hero::after{display:none}
  body{background:#fff;color:#000}
}