:root{
    --bg:#ffffff; --paper:#ffffff; --text:#0f172a; --muted:#64748b;
    --brand:#f59e0b; --brand-700:#d97706; --brand-100:#fff7ed;
    --border:#e5e7eb; --shadow:0 12px 30px rgba(2,6,23,.10);
    --glass:rgba(255,255,255,.7);
    --radius:18px;
  }
  /* فقط مرورگرهای Webkit: Chrome, Edge, Safari */
    ::-webkit-scrollbar {
    width: 12px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    background: #f0f0f0; /* پس‌زمینه‌ی کل scrollbar */
    border-radius: 10px;
    }

    /* Thumb (قسمت قابل کشیدن) */
    ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f59e0b, #ffb347); /* گرادیان نارنجی */
    border-radius: 10px;
    border: 3px solid #f0f0f0;
    transition: background 0.3s;
    }

    /* Hover روی thumb */
    ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffb347, #ffc87c);
    }

    /* Firefox */
    html {
    scrollbar-width: thin;
    scrollbar-color: #f59e0b #f0f0f0;
    }

  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
  img{max-width:100%;display:block}
  a{text-decoration:none;color:inherit}
  .container{width:min(1200px,92vw);margin-inline:auto}
  /* Scroll progress */
  .progress{position:fixed;inset:0 0 auto; height:3px;background:linear-gradient(90deg,var(--brand),#ffb703);transform-origin:left;transform:scaleX(0);z-index:1000}
  /* Preloader */
  #pre{position:fixed;inset:0;display:grid;place-items:center;background:#fff;z-index:1001}
  .spin{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--brand),#ffb703);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow);animation:bump .8s ease-in-out infinite alternate}
  @keyframes bump{to{transform:translateY(-6px)}}
  /* Topbar */
  .top{background:var(--brand-100);color:#92400e;font-size:.9rem}
  .top .container{display:flex;justify-content:space-between;align-items:center;padding:.45rem }
  .pill{display:inline-flex;white-space: nowrap;gap:8px;align-items:center;padding:.22rem .6rem;border:1px solid #fed7aa;border-radius:999px;background:#fff}
  /* Header */
  header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.75);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border)}
  .nav{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800}
  .badge{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#ffb703);color:#fff;box-shadow:var(--shadow)}
  .navlinks{display:flex;gap:26px;align-items:center}
  .navlinks a{font-weight:600;color:#1f2937;position:relative}
  .navlinks a:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--brand);transition:.25s}
  .navlinks a:hover:after{width:100%}
  .cta{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:.65rem 1rem;border-radius:12px;font-weight:700;box-shadow:var(--shadow)}
  .cta:hover{background:var(--brand-700)}
  .burger{display:none;border:1px solid var(--border);padding:.45rem .6rem;border-radius:10px;background:#fff}
  /* Hero */
  .hero{position:relative;isolation:isolate;overflow:hidden}
  .noise{position:absolute;inset:-20%;background-image:url('https://images.unsplash.com/photo-1542751371-adc38448a05e?q=50&w=800&auto=format&fit=crop');opacity:.07;filter:grayscale(1);mix-blend:multiply;pointer-events:none}
  .gridbg{position:absolute;inset:0;background-image:radial-gradient(#f1f5f9 1px,transparent 1px);background-size:18px 18px;opacity:.6;pointer-events:none}
  .blob{position:absolute;width:680px;height:680px;right:-220px;top:-120px;background:radial-gradient(closest-side,#ffedd5,transparent);filter:blur(30px);opacity:.8;pointer-events:none}
  .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:64px 0 56px}
  .tag{display:inline-flex;gap:8px;align-items:center;padding:.3rem .6rem;border:1px solid var(--border);border-radius:999px;background:#fff}
  .title{font-size:clamp(34px,4.5vw,54px);line-height:1.1;font-weight:800;margin:14px 0}
  .subtitle{color:var(--muted);max-width:62ch}
  .hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
  .btn{display:inline-flex;gap:10px;align-items:center;border-radius:12px;padding:.85rem 1.1rem;font-weight:700;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow)}
  .btn.brand{background:var(--brand);border-color:transparent;color:#fff}
  .btn.brand:hover{background:var(--brand-700)}
  .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
  .metric{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(8px);border-radius:16px;padding:16px;text-align:center;box-shadow:var(--shadow)}
  .metric .num{font-size:28px;font-weight:800}
  .hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;perspective:1000px}
  .mini{border:1px solid var(--border);border-radius:16px;padding:14px;background:#fff;box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .2s}
  .mini i{color:var(--brand)}
  .hero-img{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);transform:translateZ(0)}
  .hero-img img{height:100%;object-fit:contain}
  .hero-img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.15))}
  /* Marquee */
  .marquee{display:flex;gap:48px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
  .marquee .row{display:flex;gap:48px;align-items:center;animation:scroll 22s linear infinite;padding: .5rem;}
  .marquee i{font-size:22px;color:#f59e0b}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  /* Section base */
  section{padding:72px 0}
  .head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
  .head h2{font-size:clamp(22px,3vw,32px);font-weight:800}
  .muted{color:var(--muted)}
  /* Services */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .2s}
  .thumb{height:180px;overflow:hidden;background:#f8fafc}
  .thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:.6s}
  .card:hover .thumb img{transform:scale(1.12)}
  .body{padding:16px}
  .kicker{display:inline-flex;gap:8px;align-items:center;font-size:.82rem;color:#92400e;background:var(--brand-100);padding:.25rem .55rem;border-radius:999px;border:1px solid #fed7aa}
  .body h3{margin:.5rem 0 6px}
  /* highlights + Filter */
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .chip{border:1px solid var(--border);padding:.4rem .7rem;border-radius:999px;background:#fff;cursor:pointer}
  .chip.active,.chip:hover{background:var(--brand);border-color:transparent;color:#fff}
  /* Timeline */
  .timeline{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px}
  .step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;position:relative}
  .step:before{content:attr(data-step);position:absolute;top:-12px;left:12px;background:var(--brand);color:#fff;font-weight:800;font-size:.8rem;padding:.15rem .45rem;border-radius:8px}
  /* Testimonials slider */
  .slider{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
  .track{display:flex;transition:transform .6s ease}
  .slide{min-width:100%;padding:22px;background:#fff}
  .dots{display:flex;gap:8px;justify-content:center;margin-top:10px;margin-bottom: 10px;}
  .dot{width:15px;height:15px;border-radius:50%;background:#e2e8f0;border-color: #00000000;}
  .dot.active{background:var(--brand)}
  /* FAQ */
  .accordion{border:1px solid var(--border);border-radius:16px;overflow:hidden}
  .acc-item{border-bottom:1px solid var(--border)}
  .acc-btn{width:100%;text-align:left;padding:16px 18px;background:#fff;border:0;font-weight:700;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
  .acc-panel{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 18px}
  .acc-panel p{color:var(--muted);margin:12px 0 18px}
  /* CTA band */
  .cta-band{background:linear-gradient(135deg,#fff7ed,#ffffff);border:1px solid var(--border);border-radius:18px;padding:26px;display:flex;justify-content:space-between;align-items:center;gap:16px;box-shadow:var(--shadow)}
  /* Contact */
  form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .field{position:relative}
  .field input,.field textarea,.field select{width:100%;padding:1.05rem .9rem;border:1px solid var(--border);border-radius:12px;background:#fff;outline:none}
  .field textarea{min-height:120px;resize:vertical;grid-column:1/-1}
  .field label{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:#fff;padding:0 .3rem;color:#94a3b8;pointer-events:none;transition:.2s}
  .field input:focus+label,.field input:not(:placeholder-shown)+label,
  .field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:-8px;font-size:.75rem;color:#f59e0b}
  .submit{grid-column:1/-1;justify-content:center;cursor: pointer;}
  input:focus,textarea:focus,select:focus{border-color:#fbbf24;box-shadow:0 0 0 4px rgba(245,158,11,.15)}
  /* Footer */
  footer{background:#0f172a;color:#e2e8f0}
  footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
  footer a{color:#e2e8f0}
  footer .brand{display:flex;align-items:center;gap:10px;font-weight:800}
  .tiny{font-size:.88rem;color:#94a3b8}
  /* Reveal anim */
  [data-animate]{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
  [data-animate].in{opacity:1;transform:none}
  /* Back-to-top ring */
  .totop{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);cursor:pointer}
  .ring{position:absolute;inset:0;border-radius:50%;background:
    conic-gradient(var(--brand) calc(var(--p,0)*1%),#e5e7eb 0)}
  .totop i{position:relative}
  /* Responsive */
  
  .card-actions {
  
  margin-top: 12px;
  display: flex;
  justify-content: space-between; /* فاصله منظم بین قیمت و دکمه */
  align-items: center;
  flex-direction: row-reverse;
  gap: 12px;
}

.card-actions .price {
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px; /* فاصله بین آیکون و متن */
}

.card-actions .price i {
  color: #059669;
  font-size: 1rem;
}
/* --- About & FAQ --- */
#about {
  padding: 4rem 2rem;
  background: #fff;
}

#about .container {
  max-width: 1200px;
  margin: 0 auto;
}

#about .head {
  text-align: center;
  margin-bottom: 2.5rem;
}

#about .head h2 {
  font-size: 2rem;
  font-weight: bold;
  color: var(--brand);
}

#about .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* About text */
#about .about-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* FAQ */
#about .faq {
  border-radius: 1rem;
  padding: 1.5rem;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

#about .faq-item {
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
}

#about .faq-item:last-child {
  border-bottom: none;
}

#about .faq-item h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-700);
  margin-bottom: 0.5rem;
}

#about .faq-item p {
  font-size: 0.95rem;
  color: #555;
}

/* Contact Section */
#contact {
  padding: 4rem 2rem;
  background: #fff;
}

#contact .container {
  max-width: 800px;
  margin: 0 auto;
}

#contact .head {
  text-align: center;
  margin-bottom: 2rem;
}

#contact .head h2 {
  font-size: 2rem;
  font-weight: bold;
  color: var(--brand);
}

#contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#contact .field textarea {
  grid-column: 1 / -1;
}

#contact .submit {
  grid-column: 1 / -1;
  justify-content: center;
  cursor: pointer;
}
/* FAQ Accordion */
.faq {
  background: var(--bg); /* هم‌رنگ سایت */
  border-radius: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 1rem;
}

.faq-item.active .faq-answer {
  max-height: 500px; /* فضای کافی */
  padding: 0.8rem 1rem;
}

.faq-item.active .faq-question span {
  transform: rotate(45deg); /* + تبدیل به × */
}

/* Contact textarea full width */
#contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#contact .field.full {
  grid-column: 1 / -1; /* کل عرض */
}

#contact textarea {
  min-height: 160px;
}
/* ========= Responsive Upgrade ========= */

/* لپ‌تاپ و تبلت متوسط */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero-img { order: -1; margin-bottom: 24px;object-fit: contain; }
}

/* موبایل بزرگ */
@media (max-width: 768px) {
  .navlinks { display: none; }
  .burger { display: inline-flex; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  footer .cols { grid-template-columns: 1fr 1fr; }
  .hero .title { font-size: 1.8rem; }
  .hero .subtitle { font-size: 0.95rem; }
  .marquee { gap: 24px; }
  .top .container {
    flex-wrap: wrap;       /* اجازه میده آیتم‌ها به خط بعدی برن */
    gap: 8px;              /* فاصله مناسب بین آیتم‌ها */
    justify-content: center; /* وسط چین کردن آیتم‌ها */
  }
  #about {
    grid-template-columns: 1fr; /* ستون تکی */
  }
}

/* موبایل کوچیک */
@media (max-width: 480px) {
  .goto
  .hero .wrap { padding: 40px 0; }
  .hero .title { font-size: 1.6rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .metrics { grid-template-columns: 1fr; gap: 12px; }
  .hero-cards { grid-template-columns: 1fr; }
  .filters { flex-wrap: wrap; gap: 6px; }
  .chip { font-size: 0.85rem; padding: 0.35rem 0.65rem; }
  .card-actions { flex-direction: column; align-items: stretch; }
  footer .cols { grid-template-columns: 1fr; text-align: center; }
  .totop { right: 12px; bottom: 12px; width: 44px; height: 44px; }
}

/* موبایل خیلی کوچیک (۳۲۰px به پایین) */
@media (max-width: 360px) {
  .title { font-size: 1.4rem; }
  .subtitle { font-size: 0.85rem; }
  .btn, .cta { font-size: 0.85rem; padding: 0.6rem 0.9rem; }
  .pill { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
}

.competition-card {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #ffffff00;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  padding: 22px;
  align-items: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.competition-card:hover {
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.15);
}

.competition-card img {
  border-radius: 14px;
  object-fit: cover;
  width: 100%;
  max-height: 260px;
}

.competition-content h1 {
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text);
}

.competition-content p {
  margin: 6px 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.competition-content strong {
  color: var(--text);
}

.competition-content .btn {
  margin-top: 12px;
  display: inline-flex;
  justify-content: center;
}

.competition-content .btn + .btn {
  margin-left: 10px;
}

/* Call-to-action area */
.competition-content a.btn {
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
}

.competition-content a.btn.magnet {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
}

.competition-content a.btn.magnet:hover {
  background: var(--brand-100);
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .competition-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .competition-card img {
    max-height: 300px;
    margin-inline: auto;
  }

  .competition-content .btn + .btn {
    margin-left: 0;
    margin-top: 10px;
  }
}

.card:hover .comp_img {
  transform: translateX(-5%) translateY(-5%) scale(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.dates .kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #fed7aa;
  background: var(--brand-100);
  color: #92400e;
}

.dates .end {
  border-color: #fecaca;
  background: #fee2e2;
  color: #991b1b;
}
.card .thumb {
  position: relative;
  width: 100%;
  padding-top: 100%; /* مربع میشه */
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .thumb img.comp_img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 75%;
  object-fit: cover;
  border-radius: 50%; /* دایره‌ای شه */
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  border: 5px solid #fff;
  transition: transform .4s ease, box-shadow .4s ease;
}

/* افکت هاور */
.card:hover .thumb img.comp_img {
  transform: translate(-50%, -50%) scale(1.08) rotate(-2deg);
  box-shadow: 0 15px 40px rgba(0,0,0,.25);
}
.card .body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card .body > :last-child {
  margin-top: auto;
  align-self: flex-start;
  width: auto;
}
.card .body > :first-child {
  align-self: flex-start;
  width: auto;
}