/* =========================
   Ruforang Shared Styles
   (index/services/about/contact/washing)
========================== */
:root{
  --bg1:#D2B48C;
  --bg2:#C19A6B;

  --brand:#8B4513;
  --brand2:#A0522D;
  --brandDark:#5D2E0A;

  --gold:#FFD700;

  --text:#333;
  --muted:#555;

  --card:rgba(255,255,255,0.92);
  --stroke:rgba(0,0,0,0.06);
  --shadow:0 18px 45px rgba(0,0,0,0.14);
  --shadow2:0 24px 60px rgba(0,0,0,0.18);

  --r16:16px;
  --r18:18px;
  --r22:22px;
  --r24:24px;

  --padX:40px;
  --max:1300px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Vazirmatn', sans-serif;
  color:var(--text);
  line-height:1.9;
  overflow-x:hidden;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
  position:relative;
}

body::before, body::after{
  content:"";
  position:fixed;
  inset:-30%;
  z-index:-2;
  pointer-events:none;
  filter:blur(45px);
  opacity:.7;
  animation:bgDrift 18s ease-in-out infinite alternate;
  transform:translateZ(0);
}
body::before{
  background:
    radial-gradient(circle at 20% 25%, rgba(255,215,0,0.18), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(37,211,102,0.12), transparent 55%),
    radial-gradient(circle at 85% 20%, rgba(18,140,126,0.10), transparent 55%);
}
body::after{
  background:
    radial-gradient(circle at 35% 80%, rgba(255,255,255,0.14), transparent 55%),
    radial-gradient(circle at 10% 60%, rgba(139,69,19,0.10), transparent 55%);
  animation-duration:22s;
  opacity:.6;
}
@keyframes bgDrift{
  from{ transform: translate(-1.5%,-1.2%) scale(1); }
  to{ transform: translate(1.5%,1.2%) scale(1.03); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  body::before, body::after{ animation:none !important; }
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--padX);
}

/* =========================
   Header (Topbar + Mainbar)
========================== */
header{
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid rgba(255,215,0,0.22);
  animation: headerIn 650ms ease-out both;
}
@keyframes headerIn{
  from{ transform:translateY(-18px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.topbar{
  background: rgba(74,39,0,0.88);
  backdrop-filter: blur(10px);
  padding: 10px var(--padX);
  color: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.topbar-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.topbar-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight:900;
  font-size:13px;
}
.topbar-note svg{ width:16px; height:16px; opacity:.95; }

.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.topbar-tel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,215,0,0.14);
  border: 1px solid rgba(255,215,0,0.22);
  color: var(--gold);
  text-decoration:none;
  font-weight:900;
  direction:ltr;
  letter-spacing:.3px;
  transition: transform .2s ease, filter .2s ease;
}
.topbar-tel:hover{ transform: translateY(-2px); filter: brightness(.97); }
.topbar-tel svg{ width:16px; height:16px; }

.topbar-actions{ display:inline-flex; gap:10px; flex-wrap:wrap; }
.mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  color:#fff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mini-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.14);
}
.mini-btn svg{ width:16px; height:16px; }
.mini-btn.whatsapp{ border-color: rgba(37,211,102,0.35); }
.mini-btn.telegram{ border-color: rgba(0,136,204,0.35); }

.mainbar{
  background: rgba(139,69,19,0.92);
  backdrop-filter: blur(10px);
  padding: 14px var(--padX);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.mainbar.scrolled{ box-shadow: 0 14px 38px rgba(0,0,0,0.24); }
.mainbar-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
  min-width:240px;
}
.brand-badge{
  width:54px; height:54px;
  border-radius:14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,215,0,0.25);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
}
.brand-badge img{ width:44px; height:44px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; gap:2px; line-height:1.2; }
.brand-text strong{ font-size:18px; font-weight:900; color:var(--gold); }
.brand-text span{ font-size:12.5px; font-weight:700; opacity:.92; color: rgba(255,255,255,0.92); }

nav ul{
  display:flex;
  list-style:none;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
nav a{
  color: rgba(255,255,255,0.95);
  text-decoration:none;
  font-weight:800;
  font-size:15px;
  padding:10px 2px;
  position:relative;
  opacity:.96;
  transition: transform .2s ease, opacity .2s ease;
}
nav a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:6px;
  width:0;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--gold), rgba(255,215,0,0.18));
  transition: width .35s ease;
}
nav a:hover{ transform: translateY(-1px); opacity:1; }
nav a:hover::after{ width:100%; }

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,215,0,0.18);
  border: 1px solid rgba(255,215,0,0.25);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  color: var(--gold);
}
.nav-cta svg{ width:16px; height:16px; }
.nav-cta:hover{ background: rgba(255,215,0,0.22); }

/* =========================
   Utilities / Buttons
========================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  user-select:none;
}
.btn svg{ width:18px; height:18px; }
.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  box-shadow: 0 16px 38px rgba(139,69,19,0.22);
  border-color: rgba(255,255,255,0.18);
  position:relative;
  overflow:hidden;
}
.btn.primary::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-120%);
  transition: transform .65s ease;
  pointer-events:none;
}
.btn.primary:hover::before{ transform: translateX(120%); }
.btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(139,69,19,0.28);
  filter:saturate(1.05);
}
.btn.ghost{
  background: rgba(255,255,255,0.65);
  color: var(--brandDark);
  border-color: rgba(139,69,19,0.14);
}
.btn.ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.78);
}

/* =========================
   Reveal
========================== */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.inview{ opacity:1; transform: translateY(0); }
.reveal[data-anim="right"]{ transform: translateX(-16px); }
.reveal[data-anim="left"]{ transform: translateX(16px); }
.reveal[data-anim="zoom"]{ transform: scale(.985); }
.reveal.inview[data-anim="right"],
.reveal.inview[data-anim="left"]{ transform: translateX(0); }
.reveal.inview[data-anim="zoom"]{ transform: scale(1); }

/* =========================
   Page Hero + Cards
========================== */
.page-hero{ margin-top: 40px; }
.page-hero-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r24);
  padding: 26px 24px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.page-hero-card::before{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(circle at 20% 15%, rgba(255,215,0,0.14), transparent 55%);
  opacity: .8;
  pointer-events:none;
  animation: glowPulse 4.2s ease-in-out infinite alternate;
}
@keyframes glowPulse{ from{ opacity:.5; } to{ opacity:1; } }
.page-hero-inner{ position: relative; }
.page-hero h1{
  font-size: 30px;
  font-weight: 950;
  color: var(--brandDark);
  margin-bottom: 8px;
}
.page-hero p{
  font-size: 16px;
  opacity: .95;
  max-width: 900px;
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r18);
  padding: 22px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.card h2{
  font-size: 18px;
  font-weight: 950;
  color: #7a2d00;
  margin-bottom: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.card h2 svg{ width: 18px; height: 18px; }
.muted{ color:var(--muted); opacity:.95; font-size: 14.5px; }

/* =========================
   Index Hero / Sections
========================== */
.hero{ margin-top: 34px; }
.hero-wrap{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: stretch;
  padding-top: 10px;
}
.hero-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r24);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height: 360px;
  transform: translateZ(0);
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(circle at 20% 15%, rgba(255,215,0,0.14), transparent 55%);
  opacity:.85;
  pointer-events:none;
  animation: glowPulse 4.2s ease-in-out infinite alternate;
}
.hero-content{ position:relative; padding: 28px 24px; }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 12px; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(139,69,19,0.10);
  border: 1px solid rgba(139,69,19,0.16);
  font-weight:900;
  font-size:13px;
  color: var(--brandDark);
}
.badge svg{ width:16px; height:16px; opacity:.9; }
.hero-title{
  font-size: 34px;
  font-weight: 950;
  color: var(--brandDark);
  line-height: 1.5;
  margin-bottom: 10px;
}
.hero-sub{
  font-size: 16px;
  color: var(--muted);
  opacity: .96;
  max-width: 720px;
}

/* اضافه شد: خط زیبا زیر تیتر */
.hero-types{
  margin-top: 10px;
  font-size: 15px;
  font-weight: 950;
  color: var(--brandDark);
  opacity: .92;
  letter-spacing: .2px;
}

.hero-actions{ margin-top: 18px; display:flex; gap: 12px; flex-wrap:wrap; align-items:center; }

.hero-media{
  position:relative;
  border-radius: var(--r24);
  overflow:hidden;
  box-shadow: var(--shadow2);
  min-height: 360px;
  transform: translateZ(0);
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.03);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .45s ease;
  will-change: transform;
}
.hero-media:hover img{ transform: scale(1.10); filter: contrast(1.03) saturate(1.03); }
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,215,0,0.24), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.10), transparent);
  pointer-events:none;
}
.hero-stats{
  position:absolute;
  right: 14px;
  left: 14px;
  bottom: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  z-index:2;
}
.stat{
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.26);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 10px 10px;
  color:#fff;
  text-align:center;
  box-shadow: 0 16px 38px rgba(0,0,0,0.18);
}
.stat b{ display:block; font-weight: 950; font-size: 16px; line-height: 1.2; }
.stat span{ display:block; font-size: 12.5px; opacity: .95; margin-top: 3px; }

.section{ margin-top: 72px; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.section-title{ font-size: 30px; font-weight: 950; color: var(--brandDark); }
.section-desc{ font-size: 15.5px; color: var(--muted); opacity:.95; max-width: 720px; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 18px;
}
.feature-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r18);
  padding: 18px 16px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.12);
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  transform: translateZ(0);
}
.feature-card::before{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(circle at 20% 15%, rgba(255,215,0,0.12), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.feature-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.16);
  filter:saturate(1.02);
}
.feature-card:hover::before{ opacity: 1; }
.feature-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,215,0,0.14);
  border: 1px solid rgba(255,215,0,0.20);
  box-shadow: 0 12px 22px rgba(0,0,0,0.08);
  flex: 0 0 auto;
}
.ico svg{ width: 24px; height: 24px; }
.feature-card h3{ font-size: 16.5px; font-weight: 950; color:#7a2d00; margin-bottom: 4px; }
.feature-card p{ font-size: 14.5px; color: var(--muted); opacity: .96; line-height: 1.9; }

/* Direct contact */
.direct{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  align-items: stretch;
}
.direct-box{
  border-radius: var(--r24);
  overflow:hidden;
  box-shadow: var(--shadow2);
  position:relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.22), transparent 55%),
    linear-gradient(135deg, #1fd96a 0%, #0bbf8a 40%, #0a7cc7 100%);
  color:#fff;
  padding: 26px 22px;
  transform: translateZ(0);
}
.direct-box::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:140%;
  height:140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: rotate(20deg);
  animation: shine 6s ease-in-out infinite;
  pointer-events:none;
  opacity:.9;
}
@keyframes shine{
  0%,55%{ transform: translateX(-25%) rotate(20deg); opacity:0; }
  70%{ opacity:1; }
  100%{ transform: translateX(55%) rotate(20deg); opacity:0; }
}
.direct-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  font-weight: 950;
  font-size: 14px;
  margin-bottom: 12px;
  position:relative;
  z-index:1;
}
.direct-badge svg{ width:18px; height:18px; opacity:.98; }
.direct-box h3{
  font-size: 24px;
  font-weight: 950;
  margin-bottom: 8px;
  text-shadow: 0 10px 22px rgba(0,0,0,0.24);
  position:relative;
  z-index:1;
}
.direct-box p{
  font-size: 15.5px;
  opacity:.96;
  line-height: 1.9;
  max-width: 620px;
  position:relative;
  z-index:1;
}
.direct-actions{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position:relative;
  z-index:1;
}
.direct-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 14px;
  border-radius: 18px;
  text-decoration:none;
  font-weight: 950;
  color:#fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  overflow:hidden;
  position:relative;
  user-select:none;
}
.direct-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.18), transparent 55%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.direct-btn:hover::before{ opacity:1; }
.direct-btn svg{ width:20px; height:20px; }
.direct-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.22);
  filter:saturate(1.05);
}

.direct-side{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r24);
  box-shadow: var(--shadow);
  padding: 22px 18px;
  overflow:hidden;
  position:relative;
  transform: translateZ(0);
}
.direct-side::before{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(circle at 20% 15%, rgba(255,215,0,0.12), transparent 55%);
  opacity:.85;
  pointer-events:none;
  animation: glowPulse 4.2s ease-in-out infinite alternate;
}
.direct-side .inner{ position:relative; }
.direct-side h4{ font-size: 18px; font-weight: 950; color: var(--brandDark); margin-bottom: 8px; }
.checklist{
  list-style:none;
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.checklist li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 14.5px;
  color: var(--muted);
  opacity:.96;
  line-height:1.9;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.checklist li:hover{ transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0,0,0,0.08); }
.tick{
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(37,211,102,0.14);
  border: 1px solid rgba(37,211,102,0.22);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  margin-top: 2px;
}
.tick svg{ width: 14px; height: 14px; }

/* Samples gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  perspective: 1100px;
  margin-top: 18px;
}
.gallery-card{
  position:relative;
  border-radius: var(--r18);
  overflow:hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease, filter .55s ease;
  transform: translateZ(0);
}
.gallery-card img{
  width:100%;
  height: 260px;
  object-fit:cover;
  transform: scale(1.06);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  will-change: transform;
}
.gallery-card::before{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(circle at 20% 10%, rgba(255,215,0,0.25), transparent 55%);
  opacity:0;
  transition: opacity .6s ease;
  pointer-events:none;
}
.gallery-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--r18);
  padding:1px;
  background: linear-gradient(135deg, rgba(255,215,0,0.45), rgba(255,255,255,0.0), rgba(255,215,0,0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
  transition: opacity .6s ease;
}
.gallery-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 14px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.68), rgba(0,0,0,0.10), transparent);
  color:#fff;
  font-weight: 950;
  font-size: 15px;
  transform: translateY(18px);
  opacity:0;
  transition: transform .6s ease, opacity .6s ease;
  text-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.gallery-card:hover{
  transform: translateY(-10px) rotateX(6deg) rotateY(-6deg) scale(1.02);
  box-shadow: 0 26px 55px rgba(0,0,0,0.28);
  filter:saturate(1.03);
}
.gallery-card:hover img{ transform: scale(1.14); filter: contrast(1.03); }
.gallery-card:hover::before{ opacity:1; }
.gallery-card:hover::after{ opacity:.95; }
.gallery-card:hover .gallery-caption{ transform: translateY(0); opacity:1; }

/* FAQ */
.faq-wrap{
  max-width: 1000px;
  margin: 18px auto 0;
  background: rgba(255,255,255,0.97);
  border-radius: var(--r24);
  padding: 34px 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.05);
  backdrop-filter: blur(10px);
}
.faq-item{
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
  background:#fdfdfd;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.faq-item:hover{ box-shadow: 0 10px 28px rgba(139,69,19,0.12); transform: translateY(-2px); }
.faq-q{
  padding: 20px 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
  gap: 10px;
}
.faq-q h3{ font-size: 16.5px; font-weight: 950; color:#4a2700; margin:0; line-height:1.6; }
.faq-toggle{ color: var(--brand); transition: transform .4s cubic-bezier(.68,-.55,.27,1.55); flex: 0 0 auto; }
.faq-toggle svg{ width:24px; height:24px; stroke: var(--brand); }
.faq-item.active .faq-toggle{ transform: rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .65s cubic-bezier(.2,.8,.2,1); }
.faq-a-inner{
  padding: 0 20px 18px;
  opacity:0;
  transform: translateY(-8px);
  transition: opacity .45s ease .08s, transform .45s ease .08s;
}
.faq-item.active .faq-a{ max-height: 520px; }
.faq-item.active .faq-a-inner{ opacity:1; transform: translateY(0); }
.faq-a p{ font-size: 15.5px; color:#444; line-height: 1.95; }

/* Contact page */
.wrap{
  max-width: var(--max);
  margin: 24px auto 0;
  padding: 0 var(--padX);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: start;
}
.info-list{
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.info-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.info-item:hover{ transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0,0,0,0.08); }
.info-ico{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,215,0,0.14);
  border: 1px solid rgba(255,215,0,0.20);
  flex: 0 0 auto;
}
.info-ico svg{ width: 20px; height: 20px; }
.info-item b{ display:block; font-weight: 950; color:#4a2700; margin-bottom: 2px; }
.info-item a{ color:var(--brand); text-decoration:none; font-weight: 950; direction:ltr; }
.info-item a:hover{ text-decoration: underline; }

.quick-actions{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 950;
  color:#fff;
  background: linear-gradient(135deg, #1fd96a 0%, #0bbf8a 40%, #0a7cc7 100%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  overflow:hidden;
  position:relative;
}
.qbtn::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.18), transparent 55%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.qbtn:hover::before{ opacity:1; }
.qbtn:hover{ transform: translateY(-3px); box-shadow: 0 22px 55px rgba(0,0,0,0.18); filter:saturate(1.05); }
.qbtn svg{ width: 20px; height: 20px; }

form{ margin-top: 10px; }
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.field{ display:flex; flex-direction:column; gap: 6px; }
label{ font-weight: 900; font-size: 13.5px; color:#4a2700; }
input, textarea, select{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.95);
  padding: 12px 12px;
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(139,69,19,0.35);
  box-shadow: 0 0 0 5px rgba(255,215,0,0.18);
  transform: translateY(-1px);
}
textarea{ min-height: 130px; resize: vertical; }
.full{ grid-column: 1 / -1; }
.hint{ font-size: 12.5px; opacity: .85; margin-top: 2px; }

.btn-row{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  font-weight: 950;
  box-shadow: 0 16px 38px rgba(139,69,19,0.22);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.submit:hover{ transform: translateY(-2px); box-shadow: 0 20px 50px rgba(139,69,19,0.28); filter: saturate(1.05); }
.submit svg{ width: 18px; height: 18px; }
.alt{ font-size: 13px; opacity: .9; }
.alt a{ color:var(--brand); font-weight: 950; text-decoration:none; }
.alt a:hover{ text-decoration: underline; }

.status{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(37,211,102,0.10);
  display:none;
  font-weight: 900;
  color:#0b5f3d;
}
.status.error{ background: rgba(220,53,69,0.10); color:#8a1f2b; }

.map{
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  overflow:hidden;
}

/* Footer */
.site-footer{
  background: var(--brandDark);
  color:#f0d8b0;
  padding: 55px var(--padX) 18px;
  margin-top: 80px;
  border-top: 1px solid rgba(255,215,0,0.25);
}
.footer-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 22px;
}
.footer-col{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 22px 20px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.footer-col:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,0.18); }
.site-footer h4{ color: var(--gold); margin-bottom: 12px; font-weight: 950; font-size: 18px; }
.footer-address{ font-style: normal; font-size: 15px; line-height: 1.9; opacity: .95; }
.footer-contact{ margin-top: 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.footer-contact .label{ font-size:14px; opacity:.9; }
.footer-tel{ color: var(--gold); text-decoration:none; font-weight: 950; direction:ltr; }
.footer-tel:hover{ text-decoration:underline; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap: 10px; }
.footer-links a{
  color:#f0d8b0;
  text-decoration:none;
  font-size: 15px;
  opacity:.95;
  position:relative;
  padding-right: 10px;
  transition: transform .2s ease, color .2s ease;
}
.footer-links a::before{ content:"•"; position:absolute; right:0; color: rgba(255,215,0,0.75); }
.footer-links a:hover{ color: var(--gold); transform: translateX(-2px); }
.footer-about{ font-size: 15px; line-height: 1.9; opacity: .95; }

.footer-btn{
  display:inline-block;
  margin-top: 14px;
  padding: 11px 18px;
  background: var(--gold);
  color:#4a2700;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  transition: transform .2s ease, filter .2s ease;
}
.footer-btn:hover{ transform: translateY(-2px); filter: brightness(.95); }

.footer-bottom{
  max-width: var(--max);
  margin: 20px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.copyright{ margin:0; font-size: 13.5px; opacity:.92; }
.to-top{
  background: transparent;
  border: 1px solid rgba(255,215,0,0.55);
  color: var(--gold);
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 950;
  transition: transform .2s ease, background .2s ease;
}
.to-top:hover{ transform: translateY(-2px); background: rgba(255,215,0,0.12); }

/* =========================
   Floating Contact Buttons (WhatsApp / Telegram)
========================== */
.float-actions{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.float-btn{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.65);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.float-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  filter: saturate(1.05);
}

.float-btn svg{
  width: 26px;
  height: 26px;
}

.float-btn.whatsapp{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 55%),
              linear-gradient(135deg, #25D366 0%, #17b85a 60%, #0f9446 100%);
}

.float-btn.telegram{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 55%),
              linear-gradient(135deg, #2AABEE 0%, #1f86c7 60%, #136a9a 100%);
}

.float-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 5px rgba(255,215,0,0.25), 0 18px 40px rgba(0,0,0,0.18);
}

/* Responsive */
@media (max-width: 1100px){
  .feature-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .hero-wrap{ grid-template-columns: 1fr; }
  .hero-media{ min-height: 320px; }
}
@media (max-width: 992px){
  :root{ --padX:16px; }
  .mainbar-inner{ flex-direction:column; align-items:stretch; }
  nav ul{ justify-content:center; }
  .direct{ grid-template-columns: 1fr; }
  .direct-actions{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .wrap{ grid-template-columns: 1fr; padding: 0 var(--padX); }
  .quick-actions{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .feature-grid{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr; }
  .hero-title{ font-size: 26px; }
  .hero-stats{ grid-template-columns: 1fr; }
  .faq-wrap{ padding: 22px 16px; }

  /* Floating smaller on mobile */
  .float-actions{ right: 14px; bottom: 14px; }
  .float-btn{ width: 52px; height: 52px; }
  .float-btn svg{ width: 24px; height: 24px; }
}