/* =========================================================
   القرية — Alqariah  |  home.css  (index.html only)
   Hero, marquee, stats, about, delivery CTA.
   Loaded after base.css.
   ========================================================= */

/* =========================================================
   Hero — colorful animated mesh
   ========================================================= */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;text-align:center;
  padding:140px 24px 90px;overflow:hidden;
  background:radial-gradient(130% 90% at 50% -10%,var(--sky),var(--paper) 60%)}
.hero__mesh{position:absolute;inset:0;z-index:0;filter:blur(8px)}
.blob{position:absolute;border-radius:50%;opacity:.55;mix-blend-mode:multiply}
.blob--1{width:42vw;height:42vw;inset-block-start:-8%;inset-inline-start:-6%;
  background:radial-gradient(circle at 30% 30%,var(--blue),transparent 70%)}
.blob--2{width:38vw;height:38vw;inset-block-end:-12%;inset-inline-end:-4%;
  background:radial-gradient(circle at 30% 30%,var(--green),transparent 70%)}
.blob--3{width:30vw;height:30vw;inset-block-start:30%;inset-inline-end:24%;
  background:radial-gradient(circle at 30% 30%,var(--orange),transparent 70%)}

.hero__inner{position:relative;z-index:2;max-width:760px}
.chip{display:inline-block;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);
  border:1px solid var(--line);color:var(--blue-dark);font-weight:800;
  padding:.5em 1.2em;border-radius:999px;font-size:.95rem;margin-bottom:22px;box-shadow:var(--shadow-soft)}
.hero__title{font-size:clamp(2.8rem,8vw,5.6rem);line-height:1.08;font-weight:900;color:var(--navy);letter-spacing:-.01em}
.hero__logo{width:min(460px,82%);height:auto;margin:0 auto;
  animation:pop .7s .15s var(--ease) both}
.grad{background:linear-gradient(100deg,var(--blue),var(--green) 55%,var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.reveal{display:block;overflow:hidden}
.reveal>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease)}
.reveal.in-view>span{transform:none}
.reveal:nth-child(2)>span{transition-delay:.12s}
.hero__lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--muted);margin:24px auto 32px;max-width:54ch}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* little contact box under the hero buttons — glassy pill like .chip */
.hero__contact{margin-top:28px;display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:999px;padding:8px 12px;box-shadow:var(--shadow-soft)}
.hc-phone{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--navy)}
.hc-num{font-size:1rem;letter-spacing:.02em;white-space:nowrap}
.hc-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:var(--sky);color:var(--blue);flex-shrink:0;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s var(--ease)}
.hc-ico svg{width:20px;height:20px}
.hc-sep{width:1px;height:26px;background:var(--line)}
/* hover effects only on devices with a real mouse — on touch, :hover
   sticks after a tap and the icon stays "hovered" until you tap elsewhere */
@media(hover:hover){
  .hc-phone:hover{color:var(--blue)}
  .hc-phone:hover .hc-ico{background:var(--blue);color:#fff;transform:translateY(-3px);
    box-shadow:0 12px 22px -10px var(--blue)}
  .hc-ico--ig:hover{color:#fff;transform:translateY(-3px);
    background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%);
    box-shadow:0 12px 22px -10px #d6249f}
  .hc-ico--x:hover{background:#0f1419;color:#fff;transform:translateY(-3px);
    box-shadow:0 12px 22px -10px #0f1419}
  .hc-ico--li:hover{background:#0a66c2;color:#fff;transform:translateY(-3px);
    box-shadow:0 12px 22px -10px #0a66c2}
}

@media(max-width:480px){
  .hero__contact{gap:8px;padding:6px 10px}
  .hc-ico{width:38px;height:38px}
  .hc-ico svg{width:18px;height:18px}
  .hc-num{font-size:.88rem}
}

/* =========================================================
   Marquee
   ========================================================= */
.marquee{background:linear-gradient(100deg,var(--blue),var(--blue-dark));
  height:56px;overflow:hidden;position:relative}

/* =========================================================
   Stats
   ========================================================= */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1100px;
  margin:48px auto 0;padding:0 24px;position:relative;z-index:5}
.stats__item{flex:1;min-width:200px;max-width:320px;text-align:center;
  background:#fff;border-radius:var(--radius);padding:34px 20px;box-shadow:var(--shadow-soft);
  border:1px solid var(--line);opacity:0;transform:translateY(30px);transition:.6s var(--ease)}
.stats__item.in-view{opacity:1;transform:none}
.stats__item:nth-child(2){transition-delay:.1s}
.stats__item:nth-child(3){transition-delay:.2s}
.stats__item:nth-child(1) .stats__num{color:var(--blue)}
.stats__item:nth-child(2) .stats__num{color:var(--green-dark)}
.stats__item:nth-child(3) .stats__num{color:var(--orange)}
.stats__num{display:block;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:900;line-height:1}
.stats__label{color:var(--muted);font-weight:600}

/* =========================================================
   About — colorful cards + watermark
   ========================================================= */
.about{position:relative;max-width:1100px;margin:0 auto;padding:60px 24px 110px;overflow:hidden}
.about__watermark{position:absolute;inset-block-start:30%;inset-inline-end:-2%;font-size:26vw;font-weight:900;
  color:var(--green);opacity:.06;line-height:.8;pointer-events:none;z-index:0}
.about__cards{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.acard{padding:38px 34px;border-radius:var(--radius);color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow);opacity:0;transform:translateY(34px);transition:.7s var(--ease)}
.acard.in-view{opacity:1;transform:none}
.acard:nth-child(2){transition-delay:.12s}
.acard--blue{background:linear-gradient(150deg,var(--blue),var(--navy))}
.acard--green{background:linear-gradient(150deg,var(--green),var(--green-dark))}
.acard__tag{display:inline-block;background:rgba(255,255,255,.18);padding:.35em 1em;border-radius:999px;
  font-weight:800;font-size:.85rem;margin-bottom:16px}
.acard p{font-size:1.08rem;line-height:1.9}
.acard::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.12);inset-block-end:-70px;inset-inline-start:-50px}
@media(max-width:760px){.about__cards{grid-template-columns:1fr}}

/* =========================================================
   Delivery CTA
   ========================================================= */
.delivery{padding:30px 24px 110px}
.delivery__card{max-width:880px;margin:0 auto;text-align:center;color:#fff;
  border-radius:calc(var(--radius) + 6px);padding:64px 32px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--blue),var(--teal) 60%,var(--green));
  box-shadow:var(--shadow);opacity:0;transform:scale(.96);transition:.7s var(--ease)}
.delivery__card.in-view{opacity:1;transform:none}
.delivery__card::before,.delivery__card::after{content:"";position:absolute;border-radius:50%;
  background:rgba(255,255,255,.14)}
.delivery__card::before{width:260px;height:260px;inset-block-start:-90px;inset-inline-start:-60px}
.delivery__card::after{width:200px;height:200px;inset-block-end:-80px;inset-inline-end:-40px}
.delivery__card h2{font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:900;position:relative}
.delivery__card p{margin:12px 0 28px;opacity:.92;position:relative}
.delivery__card .btn{position:relative}