/*
Theme Name: Sarab Theme
Text Domain: Sarab Theme
Version: 1.015
Description: A premium website made by Yapacdev for the Sarab collective
Tags: Premium, modern, theme, fancy, responsive, unique
Author: Yapacdev
Author URI: https://yapacdev.com
*/

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
:root {
  --purple: #9B30FF;
  --violet: #6B00D7;
  --magenta: #D400FF;
  --pink: #FF2D9B;
  --white: #F0EAF7;
  --off: #1A0A2E;
  --dark: #050008;
  --mid: #0D0018;
}
 
html { scroll-behavior: smooth; }
body {
  background: var(--dark);
  cursor: none;
  font-family: 'Space Mono', monospace;
  color: var(--white);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* Custom Cursor */
.cursor {
  position: fixed; width: 12px; height: 12px;
  background: var(--magenta); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference; transition: transform 0.15s ease;
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1px solid rgba(155,48,255,0.6); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
}
 
/* ============================================================
   NAVIGATION
============================================================ */
nav {
  z-index: 1000;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-inner {
  border-bottom: 1px solid rgba(155,48,255,0.1);
  /* background: rgba(5,0,8,0.7);
  backdrop-filter: blur(20px); */
  transition: border-color 0.3s;
}
.navbar-inner.scrolled { border-bottom-color: rgba(155,48,255,0.25); }
 

.site-logo::after {
    content: '·';
    position: relative;
    left: -30px;
    top: -3px;
    color: var(--magenta);
    animation: dotBlink2 1.5s ease-in-out infinite;
    font-size: 33px;
}
@keyframes dotBlink2 { 0%,100%{opacity:1;} 50%{opacity:0;} }
 
.nav-links {
  display: flex; align-items: center; gap: 36px;
  list-style: none;
}
.nav-links a {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(240,234,247,0.65);
  text-decoration: none; position: relative;
  transition: color 0.3s;
}
.nav-links a::after {
  content: ''; position: absolute;
  bottom: -4px; left: 0; width: 0; height: 1px;
  background: var(--purple); transition: width 0.3s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--purple); }
.nav-links a.active::after { width: 100%; }
 
.nav-cta {
  background: transparent;
  border: 1px solid rgba(155,48,255,0.5);
  color: var(--purple) !important;
  padding: 8px 20px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background 0.3s, color 0.3s !important;
}
.nav-cta:hover { background: var(--purple) !important; color: var(--white) !important; }
.nav-cta::after { display: none !important; }
 
 
.noise-flash { position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");opacity:0;pointer-events:none;z-index:100;animation:noiseAnim 0.08s steps(2) infinite; }

.wp-block-embed iframe {
    width: 100% !important;
    height: 58vh;
}


/* CONTAINER */
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 90vw !important;
  }
}


/* HEADER */

body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all ease;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}
body.offcanvas-menu:before {
  opacity: 1;
  z-index: 99;
  visibility: visible;
}

.site-navbar {
  margin-bottom: 0px;
  z-index: 199;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.25rem 1.25rem;
}
.site-navbar .toggle-button {
  position: absolute;
  right: 0px;
}
.site-navbar .site-logo {
  margin: 0;
  padding: 0;
}
.site-navbar .site-logo a img {
  padding: 12px;
  height: 80px;
}
@media (max-width: 991.98px) {
  .site-navbar .site-logo {
    float: left;
    position: relative;
  }
}

.site-navbar .site-navigation .site-menu .has-children {
  position: relative;
}
.site-navbar .site-navigation .site-menu .has-children > a {
  position: relative;
  padding-right: 20px;
}
.site-navbar .site-navigation .site-menu .has-children > a:before {
  position: absolute;
  content: "\e313";
  font-size: 16px;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "icomoon";
}
.site-navbar .site-navigation .site-menu .has-children .dropdown {
  visibility: hidden;
  opacity: 0;
  top: 100%;
  position: absolute;
  text-align: left;
  border-top: 2px solid #89ba16;
  -webkit-box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
  padding: 0px 0;
  margin-top: 20px;
  margin-left: 0px;
  background: #fff;
  -webkit-transition: 0.2s 0s;
  -o-transition: 0.2s 0s;
  transition: 0.2s 0s;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top {
  position: absolute;
}
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown.arrow-top:before {
  display: none;
  bottom: 100%;
  left: 20%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown.arrow-top:before {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown a {
  text-transform: none;
  letter-spacing: normal;
  -webkit-transition: 0s all;
  -o-transition: 0s all;
  transition: 0s all;
  color: #000 !important;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown a.active {
  color: #89ba16 !important;
  background: #f8f9fa;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown > li {
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 200px;
}
.site-navbar .site-navigation .site-menu .has-children .dropdown > li > a {
  padding: 9px 20px;
  display: block;
}
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown
  > li
  > a:hover {
  background: #f8f9fa;
  color: #ced4da;
}
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown
  > li.has-children
  > a:before {
  content: "\e315";
  right: 20px;
}
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown
  > li.has-children
  > .dropdown,
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown
  > li.has-children
  > ul {
  left: 100%;
  top: 0;
}
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown
  > li.has-children:hover
  > a,
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown
  > li.has-children:active
  > a,
.site-navbar
  .site-navigation
  .site-menu
  .has-children
  .dropdown
  > li.has-children:focus
  > a {
  background: #f8f9fa;
  color: #ced4da;
}

.site-navbar .site-navigation .site-menu .has-children:hover,
.site-navbar .site-navigation .site-menu .has-children:focus,
.site-navbar .site-navigation .site-menu .has-children:active {
  cursor: pointer;
}
.site-navbar .site-navigation .site-menu .has-children:hover > .dropdown,
.site-navbar .site-navigation .site-menu .has-children:focus > .dropdown,
.site-navbar .site-navigation .site-menu .has-children:active > .dropdown {
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  margin-top: 0px;
  visibility: visible;
  opacity: 1;
}
@media (max-width: 991.98px) {
  .phone-nav {
    display: contents !important;
  }
}

.site-mobile-menu {
  width: 300px;
  position: fixed;
  right: 0;
  z-index: 100;
  background: #000000;
  height: calc(100vh);
  -webkit-transform: translateX(110%);
  -ms-transform: translateX(110%);
  transform: translateX(110%);
  -webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
  box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
  -webkit-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}
.offcanvas-menu .site-mobile-menu {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}
.site-mobile-menu .site-mobile-menu-header {
  width: 100%;
  float: left;
  padding-left: 20px;
  padding-right: 20px;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
  float: right;
  margin-top: 8px;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
  font-size: 30px;
  display: inline-block;
  padding-left: 10px;
  padding-right: 0px;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover {
  color: #ced4da;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo {
  float: left;
  margin-top: 10px;
  margin-left: 0px;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a {
  display: inline-block;
  text-transform: uppercase;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img {
  max-width: 70px;
}
.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover {
  text-decoration: none;
}
.site-mobile-menu .site-mobile-menu-body {
  overflow-y: auto;
  position: relative;
  padding: 100px 20px 20px 20px;
  height: 100vh;
}
.site-mobile-menu .site-nav-wrap {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
.site-mobile-menu .site-nav-wrap a {
  margin: 10px 50px;
  display: block;
  position: relative;
  color: #ffffff;
}
.site-mobile-menu .site-nav-wrap a:hover {
  color: #ffffff !important;
}
.site-mobile-menu .site-nav-wrap li {
  position: relative;
  display: block;
}
.site-mobile-menu .site-nav-wrap li a.active {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 100%;
  background-position: 0 calc(100% - 0.1em);
  color: #fff !important;
}


.site-mobile-menu .site-nav-wrap li.active > a {
  background-image: linear-gradient(currentColor, black);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 100%;
  background-position: 0 calc(100% - 0.1em);
  color: #fff !important;
}
.site-mobile-menu .site-nav-wrap .arrow-collapse {
  position: absolute;
  right: 0px;
  top: 10px;
  z-index: 20;
  width: 36px;
  height: 36px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
}
.site-mobile-menu .site-nav-wrap .arrow-collapse:hover {
  background: #f8f9fa;
}
.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
  font-size: 12px;
  z-index: 20;
  font-family: "icomoon";
  content: "\f078";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-180deg);
  -ms-transform: translate(-50%, -50%) rotate(-180deg);
  transform: translate(-50%, -50%) rotate(-180deg);
  -webkit-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.site-mobile-menu .site-nav-wrap > li {
  display: block;
  position: relative;
  float: left;
  width: 100%;
}
.site-mobile-menu .site-nav-wrap > li > a {
  font-size: 20px;
  color: #d8d8d8 !important;
  text-decoration: none !important;
  text-align: center;
}
.site-mobile-menu .site-nav-wrap > li > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.site-mobile-menu .site-nav-wrap > li > ul > li {
  display: block;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > a {
  padding-left: 40px;
  font-size: 16px;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > ul {
  padding: 0;
  margin: 0;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > ul > li {
  display: block;
}
.site-mobile-menu .site-nav-wrap > li > ul > li > ul > li > a {
  font-size: 16px;
  padding-left: 60px;
}
.site-mobile-menu .site-nav-wrap[data-class="social"] {
  float: left;
  width: 100%;
  margin-top: 30px;
  padding-bottom: 5em;
}
.site-mobile-menu .site-nav-wrap[data-class="social"] > li {
  width: auto;
}
.site-mobile-menu .site-nav-wrap[data-class="social"] > li:first-child a {
  padding-left: 15px !important;
}


/* FOOTER */
footer {
  background: #030005;
  padding: 60px 40px 40px;
  border-top: 1px solid rgba(155,48,255,0.1);
  position: relative; overflow: hidden;
}
footer::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,48,255,0.3), transparent);
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 60px; padding-bottom: 60px;
  border-bottom: 1px solid rgba(155,48,255,0.08);
  margin-bottom: 40px;
}
.footer-logo {
  font-family: 'Unbounded', sans-serif; font-weight: 900;
  font-size: 28px; color: var(--white); margin-bottom: 16px;
  display: block; letter-spacing: -0.02em;
}
.footer-logo span {
  background: linear-gradient(90deg, var(--magenta), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-brand-text {
  font-size: 11px; line-height: 1.8;
  color: rgba(240,234,247,0.3); max-width: 200px;
}
.footer-col-title {
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 20px; display: block;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-size: 12px; color: rgba(240,234,247,0.4);
  text-decoration: none; transition: color 0.3s;
  display: flex; align-items: center; gap: 8px;
}
.footer-links a::before { content: '→'; font-size: 10px; color: rgba(155,48,255,0.4); transition: color 0.3s; }
.footer-links a:hover { color: var(--white); }
.footer-links a:hover::before { color: var(--purple); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
}
.footer-copy {
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(240,234,247,0.2);
}
.footer-copy strong { color: rgba(155,48,255,0.5); }
.footer-socials { display: flex; gap: 16px; }
.social-pill {
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  padding: 6px 14px; border: 1px solid rgba(155,48,255,0.2);
  color: rgba(155,48,255,0.5); text-decoration: none;
  clip-path: polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
  transition: border-color 0.3s, color 0.3s;
}
.social-pill:hover { border-color: var(--purple); color: var(--purple); }
.footer-arabic {
  position: absolute; bottom: 20px; right: 40px;
  font-family: serif; font-size: 80px;
  color: transparent; -webkit-text-stroke: 1px rgba(155,48,255,0.04);
  pointer-events: none; user-select: none;
}


/**/

.site-menu-toggle .menu-icon {
  margin-right: 20px;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}
.site-menu-toggle .menu-icon__line {
  display: block;
  position: relative;
  background: #88888800;
  height: 2px;
  width: 36px;
  border-radius: 4px;
}
.site-menu-toggle .menu-icon__line::before,
.site-menu-toggle .menu-icon__line::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  background: #ffffff;
  transition: background 0.8s ease;
}
.site-menu-toggle .menu-icon__line::before {
  transform: translateY(-6px);
}
.site-menu-toggle .menu-icon__line::after {
  transform: translateY(6px);
}

.site-menu-toggle .menu-icon__line::before {
  animation: closedTop 0.8s backwards;
  animation-direction: reverse;
}
.site-menu-toggle .menu-icon__line::after {
  animation: closedBtm 0.8s backwards;
  animation-direction: reverse;
}
/* */
.site-menu-toggle.active .menu-icon .menu-icon__line::before {
  background: #ffffff;
  animation: openTop 0.8s forwards;
}
.site-menu-toggle.active .menu-icon .menu-icon__line::after {
  background: #ffffff;
  animation: openBtm 0.8s forwards;
}

@keyframes openTop {
  0% {
    transform: translateY(-5px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}
@keyframes closedTop {
  0% {
    transform: translateY(-5px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}
@keyframes openBtm {
  0% {
    transform: translateY(5px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(45deg);
  }
}
@keyframes closedBtm {
  0% {
    transform: translateY(5px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(45deg);
  }
}

/* GLOBAL ELEMENTS */
.corner-tl {
  position: absolute; top: 10px; left: 10px;
  width: 60px; height: 60px; z-index: 5;
}
.corner-tl::before {
  content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--purple);
}
.corner-tl::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--purple);
}
.top-breadcrumb {
  position: absolute; top: 96px; left: 60px; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(155,48,255,0.5); font-family: 'Space Mono', monospace;
}
.top-breadcrumb a { text-decoration: none; color: inherit; }
.top-breadcrumb span { color: rgba(155,48,255,0.22); }

.top-tag {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
  opacity: 0; animation: fadeUp 0.7s 0.2s forwards;
}
.top-tag-badge {
  background: rgba(155,48,255,0.12);
  border: 1px solid rgba(155,48,255,0.45);
  color: var(--purple); font-size: 9px;
  letter-spacing: 0.35em; text-transform: uppercase;
  padding: 5px 14px;
  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  font-family: 'Space Mono', monospace;
}
.top-tag-line { width: 60px; height: 1px; background: rgba(155,48,255,0.4); }


.reveal {
  opacity: 0; transform: translateY(35px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.35s; }
.reveal-d4 { transition-delay: 0.5s; }
 
/* ============================================================
   PROJECT CARDS — homepage style + bg image
============================================================ */
.projects-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px;
}



/* ============================================================
   PROJECT CARDS — homepage style + bg image
============================================================ */

.project-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(155,48,255,0.1);
  padding: 48px 40px;
  background-color: rgba(26, 0, 62, 0.3);
  transition: border-color 0.4s;
  cursor: pointer; min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* bg image — low opacity, scales up on hover */
.project-card-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0.13;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.project-card:hover .project-card-bg-img {
  opacity: 0.22;
  transform: scale(1.05);
}

/* purple/violet overlay on top of the image */
.project-card-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(155,48,255,0.05) 0%, transparent 60%);
  transition: background 0.4s;
}
.project-card:hover .project-card-overlay {
  background: linear-gradient(
    145deg,
    rgba(13,0,21,0.88) 0%,
    rgba(26,0,62,0.75) 40%,
    rgba(107,0,215,0.4) 75%,
    rgba(212,0,255,0.18) 100%
  );
}

/* Radial glow bottom-left on hover */
.project-card-glow {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at bottom left, rgba(155,48,255,0.1), transparent 65%);
  opacity: 0; transition: opacity 0.4s;
}
.project-card:hover .project-card-glow { opacity: 1; }

/* Top border sweep */
.project-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
  transform: scaleX(0); transition: transform 0.45s;
  z-index: 5;
}
.project-card:hover { border-color: rgba(155,48,255,0.4); }
.project-card:hover::before { transform: scaleX(1); }

/* Featured — spans full width */
.project-card.featured {
  grid-column: span 2;
  min-height: 400px;
}

/* Ghost number */
.project-number {
  position: absolute; top: 28px; right: 28px; z-index: 3;
  font-family: 'Unbounded', sans-serif; font-weight: 900;
  font-size: 70px; color: transparent;
  -webkit-text-stroke: 1px rgba(155,48,255,0.1);
  line-height: 1; pointer-events: none;
  transition: -webkit-text-stroke-color 0.4s;
}
.project-card:hover .project-number {
  -webkit-text-stroke-color: rgba(155,48,255,0.2);
}

/* Status pill */
.project-status {
  position: absolute; top: 0; left: 0; z-index: 4;
  background: rgba(155,48,255,0.15);
  border-right: 1px solid rgba(155,48,255,0.3);
  border-bottom: 1px solid rgba(155,48,255,0.3);
  font-size: 8px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--purple); padding: 6px 14px;
  font-family: 'Space Mono', monospace;
  display: flex; align-items: center; gap: 7px;
}
.status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--magenta);
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse { 0%,100%{opacity:1;} 50%{opacity:0.2;} }

/* Card content */
.project-card-content { position: relative; z-index: 3; }
.project-tag {
  font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 14px;
  font-family: 'Space Mono', monospace; display: block;
}
.project-name {
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(18px, 2.5vw, 28px); text-transform: uppercase;
  color: var(--white); margin-bottom: 14px; line-height: 1.1;
}
.project-desc {
  font-size: 11px; line-height: 1.85;
  color: rgba(240,234,247,0.5);
  max-width: 500px; font-family: 'Space Mono', monospace;
}

/* Arrow button */
.project-arrow {
  position: absolute; bottom: 40px; right: 40px; z-index: 4;
  width: 44px; height: 44px;
  border: 1px solid rgba(155,48,255,0.3);
  display: flex; align-items: center; justify-content: center;
  clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  transition: background 0.3s, border-color 0.3s;
}
.project-card:hover .project-arrow { background: var(--purple); border-color: var(--purple); }
.project-arrow svg { stroke: rgba(155,48,255,0.7); transition: stroke 0.3s; width: 16px; height: 16px; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.project-card:hover .project-arrow svg { stroke: var(--white); }



@keyframes fadeUp  { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .top-breadcrumb { left: 40px; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-card.featured { grid-column: span 1; min-height: 340px; }
}
@media (max-width: 640px) {
  .top-breadcrumb { left: 24px; }
}