/* ============================================================
   MaharaT Dz — Decorative layer (deco.css)
   Load AFTER main.css. Pure additive polish: blobs, waves,
   patterns, sparkles, premium icon chips. No layout changes.
   All artwork inline data-URI SVG — zero extra requests.
   ============================================================ */

/* ===================== Hero: layered blobs + sparkles ===================== */
.hero{ position:relative; isolation:isolate; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(420px 420px at 92% 8%, rgba(202,164,74,.14), transparent 70%),
    radial-gradient(520px 520px at -6% 90%, rgba(44,181,105,.12), transparent 70%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600'%3E%3Cg fill='none'%3E%3Cpath d='M60 120l8 20 20 8-20 8-8 20-8-20-20-8 20-8z' fill='%23caa44a' opacity='.30'/%3E%3Cpath d='M1120 90l6 15 15 6-15 6-6 15-6-15-15-6 15-6z' fill='%232cb569' opacity='.28'/%3E%3Cpath d='M980 480l5 12 12 5-12 5-5 12-5-12-12-5 12-5z' fill='%23caa44a' opacity='.26'/%3E%3Ccircle cx='180' cy='420' r='5' fill='%232cb569' opacity='.22'/%3E%3Ccircle cx='1060' cy='250' r='4' fill='%23caa44a' opacity='.25'/%3E%3Ccircle cx='320' cy='60' r='4' fill='%232cb569' opacity='.2'/%3E%3Ccircle cx='760' cy='40' r='3' fill='%23caa44a' opacity='.25'/%3E%3Cpath d='M420 520c20-14 44-14 64 0' stroke='%232cb569' stroke-width='3' stroke-linecap='round' opacity='.16'/%3E%3Cpath d='M840 560c16-11 36-11 52 0' stroke='%23caa44a' stroke-width='3' stroke-linecap='round' opacity='.16'/%3E%3C/g%3E%3C/svg%3E");
  background-size:1200px 600px; background-position:center;
}

/* soft ring behind hero screenshot */
.hero-visual{ position:relative; }
.hero-visual::before{
  content:""; position:absolute; inset:-28px -20px auto auto;
  width:150px; height:150px; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Ccircle cx='75' cy='75' r='70' fill='none' stroke='%23caa44a' stroke-width='2' stroke-dasharray='4 10' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  animation:deco-spin 40s linear infinite;
}
.hero-shot{ position:relative; }
.hero-shot img{ transition:transform .5s ease; }
.hero-shot:hover img{ transform:scale(1.02); }

/* ===================== Wave dividers ===================== */
.deco-wave{ display:block; width:100%; height:56px; line-height:0; pointer-events:none; margin-top:-1px; }
.deco-wave svg{ width:100%; height:100%; display:block; }
/* wave baked as background — usable on any block */
.deco-wave-tint{
  height:56px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 28C240 56 480 0 720 14S1200 56 1440 22V56H0Z' fill='%23f4faf6'/%3E%3C/svg%3E");
  background-size:100% 100%;
}

/* ===================== Section patterns ===================== */
.section.tint{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%231d7a45' opacity='.07'/%3E%3C/svg%3E");
  background-color:var(--tint);
}

/* pricing / CTA sections get faint gold grid corners */
#pricing.section{ position:relative; overflow:hidden; }
#pricing.section::before{
  content:""; position:absolute; top:-40px; inset-inline-start:-40px;
  width:260px; height:260px; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.8' fill='%23caa44a' opacity='.28'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent);
          mask-image:radial-gradient(closest-side, #000, transparent);
}

/* ===================== Premium icon chips ===================== */
.card .ic, .hero-card .ic{
  background:linear-gradient(135deg, var(--green-100), #d9f2e2 60%, #f5ecd3);
  color:var(--green-800);
  box-shadow:inset 0 0 0 1px rgba(29,122,69,.14), 0 6px 14px rgba(20,60,35,.08);
  position:relative;
}
.card:hover .ic{
  background:linear-gradient(135deg, var(--green-600), var(--green-700));
  color:#fff;
  box-shadow:0 10px 22px rgba(29,122,69,.30);
  transition:all .35s ease;
}
.card .ic, .card:hover .ic{ transition:all .35s ease; }

/* card top accent line on hover */
.card{ position:relative; overflow:hidden; }
.card::before{
  content:""; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--green-500), var(--gold));
  transform:scaleX(0); transform-origin:center; transition:transform .35s ease;
  border-radius:0 0 4px 4px;
}
.card:hover::before{ transform:scaleX(1); }

/* ===================== Buttons: subtle shine ===================== */
.btn-primary, .btn-gold{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-gold::after{
  content:""; position:absolute; top:0; bottom:0; width:40%;
  inset-inline-start:-60%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); transition:inset-inline-start .6s ease;
  pointer-events:none;
}
.btn-primary:hover::after, .btn-gold:hover::after{ inset-inline-start:130%; }

/* ===================== Footer top flourish ===================== */
.site-footer{ position:relative; }
.site-footer::before{
  content:""; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--green-500) 30%, var(--gold) 70%, transparent);
  opacity:.65;
}

/* ===================== Section head flourish ===================== */
.section-head .section-title{ position:relative; display:inline-block; padding-bottom:10px; }
.section-head .section-title::after{
  content:""; position:absolute; bottom:0; inset-inline-start:50%;
  transform:translateX(50%);
  width:64px; height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 6'%3E%3Cpath d='M2 4c10-4 20-4 30 0s20 4 30 0' fill='none' stroke='%23caa44a' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
html[dir="ltr"] .section-head .section-title::after{ transform:translateX(-50%); }

/* ===================== Animations ===================== */
@keyframes deco-spin{ to{ transform:rotate(360deg); } }
@keyframes deco-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.deco-float{ animation:deco-float 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .hero-visual::before, .deco-float{ animation:none; }
  .btn-primary::after, .btn-gold::after{ display:none; }
}