:root{
  --ps-gray:#bfc3c7; --ps-gray-dark:#6b6f76; --ink:#1a1d22; --muted:#5e6672;
  --red:#e7e413; --yellow:#e70e0e; --blue:#281499; --green:#1148fc;
  --primary: var(--blue); --radius:16px; --shadow: 0 12px 30px rgba(0,0,0,.08); --container:1100px;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);
     background:linear-gradient(180deg,#d7dbdf 0%,#e6e9ec 40%,#f5f7f9 100%);line-height:1.8}


img{max-width:100%;display:block}

.container{width:min(100% - 32px,var(--container));margin-inline:auto}

.muted{color:var(--muted)}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid #d0d5db;background:#fff;transition:transform .15s,box-shadow .15s,background .2s}


.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

.btn-primary{background:var(--primary);color:#f8f5f5;border-color:transparent}

.btn-ghost{background:#b6b4b4;color:var(--ink)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(228, 224, 224, 0.85);backdrop-filter:blur(10px);border-bottom:1px solid #e3e7ec}

.nav{display:flex;align-items:center;gap:16px;padding:10px 0}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:800}

.brand img{width:28px;height:28px}

.brand .tag{background:linear-gradient(90deg,var(--red),var(--yellow),var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

.nav-links{margin-inline-start:auto;display:flex;gap:14px;align-items:center}

.nav-links a{padding:8px 12px;text-decoration:none;color:var(--ink);border-radius:10px}

.nav-links a:hover{background:#eef1f6}

.nav-toggle{display:none;background:none;border:0;width:42px;height:42px;border-radius:10px;cursor:pointer}

.nav-toggle span{display:block;height:2px;background:#222;margin:6px;border-radius:2px}

@media (max-width:860px){
   .nav-toggle{display:inline-block}
   .nav-links{position:absolute;inset-inline:0;top:60px;background:#ebe9e9;display:none;flex-direction:column;padding:14px;border-bottom:1px solid #f3f5f8}
   .nav-links.open{display:flex}
}


.hero{position:relative;border-bottom:3px solid #f2f4f7;background:linear-gradient(135deg,#c1c3c4,#bfc3c7 40%,#d9dde1)}

.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;padding:40px 0;align-items:center}

.hero-text h1{margin:0 0 8px;font-size:clamp(28px,3.4vw,46px)}

.hero p{margin:0 0 18px;color:var(--muted)}

.ps-badges{display:flex;gap:8px;margin-top:10px}

.dot{width:10px;height:10px;border-radius:50%}

.dot.red{background:var(--red)}.dot.yellow{background:var(--yellow)}.dot.blue{background:var(--blue)}.dot.green{background:var(--green)}

.hero-art img{border-radius:16px;box-shadow:var(--shadow);animation:floaty 6s ease-in-out infinite}

.crt .scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.05) 1px,transparent 1px,transparent 3px);mix-blend-mode:multiply;opacity:.35}

.glow{text-shadow:0 0 12px rgba(59,91,169,.45)}

.section-header{text-align:center;margin:26px 0}

.features{padding:30px 0}

.features .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}

.card.post{padding:0;overflow:hidden}

.card.post img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#cfd5dc}

.card-body{padding:14px}

.link{color:var(--blue);text-decoration:none;font-weight:800}

.link:hover{text-decoration:underline}

@media (max-width:980px){.features .grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:560px){.features .grid{grid-template-columns:1fr}}

.posts{padding:30px 0}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}

@media (max-width:560px){.cards{grid-template-columns:1fr}}

.page-hero{padding:40px 0;background:linear-gradient(135deg,#d1d5da,#c2c7cc)}

.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:30px 0}

.about-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}

.about-card ul{margin:0;padding-inline-start:18px}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:30px 0}

.project-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:grid}

.project-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#cfd5dc}

.proj-body{padding:14px}

.site-footer{padding:24px 0;border-top:1px solid #e3e7ec;background:#fafbfc}


.footer-grid{display:flex;align-items:center;justify-content:space-between}

.brand.small img{width:22px;height:22px}

.page-fade{opacity:0;animation:fadeIn .6s ease forwards}

@keyframes fadeIn{to{opacity:1}}

.reveal{opacity:0;transform:translateY(19px);transition:.6s ease}

.reveal.visible{opacity:1;transform:none}

.btn:hover{filter:brightness(1.03)}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.site-footer .btdd {
   color: var(--muted);
   font-size: 14px;
   margin-top: 8px;
}

.xxxlarge {
   font-size: 20px;
   color: var(--primary);
   margin: 14px 0;
   text-align: center;
}

.cvcvc {
   font-size: 18px;
   color: var(--primary);
   color: #099c4b;
   margin-top: 17px 0;
}
.bot-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 110px;
  height: 140px;
  z-index: 9999;
  cursor: pointer;
  user-select: none;
}

.bot {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.15));
  transition: transform .2s ease;
}
.bot:hover {
  transform: translateY(-4px) rotate(-1deg);
}

.speech {
  position: absolute;
  right: 120px;
  bottom: 70px;
  max-width: 220px;
  padding: 10px 12px;
  background: #fff;
  border: 2px solid #110808;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  font: 600 14px/1.4 "Tajawal", system-ui, sans-serif;
  color: #222;
  display: none;
}

.speech::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 16px;
  width: 0;
  height: 0;
  border-left: 12px solid #110505;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.speech::before {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 17px;
  width: 0;
  height: 0;
  border-left: 10px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  z-index: 2;
}

@keyframes blink {
  0%, 90%, 92%, 100% { opacity: 1 }
  91%, 93% { opacity: .1 }
}
.eye {
  animation: blink 4.5s infinite;
}