@font-face { font-family:"Vazirmatn"; src:url(/assets/fonts/vazirmatn-400.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
    @font-face { font-family:"Vazirmatn"; src:url(/assets/fonts/vazirmatn-500.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
    @font-face { font-family:"Vazirmatn"; src:url(/assets/fonts/vazirmatn-600.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
    @font-face { font-family:"Vazirmatn"; src:url(/assets/fonts/vazirmatn-700.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
    @font-face { font-family:"Vazirmatn"; src:url(/assets/fonts/vazirmatn-800.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }

    :root {
      --ink:#10243e;
      --ink-2:#183653;
      --ink-3:#294b68;
      --orange:#ff7a45;
      --orange-dark:#df5e2f;
      --orange-soft:#fff0e9;
      --cream:#fffaf6;
      --paper:#ffffff;
      --line:#e7edf2;
      --muted:#6f8191;
      --green:#24a17b;
      --shadow:0 18px 50px rgba(16,36,62,.10);
      --shadow-soft:0 10px 28px rgba(16,36,62,.07);
      --radius-lg:30px;
      --radius-md:20px;
      --radius-sm:13px;
    }

    /* Safe responsive reset: no decorative item can enlarge the document width. */
    *, *::before, *::after { box-sizing:border-box; }
    html { scroll-behavior:smooth; overflow-x:hidden; }
    body {
      width:100%;
      min-width:0;
      margin:0;
      overflow-x:hidden;
      color:var(--ink);
      background:var(--cream);
      font-family:"Vazirmatn",Tahoma,sans-serif;
      line-height:1.85;
    }
    body.menu-open { overflow:hidden; }
    h1,h2,h3,p,blockquote { margin-top:0; }
    a { color:inherit; text-decoration:none; }
    button,input,textarea,select { font:inherit; }
    button,a { -webkit-tap-highlight-color:transparent; }
    button { cursor:pointer; }
    img,svg,video,iframe { display:block; max-width:100%; }
    img { height:auto; }
    p,h1,h2,h3,a,span,strong,blockquote { overflow-wrap:anywhere; }
    :focus-visible { outline:3px solid #ffb18f; outline-offset:3px; }

    .site-shell { width:100%; overflow:clip; }
    .page-container {
      width:min(100% - 32px,1200px);
      margin-inline:auto;
      min-width:0;
    }

    .skip-link {
      position:fixed;
      z-index:300;
      top:-100px;
      inset-inline-start:16px;
      padding:10px 16px;
      border-radius:12px;
      color:#fff;
      background:var(--orange-dark);
      font-weight:800;
    }
    .skip-link:focus { top:16px; }

    .site-header {
      position:sticky;
      top:0;
      z-index:100;
      width:100%;
      border-bottom:1px solid rgba(231,237,242,.88);
      background:rgba(255,250,246,.90);
      backdrop-filter:blur(16px);
      transition:box-shadow .25s ease,background .25s ease;
    }
    .site-header.is-scrolled { box-shadow:0 8px 24px rgba(16,36,62,.09); }
    .nav-wrap {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(8px,2vw,24px);
      min-height:78px;
      transition:min-height .25s ease;
    }
    .site-header.is-scrolled .nav-wrap { min-height:64px; }
    .brand {
      display:inline-flex;
      flex:0 1 auto;
      align-items:center;
      gap:10px;
      min-width:0;
      font-weight:800;
      white-space:nowrap;
    }
    .brand-mark {
      display:grid;
      flex:0 0 43px;
      width:43px;
      height:43px;
      place-items:center;
      border-radius:14px 14px 14px 5px;
      color:var(--orange);
      background:var(--ink);
      box-shadow:5px 5px 0 rgba(255,122,69,.18);
    }
    .brand-mark svg { width:25px; height:25px; }
    .brand-copy { min-width:0; }
    .brand small { display:block; color:var(--muted); font-size:.68rem; font-weight:600; line-height:1.3; }
    .brand strong { display:block; font-size:.95rem; line-height:1.4; }

    .nav-menu {
      display:flex;
      flex:1 1 auto;
      align-items:center;
      justify-content:center;
      gap:clamp(14px,2.2vw,30px);
      min-width:0;
      color:var(--ink-3);
      font-size:.86rem;
      font-weight:700;
    }
    .nav-menu a {
      position:relative;
      padding:26px 0;
      white-space:nowrap;
    }
    .nav-menu a::after {
      position:absolute;
      right:0;
      bottom:16px;
      width:0;
      height:2px;
      content:"";
      border-radius:99px;
      background:var(--orange);
      transition:width .25s ease;
    }
    .header-cta,
    .btn-primary {
      color:#fff;
      background:linear-gradient(135deg,var(--orange),#ff9d2e);
      box-shadow:0 10px 22px rgba(255,122,69,.24);
    }
    .header-cta {
      display:inline-flex;
      flex:0 0 auto;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:10px 15px;
      border-radius:12px;
      font-size:.8rem;
      font-weight:800;
      animation:pulse 2.4s infinite;
    }
    .menu-toggle {
      display:none;
      flex:0 0 auto;
      width:44px;
      height:44px;
      padding:8px;
      border:1px solid var(--line);
      border-radius:12px;
      color:var(--ink);
      background:var(--paper);
    }
    .menu-toggle svg { width:24px; height:24px; margin:auto; }
    .menu-toggle svg[hidden] { display:none; }
    .mobile-call { display:none; }

    .hero {
      position:relative;
      isolation:isolate;
      width:100%;
      padding:clamp(48px,7vw,84px) 0 clamp(54px,7vw,84px);
      overflow:hidden;
      background:var(--cream);
    }
    .hero::before,
    .hero::after {
      position:absolute;
      z-index:-1;
      border-radius:50%;
      content:"";
      pointer-events:none;
    }
    .hero::before {
      top:-260px;
      left:-200px;
      width:470px;
      height:470px;
      background:rgba(255,122,69,.12);
    }
    .hero::after {
      right:-170px;
      bottom:-200px;
      width:340px;
      height:340px;
      border:1px solid rgba(16,36,62,.10);
    }
    .hero-grid {
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
      align-items:center;
      gap:clamp(34px,6vw,88px);
    }
    .hero-copy,
    .hero-art,
    .gallery-head > *,
    .testimonial-layout > *,
    .contact-grid > * { min-width:0; }

    .eyebrow {
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--orange-dark);
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.03em;
    }
    .eyebrow::before {
      width:28px;
      height:3px;
      content:"";
      border-radius:99px;
      background:var(--orange);
    }
    .hero-copy h1 {
      max-width:720px;
      margin:14px 0 19px;
      font-size:clamp(2rem,5vw,4.35rem);
      line-height:1.2;
      letter-spacing:-.06em;
    }
    .hero-copy h1 span { color:var(--orange-dark); }
    .lead {
      max-width:645px;
      margin:0 0 26px;
      color:var(--ink-3);
      font-size:clamp(1rem,1.7vw,1.14rem);
    }
    .actions {
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:12px;
    }
    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:50px;
      padding:12px 20px;
      border:1px solid transparent;
      border-radius:13px;
      font-size:.9rem;
      font-weight:800;
      text-align:center;
      transition:transform .25s ease, box-shadow .25s ease,background .25s ease,color .25s ease;
    }
    .btn svg { width:18px; height:18px; flex:0 0 auto; }
    .btn-secondary {
      border-color:var(--line);
      color:var(--ink);
      background:var(--paper);
    }
    .trust-row {
      display:flex;
      flex-wrap:wrap;
      gap:12px 18px;
      margin-top:30px;
    }
    .trust-pill {
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--ink-3);
      font-size:.78rem;
      font-weight:700;
    }
    .trust-pill i {
      display:grid;
      width:25px;
      height:25px;
      place-items:center;
      flex:0 0 auto;
      border-radius:50%;
      color:var(--green);
      background:#e4f7f0;
      font-style:normal;
    }

    .hero-art {
      position:relative;
      display:grid;
      min-height:420px;
      place-items:center;
    }
    .hero-art::before {
      position:absolute;
      width:min(100%,430px);
      aspect-ratio:1;
      content:"";
      border:1px dashed rgba(16,36,62,.18);
      border-radius:50%;
    }
    .hero-card {
      position:relative;
      z-index:1;
      width:min(100%,530px);
      overflow:hidden;
      aspect-ratio:16 / 9;
      border-radius:28px 28px 28px 7px;
      box-shadow:24px 26px 0 rgba(255,122,69,.16),var(--shadow);
      transform:rotate(1deg);
    }
    .hero-card img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
    }
    .floating-note {
      position:absolute;
      z-index:2;
      display:inline-flex;
      align-items:center;
      gap:8px;
      max-width:min(210px,75%);
      padding:10px 13px;
      border:1px solid rgba(255,255,255,.8);
      border-radius:12px;
      color:var(--ink);
      background:rgba(255,255,255,.94);
      box-shadow:var(--shadow-soft);
      font-size:.74rem;
      font-weight:800;
    }
    .floating-note svg { width:18px; height:18px; flex:0 0 auto; color:var(--orange-dark); }
    .note-top { top:25px; right:0; }
    .note-bottom { bottom:16px; left:0; }

    .brands-strip {
      width:100%;
      padding:26px 0;
      color:#fff;
      background:var(--ink);
    }
    .brands-row {
      display:flex;
      align-items:center;
      gap:28px;
      min-width:0;
    }
    .brands-title {
      flex:0 0 auto;
      margin:0;
      color:#d9e4ee;
      font-size:.83rem;
      font-weight:700;
    }
    .brands-list {
      display:flex;
      flex:1 1 auto;
      gap:10px;
      min-width:0;
      overflow-x:auto;
      overscroll-behavior-inline:contain;
      padding:3px 0 7px;
      scrollbar-color:rgba(255,255,255,.35) transparent;
      scrollbar-width:thin;
    }
    .brand-chip {
      display:inline-flex;
      flex:0 0 auto;
      padding:7px 13px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:99px;
      color:#e4edf4;
      background:rgba(255,255,255,.06);
      font-size:.74rem;
      font-weight:600;
      white-space:nowrap;
    }
    .brand-chip.is-special { border-color:rgba(255,122,69,.75); background:rgba(255,122,69,.18); }

    .section { width:100%; padding:clamp(64px,8vw,94px) 0; }
    .section-light { background:var(--paper); }
    .section-dark { color:#fff; background:linear-gradient(135deg,#10243e,#183653); }
    .section-heading { max-width:680px; margin-bottom:34px; }
    .section-heading h2 {
      margin:10px 0 11px;
      font-size:clamp(1.8rem,4vw,2.8rem);
      line-height:1.3;
      letter-spacing:-.04em;
    }
    .section-heading p { margin-bottom:0; color:var(--muted); }
    .section-dark .eyebrow { color:#ffb296; }
    .section-dark .section-heading p { color:#b8c9d7; }

    .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
    .reveal.is-visible { opacity:1; transform:none; }

    .services-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .service-card {
      position:relative;
      min-width:0;
      min-height:0;
      padding:24px;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius-md);
      background:linear-gradient(145deg,#fff,#f9fcfe);
      transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
    }
    .service-card::after {
      position:absolute;
      bottom:-42px;
      left:-35px;
      width:130px;
      height:130px;
      content:"";
      border-radius:50%;
      background:radial-gradient(circle,#ffe0d3,transparent 68%);
    }
    .icon-box {
      position:relative;
      z-index:1;
      display:grid;
      width:47px;
      height:47px;
      place-items:center;
      border-radius:14px;
      color:var(--orange-dark);
      background:var(--orange-soft);
    }
    .icon-box svg { width:24px; height:24px; }
    .service-card h3 { position:relative; z-index:1; margin:18px 0 7px; font-size:1.02rem; }
    .service-card p { position:relative; z-index:1; margin-bottom:0; color:var(--muted); font-size:.82rem; }

    .gallery-head {
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:28px;
    }
    .gallery-head .section-heading { margin-bottom:0; }
    .filter-bar {
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:8px;
    }
    .filter-btn {
      min-height:42px;
      padding:8px 13px;
      border:1px solid var(--line);
      border-radius:99px;
      color:var(--ink-3);
      background:var(--paper);
      font-size:.76rem;
      font-weight:800;
      transition:color .22s ease,background .22s ease,border-color .22s ease;
    }
    .filter-btn[aria-pressed="true"] {
      border-color:var(--ink);
      color:#fff;
      background:var(--ink);
    }
    .products-grid {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }
    .product-card {
      display:flex;
      min-width:0;
      min-height:0;
      flex-direction:column;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius-md);
      background:linear-gradient(145deg,#fff,#f9fcfe);
      box-shadow:0 4px 0 rgba(16,36,62,.02);
      transition:transform .28s ease,box-shadow .28s ease;
    }
    .product-card.is-hidden { display:none; }
    .product-visual {
      display:grid;
      min-height:142px;
      place-items:center;
      padding:20px;
      color:var(--ink);
      background:#f3f7f9;
    }
    .product-visual svg { width:82%; height:100px; }
    .product-body {
      display:flex;
      flex:1 1 auto;
      min-width:0;
      flex-direction:column;
      padding:18px;
    }
    .product-type { color:var(--orange-dark); font-size:.68rem; font-weight:800; }
    .product-body h3 { margin:6px 0 7px; font-size:.98rem; }
    .product-body p { margin:0 0 12px; color:var(--muted); font-size:.77rem; line-height:1.8; }
    .compatibility {
      margin-top:auto;
      padding-top:11px;
      border-top:1px solid var(--line);
      color:var(--ink-3);
      font-size:.7rem;
      line-height:1.75;
    }
    .product-action { margin-top:13px; }
    .product-action .btn { width:100%; min-height:42px; padding:8px 11px; font-size:.76rem; }

    .testimonial-layout {
      display:grid;
      grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
      align-items:center;
      gap:clamp(28px,5vw,50px);
    }
    .rating-summary {
      display:block;
      padding:27px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.07);
    }
    .rating-number { font-size:3.8rem; font-weight:800; line-height:1; }
    .stars { color:#ffb42e; letter-spacing:2px; font-size:1.08rem; }
    .rating-summary p { margin:10px 0 0; color:#b8c9d7; font-size:.82rem; }
    .slider { min-width:0; }
    .slides-window {
      width:100%;
      min-width:0;
      overflow:hidden;
      border-radius:var(--radius-lg);
      touch-action:pan-y;
      box-shadow:var(--shadow);
    }
    .slides-track {
      display:flex;
      width:100%;
      direction:ltr;
      will-change:transform;
      transition:transform .45s cubic-bezier(.22,.61,.36,1);
    }
    .testimonial {
      width:100%;
      min-width:100%;
      padding:clamp(22px,4vw,38px);
      direction:rtl;
      color:var(--ink);
      background:var(--paper);
    }
    .quote-mark { color:var(--orange); font-family:Georgia,serif; font-size:3.3rem; line-height:.8; }
    .testimonial blockquote { margin:11px 0 21px; font-size:clamp(1rem,2vw,1.22rem); font-weight:600; line-height:2; }
    .person {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding-top:16px;
      border-top:1px solid var(--line);
    }
    .person strong { display:block; font-size:.85rem; }
    .person span { color:var(--muted); font-size:.72rem; }
    .slider-controls {
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-top:17px;
    }
    .slider-arrows,.dots { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
    .slider-arrow {
      display:grid;
      width:44px;
      height:44px;
      place-items:center;
      border:1px solid rgba(255,255,255,.25);
      border-radius:11px;
      color:#fff;
      background:transparent;
    }
    .slider-arrow svg { width:18px; height:18px; }
    .dot {
      width:12px;
      height:12px;
      padding:0;
      border:0;
      border-radius:99px;
      background:#52718a;
      transition:width .22s ease,background .22s ease;
    }
    .dot[aria-current="true"] { width:26px; background:var(--orange); }

    .why-grid {
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:12px;
    }
    .why-item {
      min-width:0;
      padding:21px 15px;
      border:1px solid var(--line);
      border-radius:var(--radius-md);
      background:linear-gradient(145deg,#fff,#f9fcfe);
      transition:transform .28s ease,box-shadow .28s ease;
    }
    .number {
      display:inline-grid;
      width:32px;
      height:32px;
      place-items:center;
      border-radius:10px;
      color:var(--orange-dark);
      background:var(--orange-soft);
      font-size:.74rem;
      font-weight:800;
    }
    .why-item h3 { margin:15px 0 7px; font-size:.9rem; line-height:1.55; }
    .why-item p { margin-bottom:0; color:var(--muted); font-size:.73rem; line-height:1.8; }

    .contact-grid {
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
      align-items:center;
      gap:clamp(30px,6vw,55px);
    }
    .contact-copy h2 {
      margin:11px 0 15px;
      color:#fff;
      font-size:clamp(2rem,4vw,3.35rem);
      line-height:1.26;
      letter-spacing:-.05em;
    }
    .contact-copy p { max-width:590px; margin-bottom:0; color:#b8c9d7; }
    .contact-details { display:grid; gap:11px; margin-top:26px; }
    .contact-details a,.hours {
      display:flex;
      align-items:flex-start;
      gap:12px;
      color:#fff;
      font-size:.88rem;
      font-weight:600;
    }
    .contact-details svg { width:20px; height:20px; flex:0 0 auto; margin-top:5px; color:var(--orange); }
    .contact-card {
      min-width:0;
      padding:clamp(20px,4vw,27px);
      border:1px solid rgba(255,255,255,.14);
      border-radius:var(--radius-lg);
      background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
      box-shadow:0 18px 45px rgba(0,0,0,.13);
    }
    .contact-card h3 { margin:0 0 17px; color:#fff; font-size:1rem; }
    .messenger-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .messenger {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-width:0;
      min-height:48px;
      padding:11px 10px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:12px;
      color:#eef6fa;
      background:rgba(255,255,255,.06);
      font-size:.77rem;
      font-weight:700;
      text-align:center;
      transition:transform .22s ease,background .22s ease,border-color .22s ease;
    }
    .messenger svg { width:17px; height:17px; flex:0 0 auto; color:var(--orange); }

    .site-footer {
      width:100%;
      padding:23px 0;
      color:#9fb3c2;
      background:#0b1a2d;
      font-size:.72rem;
    }
    .footer-wrap {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:15px;
    }
    .footer-wrap p { margin:0; }
    .footer-links { display:flex; flex-wrap:wrap; gap:14px; }
    .floating-call {
      position:fixed;
      z-index:90;
      bottom:max(16px,env(safe-area-inset-bottom));
      left:max(16px,env(safe-area-inset-left));
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:50px;
      padding:12px 16px;
      border:3px solid var(--cream);
      border-radius:999px;
      color:#fff;
      background:linear-gradient(135deg,var(--orange),#ff9d2e);
      box-shadow:0 10px 25px rgba(16,36,62,.22);
      font-size:.78rem;
      font-weight:800;
      animation:pulse 2.2s infinite;
    }
    .floating-call svg { width:19px; height:19px; flex:0 0 auto; }

    @keyframes pulse {
      0%,100% { box-shadow:0 0 0 0 rgba(255,122,69,.42),0 10px 25px rgba(16,36,62,.22); }
      50% { box-shadow:0 0 0 10px rgba(255,122,69,0),0 10px 25px rgba(16,36,62,.22); }
    }

    @media (hover:hover) {
      .nav-menu a:hover::after,.nav-menu a:focus-visible::after { width:100%; }
      .header-cta:hover,.btn-primary:hover { transform:translateY(-3px); }
      .btn-secondary:hover { transform:translateY(-3px); border-color:var(--orange); color:var(--orange-dark); }
      .service-card:hover,.product-card:hover,.why-item:hover { transform:translateY(-6px); box-shadow:var(--shadow-soft); }
      .service-card:hover { border-color:rgba(255,122,69,.45); }
      .filter-btn:hover { border-color:var(--orange); color:#fff; background:var(--orange); }
      .slider-arrow:hover { border-color:var(--orange); color:var(--ink); background:var(--orange); }
      .messenger:hover { transform:translateY(-3px); border-color:rgba(255,122,69,.65); background:rgba(255,122,69,.17); }
      .footer-links a:hover { color:#fff; }
    }

    /* Tablet: 576–991px */
    @media (max-width:991px) {
      .nav-wrap { min-height:70px; }
      .site-header.is-scrolled .nav-wrap { min-height:62px; }
      .menu-toggle { display:grid; place-items:center; }
      .header-cta { min-height:40px; padding:9px 11px; font-size:.74rem; }
      .nav-menu {
        position:fixed;
        top:calc(70px + env(safe-area-inset-top));
        right:16px;
        left:16px;
        display:none;
        max-height:calc(100 * min(var(--vh, 1vh), 1vh) - 92px);
        padding:10px;
        overflow-y:auto;
        overscroll-behavior:contain;
        border:1px solid var(--line);
        border-radius:18px;
        background:rgba(255,255,255,.98);
        box-shadow:var(--shadow);
      }
      .site-header.is-scrolled .nav-menu { top:calc(62px + env(safe-area-inset-top)); }
      .nav-menu.is-open {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:2px;
        animation:menuIn .2s ease;
      }
      .nav-menu a { padding:13px 14px; border-radius:10px; }
      .nav-menu a::after { display:none; }
      .mobile-call {
        display:flex;
        justify-content:center;
        margin-top:4px;
        color:#fff !important;
        background:var(--ink);
      }
      .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:28px; }
      .hero-art { min-height:330px; }
      .hero-card { width:min(100%,390px); }
      .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .gallery-head { flex-direction:column; align-items:flex-start; }
      .filter-bar { justify-content:flex-start; }
      .testimonial-layout,.contact-grid { grid-template-columns:1fr; }
      .testimonial-layout { gap:28px; }
      .rating-summary { display:flex; align-items:center; gap:18px; }
      .rating-summary p { margin:0; }
      .footer-wrap { align-items:flex-start; flex-direction:column; }
    }

    /* Mobile: up to 575px */
    @media (max-width:575px) {
      .page-container { width:min(100% - 32px,1200px); }
      .brand small { display:none; }
      .brand strong { font-size:.83rem; }
      .brand-mark { width:39px; height:39px; flex-basis:39px; }
      .header-cta { padding:8px 10px; font-size:.7rem; }
      .header-cta::before { content:"تماس"; }
      .header-cta { font-size:0; }
      .header-cta::before { font-size:.72rem; }
      .hero { padding-top:46px; }
      .hero-grid { grid-template-columns:1fr; }
      .hero-copy { text-align:center; }
      .hero-copy .eyebrow,.actions,.trust-row { justify-content:center; }
      .hero-copy h1,.lead { margin-inline:auto; }
      .hero-copy h1 { font-size:clamp(2rem,10vw,2.7rem); }
      .actions { width:100%; }
      .actions .btn { flex:1 1 100%; width:100%; }
      .trust-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
      .trust-pill { flex-direction:column; gap:5px; text-align:center; font-size:.63rem; line-height:1.45; }
      .hero-art {
        min-height:0;
        gap:10px;
        padding-top:10px;
      }
      .hero-art::before { width:min(88%,310px); }
      .hero-card { width:100%; max-width:390px; }
      .floating-note {
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        max-width:100%;
        justify-self:center;
        font-size:.68rem;
      }
      .note-top { grid-row:2; }
      .note-bottom { grid-row:3; }
      .brands-row { align-items:flex-start; flex-direction:column; gap:12px; }
      .brands-list { width:100%; max-width:100%; }
      .services-grid,.products-grid,.why-grid { grid-template-columns:1fr; }
      .service-card { padding:22px; }
      .product-visual { min-height:126px; }
      .filter-bar { width:100%; }
      .filter-btn { flex:1 0 auto; min-height:44px; }
      .testimonial { padding:24px 20px; }
      .person { align-items:flex-start; flex-direction:column; }
      .slider-controls { justify-content:center; }
      .messenger-grid { grid-template-columns:1fr; }
      .contact-details a,.hours { font-size:.82rem; }
      .floating-call {
        width:52px;
        height:52px;
        min-height:52px;
        padding:0;
        border-radius:50%;
        font-size:0;
      }
      .floating-call svg { width:21px; height:21px; }
    }

    @keyframes menuIn {
      from { opacity:0; transform:translateY(-8px); }
      to { opacity:1; transform:translateY(0); }
    }

    @media (prefers-reduced-motion:reduce) {
      html { scroll-behavior:auto; }
      *,*::before,*::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
      }
      .reveal { opacity:1; transform:none; }
    }
  
/* Project-specific form and accessibility states */
.skip-link{position:fixed;top:-100px;right:16px;z-index:400;padding:10px 16px;border-radius:12px;color:#fff;background:var(--orange-dark);font-weight:800}.skip-link:focus{top:16px}
.lead-form{display:grid;gap:13px}.lead-form label{display:grid;gap:6px;font-weight:700;font-size:.88rem}.lead-form input,.lead-form textarea,.lead-form select{width:100%;min-height:46px;padding:10px 12px;border:1px solid rgba(255,255,255,.24);border-radius:11px;color:#fff;background:rgba(255,255,255,.09)}.lead-form input::placeholder,.lead-form textarea::placeholder{color:#d4dde6}.lead-form select option{color:#10243e}.lead-form button{border:0}.form-help{margin:0;color:#d4dde6;font-size:.78rem}.form-notice{padding:10px 12px;border-radius:10px;background:rgba(36,161,123,.2)}.form-errors{padding:8px 14px;border-radius:10px;background:rgba(255,122,69,.17)}.form-errors ul{margin:0;padding-inline-start:20px}.honeypot{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.product-card[hidden]{display:none!important}

.testimonial[hidden]{display:none!important}

.article{max-width:900px;margin:clamp(40px,7vw,90px) auto;padding:0 20px}.article-cover{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:20px;margin:26px 0}.article .rich-content{margin-top:28px}.rich-content h2{margin-top:2em}.product-detail{min-height:55vh}