/* Base */
:root{
  --brand-start:#FFA94D; /* gradient start from logo */
  --brand-end:#EF476F;   /* gradient end from logo */
  --bg:#0f0f12;
  --surface:#14161a;
  --surface-2:#191c21;
  --text:#f7f7f8;
  --muted:#b9bec7;
  --primary:#EF476F;
  --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg, #0f0f12 0%, #101318 50%, #0d0f13 100%);
  color:var(--text);
  line-height:1.8;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px, 92%);margin-inline:auto}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(20,22,26,.75);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid #22252b;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brand img{
  width:40px;height:40px;border-radius:10px;
  border:2px solid transparent;
  background:linear-gradient(#14161a,#14161a) padding-box, linear-gradient(135deg,var(--brand-start),var(--brand-end)) border-box;
  padding:4px;
  box-shadow:0 2px 8px rgba(239,71,111,.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.brand img:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(239,71,111,.3)}
.menu{display:flex;align-items:center;gap:18px}
.menu a{color:var(--muted);font-weight:500}
.menu a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;border:1px solid #2a2e35;transition:.2s ease;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--brand-start),var(--brand-end));color:#111}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{background:#1e2229}

/* Hero */
.hero{
  padding:72px 0 40px;
  background:
    radial-gradient(1000px 350px at 80% -10%, color-mix(in oklab, var(--brand-end) 22%, transparent), transparent),
    radial-gradient(900px 400px at 10% -20%, color-mix(in oklab, var(--brand-start) 24%, transparent), transparent);
  border-bottom:1px solid #1a1d23;
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero-text h1{font-size:clamp(28px,4vw,40px);margin:0 0 8px;font-weight:800}
.subtitle{margin:0;color:var(--muted);font-weight:600}
.tagline{margin:10px 0 18px;font-weight:800;letter-spacing:.3px;
  background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.logo-hero{
  width:min(320px,80%);margin-inline:auto;
  border-radius:20px;
  border:3px solid transparent;
  background:linear-gradient(#0f0f12,#0f0f12) padding-box, linear-gradient(135deg,var(--brand-start),var(--brand-end)) border-box;
  padding:20px;
  box-shadow:0 12px 40px rgba(239,71,111,.2), 0 0 60px rgba(255,169,77,.1);
  transition:transform .3s ease, box-shadow .3s ease;
}
.logo-hero:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 50px rgba(239,71,111,.3), 0 0 80px rgba(255,169,77,.15)}

/* Sections */
.section{padding:56px 0;border-bottom:1px solid #1a1d23}
.section.alt{background:var(--surface)}
.section-title{margin:0 0 16px;font-size:clamp(22px,3vw,30px);font-weight:800}
.section-sub{margin:-6px 0 16px;color:var(--muted)}
.section .container.narrow{width:min(850px,92%)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--surface-2);border:1px solid #232830;border-radius:14px;padding:18px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* Lists & Pills */
.list{margin:0;padding-inline-start:18px}
.pill-grid{display:flex;flex-wrap:wrap;gap:10px}
.pill{background:linear-gradient(135deg, color-mix(in oklab, var(--brand-start) 25%, transparent), color-mix(in oklab, var(--brand-end) 25%, transparent));
  border:1px solid #2a2e35;color:var(--text);padding:10px 14px;border-radius:999px;font-weight:700}

/* Checks */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.check{background:var(--surface-2);border:1px dashed #2a2e35;border-radius:12px;padding:12px}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:20px;
  padding:8px 0;
}
.gallery a{
  display:block;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  aspect-ratio:4/3;
  border:2px solid transparent;
  background:linear-gradient(#14161a,#14161a) padding-box, 
             linear-gradient(135deg, rgba(239,71,111,.15), rgba(255,169,77,.15)) border-box;
  box-shadow:0 4px 12px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.gallery a::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(239,71,111,.08), rgba(255,169,77,.08));
  opacity:0;
  transition:opacity .35s ease;
  z-index:1;
  pointer-events:none;
}
.gallery a:hover{
  transform:translateY(-6px) scale(1.02);
  border:2px solid transparent;
  background:linear-gradient(#14161a,#14161a) padding-box, 
             linear-gradient(135deg, var(--brand-start), var(--brand-end)) border-box;
  box-shadow:0 12px 32px rgba(239,71,111,.25), 
             0 6px 16px rgba(255,169,77,.15),
             0 0 40px rgba(239,71,111,.1);
}
.gallery a:hover::before{opacity:1}
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.4,0,.2,1), filter .35s ease;
  position:relative;
}
.gallery a:hover img{
  transform:scale(1.08);
  filter:brightness(1.1) contrast(1.05);
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox img{
  max-width:min(94vw,1400px);
  max-height:88vh;
  border-radius:16px;
  border:3px solid transparent;
  background:linear-gradient(#000,#000) padding-box, 
             linear-gradient(135deg, var(--brand-start), var(--brand-end)) border-box;
  box-shadow:0 20px 60px rgba(0,0,0,.8), 
             0 0 80px rgba(239,71,111,.2);
  animation:zoomIn .35s cubic-bezier(.4,0,.2,1);
}
@keyframes zoomIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.lightbox.hidden{display:none}
.lb-close{
  position:absolute;
  top:20px;
  left:20px;
  background:linear-gradient(135deg, rgba(239,71,111,.9), rgba(255,169,77,.9));
  color:#fff;
  border:2px solid rgba(255,255,255,.2);
  border-radius:50%;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:bold;
  cursor:pointer;
  transition:all .25s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.lb-close:hover{
  transform:scale(1.1) rotate(90deg);
  box-shadow:0 6px 20px rgba(239,71,111,.5);
}

/* Contact */
.contact{display:grid;gap:14px}
.contact-item{display:flex;gap:10px;align-items:center}
.label{color:var(--muted);min-width:90px}
.value{font-weight:700}
.contact-actions{margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.footer{padding:28px 0;background:#0d0f13}
.footer-grid{display:grid;gap:14px}
.brand-col{display:flex;gap:12px;align-items:center}
.brand-col img{width:36px;height:36px;border-radius:8px}
.links-col{display:flex;gap:12px;color:var(--muted)}
.copy{margin-top:8px;color:#818896;font-size:14px}

/* Gallery Show More */
.gallery-more-container{
  margin-top:32px;
  text-align:center;
}
.btn-show-more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 32px;
  background:linear-gradient(135deg, var(--brand-start), var(--brand-end));
  color:#fff;
  border:2px solid transparent;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 16px rgba(239,71,111,.25);
  font-family:inherit;
}
.btn-show-more:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(239,71,111,.4), 0 0 40px rgba(255,169,77,.2);
  background:linear-gradient(135deg, color-mix(in oklab, var(--brand-start) 120%, #fff), color-mix(in oklab, var(--brand-end) 120%, #fff));
}
.btn-show-more:active{
  transform:translateY(0);
}
.btn-show-more svg{
  transition:transform .3s ease;
}
.btn-show-more:hover svg{
  transform:translateY(3px);
}

/* Animations */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px) scale(0.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .checks{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .menu{display:none}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery a{aspect-ratio:1/1}
  .btn-show-more{padding:12px 24px;font-size:15px}
}