:root{
      --bg:#606470;        /* پس‌زمینه‌ی بادی - طوسی */
      --ink:#F7F7F7;       /* رنگ نوشته‌ها - سفید لایت */
      --nav:#323643;       /* پس‌زمینه‌ی هدر - زغالی */
      --ink-nav:#F7F7F7;   /* نوشته‌های هدر - روشن */
      --accent:#FF570C;    /* نارنجی اصلی */
      --ocean:#385E9D;     /* اگر جایی استفاده می‌کنی بماند */
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --stage-h:360px;
    }

    html.theme-light{ --bg:#EFEFEF; --ink:#0F203C; --nav:#232323; --ink-nav:#EFEFEF; --shadow:0 10px 30px rgba(0,0,0,.15); }

    *{box-sizing:border-box} html,body{height:100%}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Vazirmatn",Tahoma,sans-serif;background:var(--bg);color:var(--ink)}
    a{text-decoration:none;color:inherit}

    /* ====== نوبار ====== */
    header{position:sticky;top:0;z-index:50;background:var(--nav);color:var(--ink-nav);box-shadow:0 6px 20px rgba(0,0,0,.25)}
    .wrap{width:min(1200px,92%);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:12px 0}
    .brand-side{display:flex;align-items:center;gap:.6rem}
    .brand{display:flex;align-items:center;gap:.5rem;color:var(--ink-nav);font-weight:800}
    .brand img{width:28px;height:28px;object-fit:contain}
    .brand b{color:var(--accent)}
    nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.1rem;align-items:center}
    nav a{font-weight:700;color:var(--ink-nav);opacity:.92;padding:.35rem .5rem;border-bottom:2px solid transparent}
    nav a:hover{opacity:1;color:var(--accent);border-color:var(--accent)}

    /* سوئیچر زبان */
    .lang-btns{display:flex;gap:4px;align-items:center}
    .lang-btn{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--ink-nav);border-radius:999px;padding:.28rem .6rem;font-size:.82rem;font-weight:700;cursor:pointer;line-height:1}
    .lang-btn:hover{background:rgba(255,255,255,.18)}
    .lang-btn.lang-active{background:var(--accent);color:#1b1b1b;border-color:var(--accent)}

    /* تم */
    .theme-toggle{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--ink-nav);border-radius:999px;padding:.35rem .7rem;font-size:.95rem;cursor:pointer}
    .theme-toggle:hover{background:var(--accent);color:#232323;border-color:var(--accent)}

    /* همبرگر موبایل */
    .burger{display:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--ink-nav);
            width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;cursor:pointer}
    .burger:hover{background:rgba(255,255,255,.15)}
    .mobile-menu{display:none;position:absolute;inset-inline:0;top:100%;background:#1e1e1e;padding:10px 0;border-top:1px solid rgba(255,255,255,.12)}
    .mobile-menu ul{flex-direction:column;gap:.2rem;padding-inline:12px}
    .mobile-open .mobile-menu{display:block}

    /* ====== کاروسل ====== */
    main{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:10px 0}
    .stage{width:min(1100px,88%);height:var(--stage-h);margin:0 auto;perspective:1400px;position:relative}
    .ring{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
    .card{
      position:absolute;top:50%;left:50%;transform-style:preserve-3d;
      width:min(260px,70vw);aspect-ratio:4/5;border-radius:18px;overflow:hidden;
      border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);
      display:flex;align-items:flex-end;justify-content:center;
      background:linear-gradient(135deg,#223456,#1a2745);color:#fff;
    }
    .label{margin:12px;padding:.45rem .9rem;border-radius:999px;background:rgba(239,239,239,.12);color:var(--accent);font-weight:800;backdrop-filter:blur(4px)}
    .nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:0;background:rgba(255,255,255,.12);
               width:44px;height:44px;border-radius:999px;font-size:20px;cursor:pointer;color:var(--accent);backdrop-filter:blur(4px)}
    .nav-arrow:hover{background:var(--accent);color:#232323}

    .dots{display:flex;gap:6px;justify-content:center;margin-top:20px}
    .dot{width:8px;height:8px;border:0;border-radius:999px;background:#385E9D;opacity:.6}
    .dot.active{background:var(--accent);opacity:1}

    /* ====== ریسپانسیو ====== */
    /* موبایل: همبرگری + کاروسل فشرده (کتابی و نزدیک) */
    @media (max-width:720px){
      :root{ --stage-h:300px; }
      .burger{display:flex}
      nav.desktop{display:none}
      .card{width:min(220px,70vw)}
      .nav-arrow{display:none}
      .dots{margin-top:12px}
    }
    /* تبلت/دسکتاپ: منو کامل و کاروسل بازتر */
    @media (min-width:721px){
      nav.desktop{display:block}
      .mobile-menu{display:none!important}
    }
    @media (min-width:1200px){
      :root{ --stage-h:420px; }         /* قدری بزرگ‌تر روی دسکتاپ‌های بزرگ */
    }
      /* badge روشن پشتِ لوگو (نوبار و فوتر) */
    .logo-badge{
      width:36px;height:36px;border-radius:50%;
      background:#EFEFEF;            /* تم روشن طبق خواسته */
      display:inline-grid; place-items:center;
      box-shadow:0 2px 8px rgba(0,0,0,.15);
    }
    .logo-badge img{width:24px;height:24px;object-fit:contain}

    /* آیکن‌های شبکه اجتماعی در فوتر */
    .footer-socials{margin-top:12px; display:flex; gap:10px; align-items:center}
    .icon-badge{
      width:38px;height:38px;border-radius:50%;
      background:#EFEFEF;            /* پس‌زمینه روشن برای دیده‌شدن لوگو */
      display:inline-grid;place-items:center;
      box-shadow:0 2px 10px rgba(0,0,0,.15);
    }
    .icon-badge svg{width:20px;height:20px;fill:#0F203C} /* آیکن تیره روی زمینه روشن */
    .icon-badge:hover{transform:translateY(-2px); transition:.2s}

     .card {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-style: preserve-3d;
      width: min(260px, 70vw);
      aspect-ratio: 4/5;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: var(--shadow);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      background: #323643;
      color: #fff;
    }

    /* تصویر داخل کارت */
    .card-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      transition: transform 0.3s ease;
    }
    .card:hover .card-img {
      transform: scale(1.05); /* زوم ملایم هنگام هاور */
    }

    /* برچسب روی تصویر */
    .label {
      position: relative;
      z-index: 1;
      margin: 12px;
      padding: .45rem .9rem;
      border-radius: 999px;
      background: #F7F7F7;
      color: var(--accent);
      font-weight: 800;
      backdrop-filter: blur(4px);
    }

    /* ===== Home sections (minimal, non-breaking) ===== */
    .container{width:min(1200px,92%);margin-inline:auto;padding:24px 0}
    .home-sections{display:flex;flex-direction:column;gap:28px}

    .card-box{
      background:rgba(0,0,0,.12);
      border:1px solid rgba(255,255,255,.12);
      border-radius:16px;
      padding:18px;
      box-shadow:0 8px 24px rgba(0,0,0,.15);
    }
    .card-box h2{margin:0 0 .4rem 0;color:var(--ink);font-size:1.25rem}
    .card-box p{margin:.2rem 0 1rem 0;color:var(--ink);opacity:.9}

    /* Buttons */
    .btn-primary{
      background:var(--accent); color:#1b1b1b; font-weight:800;
      padding:.55rem 1rem; border-radius:999px; display:inline-block
    }
    .btn-primary:hover{filter:brightness(1.05)}
    .btn-link{color:var(--accent); font-weight:700}
    .btn-ghost{
      border:1px solid var(--accent); color:var(--accent);
      padding:.55rem 1rem; border-radius:999px; display:inline-block
    }
    .btn-ghost:hover{background:rgba(255,87,12,.08)}

    /* Header row in products */
    .head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
    .thumb-nav{display:flex;gap:6px}
    .thumb-btn{
      width:38px;height:38px;border-radius:10px;border:0;
      background:rgba(255,255,255,.12); color:var(--accent); cursor:pointer
    }
    .thumb-btn:hover{background:rgba(255,255,255,.2)}

    /* Thumbnail slider (square) */
    .thumb-track{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:140px;
      gap:12px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scrollbar-width:thin;
      padding-bottom:6px;
    }
    .thumb{
      display:block; scroll-snap-align:center;
      width:140px; aspect-ratio:1/1; border-radius:12px;
      overflow:hidden; border:1px solid rgba(255,255,255,.12);
      background:#2f323b;
    }
    .thumb img{width:100%;height:100%;object-fit:cover;display:block}

    /* CTA */
    .cta-box{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      background:linear-gradient(135deg, rgba(0,0,0,.12), rgba(0,0,0,.18));
    }
    .cta-actions{display:flex;gap:10px}
    .center{text-align:center;margin-top:10px}

    /* Mobile */
    @media (max-width:720px){
      .card-box{padding:14px}
      .thumb-track{grid-auto-columns:110px}
      .thumb{width:110px}
      .cta-box{flex-direction:column; align-items:flex-start}
    }