@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@500&family=Orbitron:wght@600&display=swap"); 

/* ====== Global ====== */
body {
  margin: 0;
  font-family: "Cairo", sans-serif;
  background-color: #050505;
  color: #f5f5f5;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
}

/* ====== Background Animation ====== */
.bg-animation {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 20% 20%, #330033, transparent 60%),
              radial-gradient(circle at 80% 80%, #660066, transparent 60%);
  animation: pulse 6s infinite alternate;
  z-index: -1;
  opacity: 0.4;
}
@keyframes pulse {
  0% { filter: brightness(1);}
  100% { filter: brightness(1.3);}
}

/* ====== Hero Section ====== */
.hero {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg,#330033,#660066);
  box-shadow: 0 0 20px #660066;
}

/* Logo EMS Glow */
.logo { 
  width: 140px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 25px #00bfff, 0 0 50px #1ec0ff, inset 0 0 20px #0066cc;
  animation: glow 4s ease-in-out infinite alternate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo:hover {
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 0 35px #ff69b4, 0 0 70px #ff69b4, inset 0 0 30px #ff69b4;
}
@keyframes glow {
  0% { filter: drop-shadow(0 0 8px #00bfff); }
  100% { filter: drop-shadow(0 0 20px #00ffff); }
}

/* Hero Text */
.hero h1 {
  font-family:"Orbitron",sans-serif;
  color:#1ec0ff;
}
.hero p {
  margin:5px 0 10px 0;
  color:#ddd;
  font-size:1.1em;
}

/* Powered By Section */
.powered {
  margin-top:10px;
  font-family:"Orbitron",sans-serif;
  font-size:1.2em;
  position:relative;
  display:inline-block;
}
.z4ck {
  font-weight:bold;
  color:#ffffff;
  transition: all 0.3s ease;
  position:relative;
}
.emoji {
  position:absolute;
  bottom:-25px;
  left:50%;
  transform:translateX(-50%) scale(0);
  opacity:0;
  font-size:1.2em;
  transition: all 0.4s ease;
}
.powered:hover .z4ck {
  color:#ff3399;
  text-shadow:0 0 15px #ff69b4;
}
.powered:hover .emoji {
  transform:translateX(-50%) scale(1);
  opacity:1;
}

/* ====== Navbar ====== */
.navbar {
  background:#330033;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:15px;
  padding:15px;
  border-bottom:2px solid #ff69b4;
}
.navbar a {
  color:#f5f5f5;
  text-decoration:none;
  font-weight:bold;
  font-family:"Orbitron",sans-serif;
  letter-spacing:1px;
}
.navbar a:hover {
  color:#ff69b4;
  text-shadow:0 0 5px #ff69b4;
}

/* ====== Sections ====== */
.section {
  padding:50px 20px;
  border-bottom:1px solid #333;
  backdrop-filter: blur(3px);
}
.section h2 {
  color:#ff69b4;
  font-family:"Orbitron",sans-serif;
  margin-bottom:15px;
}
.section p, .section ul, .section pre {
  font-size:1.05em;
  line-height:1.8;
}
.section ul {
  list-style:none;
  padding:0;
}
.section ul li {
  margin-bottom:10px;
  background:rgba(50,0,50,0.5);
  padding:8px 12px;
  border-left:4px solid #ff69b4;
  border-radius:6px;
}
li:hover{transform: scale(1.01); /* 1.1 = 10% plus grand */
  transition: transform 0.2s ease; /* animation fluide */}
/* ====== Photo Container ====== */
.photo-container .photo {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  max-height: 400px;
  border-radius: 10px;
  box-shadow: 0 0 25px #660066;
  object-fit: cover;
  margin: 0 auto;
}

/* ====== Footer ====== */
footer {
  text-align:center;
  padding:20px;
  background:#330033;
  color:#ccc;
  border-top:2px solid #ff69b4;
}

/* ====== CTA Panel ====== */
.cta-checkbox {display:none;}
.cta-panel {
  position:fixed;
  bottom:0;
  right:0;
  width:300px;
  max-height:450px;
  background:#330033;
  border:2px solid #ff69b4;
  border-radius:10px 10px 0 0;
  box-shadow:0 0 20px #ff69b4;
  transform:translateY(100%);
  transition: transform 0.4s ease;
  z-index:1001;
  overflow-y:auto;
  padding-bottom:20px;
}
.cta-checkbox:checked + .cta-open-tab + .cta-panel {transform:translateY(0);}
.cta-open-tab {
  position:fixed;
  bottom:20px;
  right:20px;
  background:#ff69b4;
  color:#050505;
  padding:8px 15px;
  border-radius:10px 10px 0 0;
  font-weight:bold;
  cursor:pointer;
  z-index:1002;
  box-shadow:0 0 10px #ff69b4;
}
.cta-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#660066;
  padding:10px 15px;
}
.cta-title strong {color:#ff69b4;font-size:1rem;}
.cta-title span {color:#fff;font-size:0.9rem;}
.cta-close {cursor:pointer;color:#ff5555;font-size:1.2rem;}
.cta-body {padding:10px 15px;}
.cta-desc {font-size:0.95rem;margin-bottom:10px;}
.cta-links {list-style:none;padding:0;}
.cta-links li {margin-bottom:8px;}
.cta-btn {
  display:block;
  text-decoration:none;
  color:#f5f5f5;
  background:#330033;
  border:1px solid #ff69b4;
  border-radius:5px;
  padding:6px 10px;
  text-align:center;
  transition:all 0.3s ease;
}
.cta-btn:hover {
  background:#ff3399;
  color:#050505;
  transform:scale(1.05);
}
.cta-btn.subtle {
  background:transparent;
  border:none;
  color:#ff5555;
}
.cta-footer {
  text-align:center;
  padding:8px;
  background:#660066;
  font-size:0.8rem;
  color:#ff69b4;
}