/* =========================
   HASHTAG — External CSS with Animations + Logo Splash + IG Button
   ========================= */
:root{
  --brand-600:#c50300; /* primary */
  --brand-700:#8f3727; /* accent dark */
  --brand-300:#f0c9bf;
  --ink:#0b1020;
  --muted:#6b7280;
  --bg:#ffffff;
  --tint:#f7f5f4;
  --ig:#E4405F;      /* Instagram brand */
  --radius:16px;
  --radius-lg:20px;
  --shadow:0 10px 30px rgba(11,16,32,.08);
  --ring:0 0 0 4px rgba(186,74,52,.12);
  --overlay: linear-gradient(135deg, rgba(186,74,98,.98), rgba(143,55,39,.98));
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Kufi Arabic","Noto Sans Arabic","Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Transition overlay */
#pageTransition{
  position:fixed;inset:0;z-index:100;pointer-events:none;
  background:var(--overlay);
  transform:translateY(100%);
  display:grid;place-items:center;
}
#pageTransition .splash{position:relative;opacity:0;transform:scale(.9);filter:blur(2px)}
#pageTransition .splash__logo{width:96px;height:96px;border-radius:18px;object-fit:contain;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2);position:relative;z-index:2}
#pageTransition .splash__glow{
  position:absolute;inset:8px;z-index:1;border-radius:22px;
  background:radial-gradient(closest-side, rgba(255,255,255,.25), rgba(255,255,255,0));
  filter:blur(8px);
}
#pageTransition .splash__ring{
  position:absolute;inset:-20px;z-index:0;border-radius:28px;
  background:conic-gradient(from 180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%, rgba(255,255,255,.3));
  animation:ringSpin 1.6s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}

#pageTransition.active{animation:wipeIn .45s ease forwards}
#pageTransition.active .splash{animation:logoIn .5s .2s cubic-bezier(.2,.65,.2,1) forwards}
#pageTransition.exit{animation:wipeOut .6s ease forwards}
@keyframes wipeIn{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes wipeOut{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes logoIn{from{opacity:0;transform:scale(.9);filter:blur(2px)}to{opacity:1;transform:scale(1);filter:blur(0)}}

/* Containers & layout */
.container{max-width:1120px;margin-inline:auto;padding:0 24px}
.section{padding:64px 0}
.section--tint{background:linear-gradient(180deg, var(--tint), #fff)}
.section--muted{background:#f9fafb;border-block:1px solid #eef2f7}

.grid{display:grid;gap:24px}
.grid--2{grid-template-columns: 1fr;align-items:center}
.grid--3{grid-template-columns: 1fr}
.grid--4{grid-template-columns: 1fr}
@media (min-width: 768px){
  .grid--2{grid-template-columns: 1.1fr .9fr}
  .grid--3{grid-template-columns: repeat(3, 1fr)}
  .grid--4{grid-template-columns: repeat(4, 1fr)}
}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid #eef2f7;
}
.header__inner{display:flex;align-items:center;gap:16px;padding:10px 0}
.header__cta{margin-inline-start:auto;display:flex;gap:8px;align-items:center}

.brand{display:flex;align-items:center;gap:12px}
.brand--small .brand__logo{height:32px;width:32px}
.brand__logo{height:40px;width:40px;border-radius:12px;background:#fff;object-fit:contain;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.brand__text{line-height:1.1}
.brand__title{font-weight:800;letter-spacing:.5px}
.brand__title--sm{font-size:.95rem}
.brand__subtitle{font-size:.72rem;color:var(--muted)}

.nav{display:none;gap:20px}
@media (min-width: 768px){ .nav{display:flex} }
.nav__link{
  position:relative;
  font-size:.95rem;
  color:inherit;
  text-decoration:none;
  padding-inline:2px;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:var(--brand-600);transform:scaleX(0);transform-origin:center;
  transition:transform .25s;
}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link.active{color:var(--brand-600)}
.nav__link.active::after{transform:scaleX(1)}

/* Hero */
.section--tint .text-gradient{
  background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__title{font-weight:800;font-size:2rem;line-height:1.2;margin:0}
@media (min-width: 640px){ .hero__title{font-size:2.4rem} }
@media (min-width: 900px){ .hero__title{font-size:3rem} }
.lead{margin-top:12px;color:var(--muted);font-size:1.08rem}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
@media (min-width: 640px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat__num{font-weight:800;font-size:1.6rem}
.stat__label{font-size:.86rem;color:var(--muted)}

.hero-card{border-radius:var(--radius-lg);padding:6px;background:linear-gradient(135deg,var(--brand-600),var(--brand-700));box-shadow:var(--shadow)}
.hero-card__img{height:200px;border-radius:14px;background:url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;transform:translateY(0);transition:transform .2s ease-out}
.hero-card__body{background:#fff;border-radius:14px;padding:16px;margin-top:8px}
.hero-card__title{font-weight:700}
.hero-card__subtitle{color:var(--muted);font-size:.9rem;margin-top:6px}

/* Cards, buttons, badges */
.card{
  background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(11,16,32,.10)}
.card--center{text-align:center}

.bar{height:8px;width:64px;border-radius:6px;background:linear-gradient(135deg,var(--brand-600),var(--brand-700));margin-bottom:10px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:14px;font-weight:700;
  box-shadow:0 4px 12px rgba(186,74,52,.18);
  transition:filter .2s ease, transform .1s ease, box-shadow .2s ease;
  text-decoration:none;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:9px 14px;font-size:.88rem}
.btn--primary{color:#fff;background:linear-gradient(135deg,var(--brand-600),var(--brand-700))}
.btn--primary:hover{filter:brightness(.96)}
.btn--ghost{background:#fff;border-color:#e5e7eb}
.btn--ghost:hover{background:#f8fafc}

/* Instagram button */
.btn--ig{color:#fff;background:linear-gradient(135deg, #E4405F, #C13584);box-shadow:0 6px 16px rgba(228,64,95,.35)}
.btn--ig:hover{filter:brightness(.97)}

/* Ripple */
.ripple::after{
  content:"";position:absolute;border-radius:50%;inset:auto auto 50% 50%;
  width:0;height:0;background:rgba(255,255,255,.35);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;
}
.ripple.is-rippling::after{animation:ripple .6s ease-out}
@keyframes ripple{
  0%{width:0;height:0;opacity:.6}
  100%{width:260px;height:260px;opacity:0}
}

.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.badge{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 6px 18px rgba(0,0,0,.04);font-size:.92rem}

/* Steps */
.step{
  font-size:1.8rem;font-weight:800;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section__title{font-weight:800;font-size:1.6rem;margin:0 0 22px 0}
.card__title{font-weight:800;margin-top:6px}
.card__title--light{color:#fff}
.card__text{color:var(--muted);margin-top:6px;line-height:1.8}

.highlight{
  border-radius:var(--radius);padding:20px;color:#fff;
  background:linear-gradient(135deg,var(--brand-700),var(--brand-600));
  box-shadow:var(--shadow);
}
.highlight__text{opacity:.95;line-height:1.8}

/* Media block */
.media{position:relative}
.media__img{height:260px;border-radius:14px;background:url('https://images.unsplash.com/photo-1551298370-9d3d53740c36?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;box-shadow:var(--shadow);transform:translateY(0);transition:transform .2s ease-out}
.media__badge{position:absolute;inset-block-end:-14px;inset-inline-start:-14px;width:88px;height:88px;border-radius:16px;object-fit:contain;background:#fff;box-shadow:var(--shadow);outline:4px solid #fff}

/* Form */
.form{display:grid;gap:12px;margin-top:16px}
.input{
  width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;
  font:inherit;outline:none;transition:box-shadow .15s ease, border-color .15s ease;
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.media__img {
  position: relative;
  overflow: hidden;
}

.media__img img {
  display: block;
}


.input:focus{border-color:var(--brand-600);box-shadow:var(--ring)}
.muted{color:var(--muted)}

.map{margin-top:12px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9}
.map__iframe{width:100%;height:100%;border:0}
.contact{margin-top:12px;font-size:.95rem}
.contact a{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}

/* Footer */
.footer{border-top:1px solid #eef2f7}
.footer__inner{display:flex;align-items:center;gap:14px;padding:24px 0}
.footer__inner > :last-child{margin-inline-start:auto}

/* Floating WhatsApp */
.wa-float{
  position:fixed;inset-inline-end:16px;inset-block-end:16px;z-index:60;
  box-shadow:0 12px 28px rgba(186,74,52,.3);
}
@media (min-width: 640px){
  .wa-float{inset-inline-start:16px;inset-inline-end:auto}
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Section spotlight */
@keyframes sectionSpot{0%{box-shadow:0 0 0 rgba(186,74,52,0)}30%{box-shadow:0 0 0 6px rgba(186,74,52,.12)}100%{box-shadow:0 0 0 rgba(186,74,52,0)}}
.spotlight{animation:sectionSpot 1200ms ease-out;border-radius:16px}

/* ====== Animations Engine ====== */
.preload *{animation:none !important}
.anim{opacity:0;transform:translateY(10px)}
.anim.in{opacity:1;transform:none}

[data-anim="fade-up"].in{animation:fadeUp .7s cubic-bezier(.2,.65,.2,1) forwards}
[data-anim="fade-down"].in{animation:fadeDown .7s cubic-bezier(.2,.65,.2,1) forwards}
[data-anim="fade-left"].in{animation:fadeLeft .7s cubic-bezier(.2,.65,.2,1) forwards}
[data-anim="fade-right"].in{animation:fadeRight .7s cubic-bezier(.2,.65,.2,1) forwards}
[data-anim="fade"].in{animation:fade .7s ease forwards}
[data-anim="scale-in"].in{animation:scaleIn .6s ease forwards}
[data-anim="rise"].in{animation:rise .6s cubic-bezier(.2,.65,.2,1) forwards}
[data-anim="tilt"].in{animation:tilt .6s ease forwards}

.anim{--delay:0s}
.anim.in{animation-delay:var(--delay)}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes tilt{from{opacity:0;transform:rotate(-2deg) translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}