/* =========================================================
   Matarot - 2026 Modernization Layer
   Sits on top of styles.css / inner.css / home.css
   Adds: depth, gradient meshes, glass, micro-interactions
   ========================================================= */

:root{
  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuMDggIDAgMCAwIDAgMC4xNCAgMCAwIDAgMCAwLjI1ICAwIDAgMCAwLjA0NSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  --mesh-warm: radial-gradient(60% 60% at 80% 20%, rgba(184,150,87,.18), transparent 60%),
               radial-gradient(50% 50% at 15% 80%, rgba(21,37,64,.10), transparent 60%);
  --mesh-deep: radial-gradient(70% 60% at 85% 15%, rgba(184,150,87,.22), transparent 65%),
               radial-gradient(50% 50% at 10% 85%, rgba(89,123,176,.20), transparent 65%),
               radial-gradient(40% 40% at 50% 50%, rgba(15,27,46,.55), transparent 70%);
  --ease-spring: cubic-bezier(.2,.9,.2,1);
}

/* ---------- Heroes: gradient mesh + grain ---------- */
.hero,.page-hero{
  position:relative;
  background:linear-gradient(135deg,#050a14 0%,#0c1726 30%,var(--navy) 60%,#1d3152 100%) !important;
  isolation:isolate;
  overflow:hidden;
  min-height:88vh;
  display:flex;
  align-items:center;
}
/* Animated conic gradient sweep behind hero */
.hero::before{
  content:"";position:absolute;inset:-20%;z-index:-1;
  background:conic-gradient(from 180deg at 70% 30%,
    rgba(184,150,87,.0) 0deg,
    rgba(184,150,87,.35) 60deg,
    rgba(89,123,176,.25) 140deg,
    rgba(184,150,87,.0) 220deg,
    rgba(184,150,87,.0) 360deg);
  filter:blur(60px);
  animation:conicSpin 22s linear infinite;
  opacity:.85;
}
@keyframes conicSpin{to{transform:rotate(360deg)}}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--mesh-deep);
}
.hero::before,.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--mesh-deep);
  opacity:1;
}
.hero::after,.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--grain);
  background-size:240px 240px;
  opacity:.55;
  mix-blend-mode:overlay;
  pointer-events:none;
}
/* Floating gold orb in heroes */
.hero .wrap,.page-hero .wrap{position:relative}
.hero .wrap::before,.page-hero .wrap::before{
  content:"";position:absolute;
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,150,87,.32),transparent 60%);
  top:-180px;left:-120px;
  filter:blur(40px);
  z-index:-1;
  animation:floatOrb 14s ease-in-out infinite;
}
@keyframes floatOrb{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,30px) scale(1.08)}
}

/* ---------- Headline lift: serif italic accent ---------- */
.hero h1 em, .page-hero h1 em,
h1 em, h2 em{
  font-style:italic;
  font-family:'Noto Sans Hebrew',sans-serif;
  background:linear-gradient(120deg,var(--gold) 0%,#D4B98A 50%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:500;
}

/* Animated gold underline accent */
.gold-u{position:relative;display:inline-block}
.gold-u::after{
  content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.42em;
  background:linear-gradient(180deg,transparent 55%,rgba(184,150,87,.55) 55%);
  z-index:-1;border-radius:2px;
  transform-origin:right center;
  animation:underlinePaint .9s var(--ease-spring) .3s both;
}
@keyframes underlinePaint{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Buttons: depth + shimmer ---------- */
.btn{
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease-spring),box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  letter-spacing:.005em;
}
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease-spring);
  pointer-events:none;
}
.btn:hover::before{transform:translateX(120%)}
.btn-primary{
  background:#C9A76A;
  color:#13284B !important;
  font-weight:700;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:all .25s ease !important;
}
.btn-primary .btn-ic{filter:brightness(0) saturate(100%) invert(14%) sepia(40%) saturate(800%) hue-rotate(190deg)}
.btn-primary:hover{
  background:#D5B57B !important;
  transform:translateY(-1px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.btn-ghost{backdrop-filter:blur(6px) saturate(140%);background:rgba(255,255,255,.06)}
.btn-lg{border-radius:12px}

/* ---------- Header: refined glass ---------- */
.site-header{
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.site-header.scrolled{background:rgba(255,255,255,.92) !important}
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease-spring);
  border-radius:2px;
}
.nav-links a:hover::after,.nav-links .active::after{transform:scaleX(1);transform-origin:left}
.brand-mark{
  background:linear-gradient(135deg,#0c1726 0%,var(--navy) 60%,#1d3152 100%);
  box-shadow:inset 0 0 0 1px rgba(184,150,87,.45),0 6px 14px rgba(15,27,46,.18);
}

/* ---------- Section: subtle decorative accent ---------- */
.section-head .eyebrow,.eyebrow{
  background:linear-gradient(120deg,var(--gold-2),var(--gold) 50%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Cards: 2026 glass + smooth lift ---------- */
.card,.kc-card,.faq-rich-item,.leader,.agent,.price-card,.product-card{
  border-radius:18px !important;
  transition:transform .35s var(--ease-spring),box-shadow .35s ease,border-color .25s ease !important;
  position:relative;
  overflow:hidden;
}
.card::before,.kc-card::before,.leader::before,.product-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.6),transparent 40%);
  opacity:.6;
}
.card:hover,.kc-card:hover,.leader:hover,.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px -20px rgba(15,27,46,.18),0 8px 22px rgba(15,27,46,.07) !important;
}

/* Avatar style upgrade */
.av{
  background:transparent !important;
  box-shadow:0 8px 18px rgba(15,27,46,.16);
  font-family:'Noto Sans Hebrew',sans-serif !important;
  letter-spacing:.02em;
}

/* ---------- CTA banner: depth ---------- */
.cta-banner{
  background:linear-gradient(135deg,var(--navy) 0%,#0c1726 60%,var(--navy-700) 100%) !important;
  position:relative;overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 90% 10%,rgba(184,150,87,.28),transparent 60%),
             radial-gradient(40% 60% at 10% 90%,rgba(89,123,176,.20),transparent 60%);
  pointer-events:none;
}
.cta-banner::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);background-size:240px;opacity:.4;
  mix-blend-mode:overlay;pointer-events:none;
}
.cta-banner .wrap{position:relative;z-index:1}

/* ---------- Stats: number flourish ---------- */
.stat .num{
  background:linear-gradient(180deg,var(--navy) 0%,#1d3152 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.02em;
}

/* ---------- Floating WhatsApp: subtle pulse ---------- */
.float-wa{
  background:linear-gradient(180deg,#2dd870,#25d366 60%,#1eb955) !important;
  box-shadow:0 12px 30px rgba(37,211,102,.45),inset 0 1px 0 rgba(255,255,255,.4);
}
.float-wa::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(37,211,102,.5);
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{
  0%{transform:scale(.9);opacity:.7}
  100%{transform:scale(1.45);opacity:0}
}
.back-top{
  background:linear-gradient(180deg,var(--navy) 0%,#0c1726 100%) !important;
  box-shadow:0 8px 22px rgba(15,27,46,.32);
}

/* ---------- Scroll reveal: smoother ---------- */
.reveal{transition:opacity .9s var(--ease-spring),transform .9s var(--ease-spring) !important}
.reveal.in{opacity:1 !important;transform:none !important}

/* ---------- Sectional rhythm: alternating background ---------- */
section.section-alt{
  background:linear-gradient(180deg,var(--paper) 0%,#fff 100%);
  position:relative;
}
section.section-alt::after{
  content:"";position:absolute;left:50%;bottom:-1px;width:120px;height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ---------- FAQ rich modernizer ---------- */
.faq-rich-item .faq-icon{
  background:linear-gradient(135deg,var(--paper),#fff) !important;
  box-shadow:inset 0 0 0 1px var(--line);
}
.faq-rich-item[open] .faq-icon{
  background:linear-gradient(135deg,var(--navy),#0c1726) !important;
}

/* ---------- Footer: gold gradient hairline + glow ---------- */
.site-footer{
  background:linear-gradient(180deg,#0c1726 0%,var(--navy) 50%,#0a1525 100%) !important;
}
.site-footer::before{
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(184,150,87,.7) 50%,transparent) !important;
  filter:drop-shadow(0 0 6px rgba(184,150,87,.4));
}

/* ---------- Selection ---------- */
::selection{background:var(--gold);color:var(--navy)}

/* ---------- Smooth scroll-margin for anchors under sticky header ---------- */
section{scroll-margin-top:90px}

/* ---------- Hero text contrast tune + size jump ---------- */
.hero h1,.page-hero h1{
  color:#fff !important;
  font-size:clamp(2.6rem,6.2vw,5.4rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.025em !important;
  text-shadow:0 1px 40px rgba(0,0,0,.35);
  font-weight:700;
}
.hero h1 .gold-u,.page-hero h1 .gold-u{
  background:linear-gradient(120deg,#D4B98A 0%,var(--gold) 50%,#917040 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero h1 .gold-u::after,.page-hero h1 .gold-u::after{display:none}
.hero .lead,.page-hero .lead,.hero p,.page-hero p{color:#e8edf5 !important;font-size:1.35rem !important}
.hero .eyebrow,.page-hero .eyebrow{color:var(--gold) !important;-webkit-text-fill-color:var(--gold);font-size:.95rem !important;letter-spacing:.22em !important}

/* Bold floating gold orbs you can actually see */
.hero .wrap::after{
  content:"";position:absolute;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,150,87,.55),transparent 65%);
  bottom:-100px;right:-80px;
  filter:blur(50px);
  z-index:-1;
  animation:floatOrb 12s ease-in-out infinite reverse;
  pointer-events:none;
}

/* Section transitions: dramatic gold separator */
.section-head h2,.section h2{
  font-size:clamp(2.1rem,4.2vw,3.3rem) !important;
  line-height:1.1 !important;
  letter-spacing:-.018em !important;
}

/* Big visible buttons */
.btn-lg{
  padding:1.25rem 2.4rem !important;
  font-size:1.15rem !important;
  border-radius:14px !important;
}

/* Stronger card hover */
.card:hover,.kc-card:hover,.leader:hover,.product-card:hover,.faq-rich-item:hover{
  transform:translateY(-8px) !important;
  box-shadow:0 32px 70px -22px rgba(15,27,46,.28),0 12px 28px rgba(15,27,46,.10) !important;
}

/* Gold accent bar - visible on every section heading */
.section-head .eyebrow::before,.eyebrow::before{
  width:48px !important;
  height:2px !important;
  background:linear-gradient(90deg,var(--gold),transparent) !important;
}

/* ============================================================
   MICRO-ANIMATIONS 2026
   ============================================================ */

/* --- Buttons: lift + gold glow on hover, press on click --- */
.btn{
  transition:transform .18s ease,box-shadow .18s ease,background .2s ease,border-color .2s ease !important;
  will-change:transform;
}
.btn:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 8px 22px rgba(184,150,87,.28) !important;
}
.btn:active{
  transform:translateY(1px) scale(.98) !important;
  box-shadow:0 2px 6px rgba(184,150,87,.18) !important;
  transition-duration:.08s !important;
}

/* --- Nav links: gold underline slides in from right (RTL) --- */
.nav-links a{
  position:relative;
  transition:color .2s ease !important;
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;bottom:-3px;right:0;
  width:0;height:2px;
  background:var(--gold);
  border-radius:2px;
  transition:width .25s ease;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn)[aria-current]::after{width:100%}

/* --- Product cards: border-color brightens on hover --- */
.prod-card{
  transition:transform .28s ease,box-shadow .28s ease,border-color .25s ease !important;
}
.prod-card:hover{
  transform:translateY(-7px) !important;
  box-shadow:0 22px 50px -16px rgba(15,27,46,.18) !important;
  border-inline-start-color:var(--gold-2) !important;
}

/* --- Expert / agent cards: avatar scales up on hover --- */
.expert-card:hover .ex-portrait,
.agent:hover .av{
  transform:scale(1.07);
  box-shadow:0 0 0 4px rgba(184,150,87,.25);
}
.ex-portrait,.av{
  transition:transform .3s ease,box-shadow .3s ease !important;
}

/* --- Testimonial cards: subtle float --- */
.testi-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 18px 44px -14px rgba(15,27,46,.15) !important;
}
.testi-card{
  transition:transform .3s ease,box-shadow .3s ease !important;
}

/* --- FAQ accordion: smooth open/close --- */
.faq-item summary,
.faq-rich-item summary{
  transition:color .2s ease,background .2s ease;
}
.faq-item[open] summary,
.faq-rich-item[open] summary{
  color:var(--gold-2);
}
.faq-a,.faq-rich-item .faq-content{
  animation:fadeSlideDown .28s ease forwards;
}
@keyframes fadeSlideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* --- Logo: subtle scale on hover --- */
.brand:hover .brand-logo{
  transform:scale(1.03);
  transition:transform .25s ease;
}
.brand-logo{transition:transform .25s ease}

/* --- Floating WhatsApp button: pulse ring --- */
.float-wa{
  transition:transform .2s ease,box-shadow .2s ease !important;
}
.float-wa:hover{
  transform:scale(1.12) !important;
  box-shadow:0 0 0 8px rgba(37,211,102,.2) !important;
}

/* --- Avatar rings glow on hover (team section) --- */
.leader:hover .av,
.dept-card:hover .av,
.mentor-card:hover .mentor-portrait{
  box-shadow:0 0 0 4px rgba(184,150,87,.35),0 8px 20px rgba(15,27,46,.14) !important;
  transition:box-shadow .3s ease !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .btn,.nav-links a::after,.prod-card,.ex-portrait,.av,.testi-card,
  .faq-a,.brand-logo,.float-wa{
    transition:none !important;
    animation:none !important;
  }
}