@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

*,*:before,*:after{box-sizing:border-box;border:0 solid;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;line-height:1.5}
body{font-family:'Cairo',ui-sans-serif,system-ui,sans-serif;background-color:#0a0a0f;color:#fff;margin:0;padding:0;overflow-x:hidden}
body[dir="rtl"]{direction:rtl;text-align:right}
body[dir="ltr"]{direction:ltr;text-align:left}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto;vertical-align:middle}
button,input,select,textarea{font:inherit;color:inherit;background-color:transparent;border-radius:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}

@media(max-width:320px){html{font-size:10px}}
@media(max-width:425px){html{font-size:11px}}
@media(max-width:768px){html{font-size:13px}}
@media(max-width:1024px){html{font-size:15px}}

/* Container */
.container{width:100%;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{max-width:640px;padding:0 1.5rem}}
@media(min-width:768px){.container{max-width:768px}}
@media(min-width:1024px){.container{max-width:1024px}}
@media(min-width:1280px){.container{max-width:1280px}}
.max-w-7xl{max-width:80rem;margin:0 auto}

/* Gradient helpers */
.gradient-text{background:#152441;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-alt{background:#152441;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-btn{background:#152441}
.gradient-btn:hover{box-shadow:0 10px 15px -3px rgba(29,72,208,0.3)}

/* ============ HEADER ============ */
.site-header{position:fixed;top:0;z-index:50;width:100%;background-color:transparent;color:#fff;border-bottom:1px solid rgba(30,41,61,0);animation:slideDown .5s ease-out forwards;transition:background-color .3s,border-color .3s}
.site-header.scrolled{background-color:rgba(10,10,26,0.95);border-bottom:1px solid rgba(30,41,61,0.5);backdrop-filter:blur(10px)}
@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
@media(min-width:640px){.header-inner{padding:1rem 1.5rem}}

.logo-text{font-size:1.5rem;font-weight:700;color:#152441;-webkit-text-fill-color:#152441;transition:all .3s}
.logo-link{display:flex;align-items:center}
.logo-img{height:2rem;width:auto;display:block}

.nav-desktop{display:none;align-items:center;justify-content:space-between;width:100%}
@media(min-width:1024px){.nav-desktop{display:flex}.nav-mobile-wrap{display:none!important}}

.nav-links-list{display:flex;align-items:center;gap:2rem}
.nav-links-list a{font-size:.875rem;color:#fff;transition:color .2s}
.nav-links-list a:hover{color:#c07eff}

.nav-actions{display:flex;align-items:center;gap:.75rem}

.lang-btn{display:flex;align-items:center;gap:.25rem;background:#2a2a3a;color:#fff;border-radius:9999px;padding:.5rem 1rem;border:none;cursor:pointer;transition:background .2s;font-size:.875rem}
.lang-btn:hover{background:#3a3a4a}

.start-btn{display:flex;align-items:center;gap:.5rem;background:#152441;border-radius:9999px;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;transition:all .3s}
.start-btn:hover{box-shadow:0 10px 15px -3px rgba(29,72,208,0.3)}

/* Mobile */
.nav-mobile-wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
@media(min-width:1024px){.nav-mobile-wrap{display:none}}

.mobile-menu-btn{background:none;border:none;color:#fff;padding:.5rem;cursor:pointer;border-radius:.5rem;transition:background .2s;font-size:1.5rem}
.mobile-menu-btn:hover{background:rgba(255,255,255,0.1)}

.mobile-start-btn{background:#152441;color:#fff;border-radius:9999px;padding:.5rem 1.25rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer}

.mobile-menu{position:fixed;top:0;right:0;width:100vw;height:100vh;background:#0a0a1a;z-index:1000;flex-direction:column;padding:2rem;display:flex;transform:translateX(100%);transition:transform .3s ease-in-out;overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu nav{display:flex;flex-direction:column;gap:.75rem}
.mobile-menu nav a{font-size:.875rem;color:#fff;padding:.5rem 1rem;border-radius:.5rem;transition:all .2s}
.mobile-menu nav a:hover{background:rgba(172,75,255,0.1)}

/* ============ HERO (ASTRONAUT CINEMATIC) ============ */
.hero-section{background:#030408;width:100%;min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0}
@media(max-width:640px){.hero-section{min-height:100vh}}

/* Space horizon background (hero-bg.png) - Arc aligned with astronaut helmet */
.hero-bg-img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%; /* Centers the glowing arc directly behind the helmet crest */
  z-index:0;
  pointer-events:none;
  opacity:0.95;
}

/* Twinkling stars */
.hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-star{position:absolute;border-radius:50%;background:#fff;animation:starPulse var(--dur) infinite}
@media(max-width:640px){.hero-star:nth-child(n+41){display:none}}
@keyframes starPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.6)}}

/* Hero master stage: Reaches directly to the absolute bottom of hero */
.hero-stage{
  position:relative;
  z-index:5;
  width:min(1380px, 98vw);
  height:min(760px, 90vh);
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin:0 auto 0; /* Anchored straight to the bottom of the hero */
  pointer-events:none;
}

/* Astronaut Centerpiece: Anchored naturally down with smooth bottom gradient fade */
.hero-astronaut-wrap{
  position:absolute;
  bottom:-6rem;
  left:50%;
  transform:translateX(-50%);
  width:min(440px, 66vw);
  height:auto;
  pointer-events:none;
  z-index:5;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation:astronautEntry 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-astronaut-img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 15px 35px rgba(0,0,0,0.95));
  mask-image:linear-gradient(to bottom, #000 70%, rgba(0,0,0,0.8) 82%, rgba(0,0,0,0.2) 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 70%, rgba(0,0,0,0.8) 82%, rgba(0,0,0,0.2) 94%, transparent 100%);
  animation:astronautFloat 7s ease-in-out infinite alternate 1.5s;
}

/* Headline Behind Helmet (Z-INDEX 2) - Precisely at helmet visor & ear level */
.hero-text-layer{
  position:absolute;
  width:100%;
  left:0;
  right:0;
  bottom:55%; /* Adjusted for lowered astronaut position */
  transform:translateY(50%);
  z-index:2;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  animation:headlineEntry 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.hero-main-sentence{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(0.4rem, 1.2vw, 1rem);
  font-size:clamp(1.8rem, 3.8vw, 3.6rem);
  font-weight:900;
  line-height:1.15;
  color:#ffffff;
  text-shadow:0 0 30px rgba(255,255,255,0.5), 0 0 60px rgba(130,170,255,0.35), 0 4px 20px rgba(0,0,0,0.95);
  white-space:nowrap;
}
.hero-slot-side{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  white-space:nowrap;
}
.hero-slot-center{
  display:inline-block;
  color:#ffffff;
  padding:0 0.25rem;
  flex-shrink:0;
  white-space:nowrap;
}
body[dir="ltr"] .hero-main-sentence{
  letter-spacing:-0.02em;
}

/* Emphasized center word — back to the manual-tatweel approach for Arabic
   ("الكـــون" is now literal text again, no CSS trick needed for it).
   .hero-word-kawn kept only as a hook, no forced letter-spacing anymore. */
.hero-word-kawn{
  display:inline-block;
}

/* English: "the" stays with the start clause, "universe" moves to the end clause,
   and this invisible spacer sits between them — sized per breakpoint to roughly
   match the astronaut's width at that size, so "the" and "universe" visibly flank
   the helmet instead of being squeezed together or hidden behind it. */
.hero-kawn-spacer{
  display:inline-block;
  width:min(310px, 46vw);
  height:1px;
}
@media(max-width:1200px){
  .hero-kawn-spacer{width:min(290px, 45vw)}
}
@media(max-width:1024px){
  .hero-kawn-spacer{width:min(265px, 43vw)}
}
@media(max-width:860px){
  .hero-kawn-spacer{width:200px}
}
@media(max-width:640px){
  .hero-kawn-spacer{width:175px}
}
@media(max-width:420px){
  .hero-kawn-spacer{width:150px}
}
@media(max-width:360px){
  .hero-kawn-spacer{width:130px}
}

.hero-sub-row{
  width:100%;
  display:flex;
  justify-content:flex-end;
  padding-left:4vw;
  margin-top:0.6rem;
  animation:subHeadlineEntry 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.45s backwards;
}
/* In Arabic (RTL): sub-row sits on screen LEFT (flex-end / padding-left) under "لنصنع لك" */
/* In English (LTR): sub-row sits on screen RIGHT (flex-end / padding-right) under "to craft" */
body[dir="ltr"] .hero-sub-row{
  justify-content:flex-end;
  padding-left:0;
  padding-right:4vw;
  margin-top:1.5rem; /* extra clearance so it never collides with the main line above */
}
.hero-sub-headline{
  font-size:clamp(1.2rem, 2.2vw, 2.1rem);
  font-weight:800;
  color:#ffffff;
  text-align:left;
  text-shadow:0 0 25px rgba(255,255,255,0.4), 0 4px 18px rgba(0,0,0,0.95);
}
/* English runs noticeably longer than the Arabic equivalent at the same font size,
   which is what was causing it to overlap the line above — smaller, lighter and
   width-capped so it reads as a calm subtitle instead of a second headline. */
body[dir="ltr"] .hero-sub-headline{
  text-align:right;
  font-size:clamp(0.85rem, 1.35vw, 1.3rem);
  font-weight:600;
  line-height:1.35;
  max-width:min(360px, 60vw);
  margin-left:auto;
}

/* Bottom Interactive Area: Sits right above the marquee */
.hero-bottom-wrap{
  position:absolute;
  bottom:3.8rem;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  width:100%;
  max-width:660px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.9rem;
  padding:0.75rem 1.6rem;
  background:transparent;
  border-radius:24px;
  pointer-events:auto;
  animation:bottomEntry 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards;
}

.hero-desc-text{
  font-size:clamp(0.85rem, 1.1vw, 0.98rem);
  color:#f1f5f9;
  line-height:1.75;
  font-weight:600;
  letter-spacing:0.2px;
  text-shadow:0 1px 3px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,0.95);
  max-width:580px;
  margin:0;
}

/* Buttons tailored to Spacelab color palette (#152441 / #8b5cf6) */
.hero-cta-group{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
}

.hero-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  padding:0.65rem 1.9rem;
  position:relative;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  font-size:0.92rem;
  font-weight:700;
  color:#ffffff;
  text-decoration:none;
  background:linear-gradient(135deg, #152441 0%, #20355d 100%);
  border:1.5px solid rgba(139,147,255,0.45);
  box-shadow:0 8px 24px rgba(21,36,65,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor:pointer;
}
/* Signature corner-bracket accent — small glowing "targeting" ticks in two opposite
   corners, echoing a HUD/control-panel rather than a generic rounded pill button */
.hero-btn-primary::before,
.hero-btn-primary::after{
  content:'';
  position:absolute;
  width:9px;
  height:9px;
  border:1.5px solid #fac800;
  opacity:.85;
  pointer-events:none;
  transition:opacity .25s ease;
}
.hero-btn-primary::before{top:-1.5px;left:-1.5px;border-right:none;border-bottom:none}
.hero-btn-primary::after{bottom:-1.5px;right:-1.5px;border-left:none;border-top:none}
.hero-btn-primary:hover::before,
.hero-btn-primary:hover::after{opacity:1}
.hero-btn-primary:hover{
  background:linear-gradient(135deg, #1d325a 0%, #2c4980 100%);
  border-color:rgba(180,190,255,0.85);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(21,36,65,0.85), 0 0 22px rgba(139,147,255,0.4);
  color:#fff;
}

.hero-btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  padding:0.65rem 1.9rem;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  font-size:0.92rem;
  font-weight:700;
  color:#e2e8f0;
  text-decoration:none;
  background:rgba(20,25,45,0.75);
  border:1.5px solid rgba(255,255,255,0.2);
  box-shadow:0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor:pointer;
}
.hero-btn-outline:hover{
  background:rgba(35,42,70,0.92);
  border-color:rgba(255,255,255,0.5);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,0.65), 0 0 20px rgba(255,255,255,0.25);
  color:#fff;
}

.hero-btn-primary svg, .hero-btn-outline svg{
  width:15px;
  height:15px;
  stroke-width:2.2;
}

/* Animations */
@keyframes astronautEntry{
  from{opacity:0;transform:translate(-50%, 50px) scale(0.94)}
  to{opacity:1;transform:translate(-50%, 0) scale(1)}
}
@keyframes astronautFloat{
  0%{transform:translateY(0px)}
  100%{transform:translateY(-8px)}
}
@keyframes headlineEntry{
  from{opacity:0;transform:translateY(calc(50% + 25px)) scale(0.97);filter:blur(6px)}
  to{opacity:1;transform:translateY(50%) scale(1);filter:blur(0)}
}
@keyframes subHeadlineEntry{
  from{opacity:0;transform:translateX(-25px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes bottomEntry{
  from{opacity:0;transform:translate(-50%, 25px)}
  to{opacity:1;transform:translate(-50%, 0)}
}

/* Partners marquee at bottom (The Line / Marquee) */
.hero-bottom-marquee{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:15;
  overflow:hidden;
  padding:0.75rem 0;
  border-top:1px solid rgba(255,255,255,.1);
  background:linear-gradient(to top, rgba(3,4,8,0.98), rgba(3,4,8,0.7));
}
.hero-marquee-track{display:flex;gap:2.5rem;width:max-content;animation:marqueeScroll 30s linear infinite}
.hero-marquee-item{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.5);font-size:.82rem;font-weight:500;white-space:nowrap;flex-shrink:0}
.hero-marquee-item svg{opacity:.55;flex-shrink:0}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============ COMPREHENSIVE RESPONSIVE BREAKPOINTS ============ */
@media(max-width:1200px){
  .hero-bg-img{object-position:center 48%}
  .hero-stage{height:min(730px, 88vh);margin-bottom:0}
  .hero-astronaut-wrap{width:min(410px, 64vw);bottom:-5.2rem}
  .hero-main-sentence{font-size:clamp(1.9rem, 3.8vw, 3.4rem)}
  .hero-text-layer{bottom:55%}
  .hero-bottom-wrap{bottom:3.6rem}
}

@media(max-width:1024px){
  .hero-bg-img{object-position:center 48%}
  .hero-stage{height:min(700px, 86vh);margin-bottom:0}
  .hero-astronaut-wrap{width:min(380px, 62vw);bottom:-4.6rem}
  .hero-main-sentence{font-size:clamp(1.75rem, 3.4vw, 3rem)}
  .hero-text-layer{bottom:55%}
  .hero-sub-headline{font-size:1.5rem}
  body[dir="ltr"] .hero-sub-headline{font-size:1.05rem}
  .hero-bottom-wrap{bottom:3.5rem}
}

@media(max-width:860px){
  .hero-bg-img{object-position:center 48%}
  .hero-stage{height:min(680px, 88vh);margin-bottom:0}
  .hero-astronaut-wrap{width:290px;bottom:-3.8rem}
  .hero-main-sentence{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    white-space:nowrap;
    width:100%;
    padding:0 1rem;
    font-size:clamp(1.25rem, 3.8vw, 1.85rem);
    gap:clamp(0.4rem, 1.5vw, 0.8rem);
  }
  .hero-sub-row{
    justify-content:flex-end;
    padding-left:2.5rem;
    margin-top:0.4rem;
  }
  body[dir="ltr"] .hero-sub-row{
    justify-content:flex-end;
    padding-left:0;
    padding-right:2.5rem;
  }
  .hero-sub-headline{
    text-align:left;
    font-size:clamp(0.95rem, 2.5vw, 1.3rem);
  }
  body[dir="ltr"] .hero-sub-headline{
    text-align:right;
    font-size:clamp(0.72rem, 1.7vw, 0.95rem);
  }
  .hero-text-layer{bottom:60%}
  .hero-bottom-wrap{
    bottom:3.4rem;
    gap:0.75rem;
    max-width:92%;
    padding:0.6rem 1rem;
  }
  .hero-desc-text{font-size:0.82rem;line-height:1.6}
}

@media(max-width:640px){
  .hero-bg-img{object-position:center 48%}
  .hero-stage{height:min(640px, 90vh);margin-bottom:0}
  .hero-astronaut-wrap{width:250px;bottom:-3.5rem}
  .hero-main-sentence{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    white-space:nowrap;
    width:100%;
    padding:0 0.5rem;
    font-size:clamp(1.05rem, 3.6vw, 1.4rem);
    gap:0.35rem;
  }
  .hero-sub-row{
    justify-content:flex-end;
    padding-left:1.5rem;
    margin-top:0.35rem;
  }
  body[dir="ltr"] .hero-sub-row{
    justify-content:flex-end;
    padding-left:0;
    padding-right:1.5rem;
  }
  .hero-sub-headline{
    text-align:left;
    font-size:clamp(0.85rem, 2.8vw, 1.1rem);
  }
  body[dir="ltr"] .hero-sub-headline{
    text-align:right;
    font-size:clamp(0.65rem, 1.9vw, 0.82rem);
  }
  .hero-text-layer{bottom:56%}
  .hero-bottom-wrap{
    bottom:3.3rem;
    padding:0.5rem 0.8rem;
    gap:0.65rem;
  }
  .hero-desc-text{font-size:0.78rem;line-height:1.5}
  .hero-cta-group{gap:0.6rem}
  .hero-btn-primary, .hero-btn-outline{
    padding:0.5rem 1.3rem;
    font-size:0.82rem;
  }
}

@media(max-width:420px){
  .hero-bg-img{object-position:center 48%}
  .hero-stage{height:min(600px, 90vh);margin-bottom:0}
  .hero-astronaut-wrap{width:220px;bottom:-2.8rem}
  .hero-main-sentence{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    white-space:nowrap;
    width:100%;
    padding:0 0.35rem;
    font-size:clamp(0.88rem, 3.4vw, 1.1rem);
    gap:0.25rem;
  }
  .hero-sub-row{
    justify-content:flex-end;
    padding-left:0.75rem;
    margin-top:0.3rem;
  }
  body[dir="ltr"] .hero-sub-row{
    justify-content:flex-end;
    padding-left:0;
    padding-right:0.75rem;
  }
  .hero-sub-headline{
    text-align:left;
    font-size:clamp(0.78rem, 3vw, 0.95rem);
  }
  body[dir="ltr"] .hero-sub-headline{
    text-align:right;
    font-size:clamp(0.6rem, 2vw, 0.72rem);
  }
  .hero-text-layer{bottom:56%}
  .hero-bottom-wrap{
    bottom:3.2rem;
    padding:0.4rem 0.5rem;
    gap:0.55rem;
  }
  .hero-desc-text{font-size:0.74rem;line-height:1.45}
  .hero-btn-primary, .hero-btn-outline{
    padding:0.45rem 1.1rem;
    font-size:0.78rem;
  }
}

@media(max-width:360px){
  .hero-bg-img{object-position:center 48%}
  .hero-stage{height:min(560px, 91vh);margin-bottom:0}
  .hero-astronaut-wrap{width:220px;bottom:-1rem}
  .hero-main-sentence{
    font-size:0.82rem;
    padding:0 0.2rem;
  }
  .hero-sub-headline{font-size:0.75rem}
  body[dir="ltr"] .hero-sub-headline{font-size:0.58rem}
  .hero-text-layer{bottom:70%}
  .hero-bottom-wrap{bottom:3rem}
}

/* ============ ORBIT DIVIDER (signature motif) ============ */
.orbit-divider{
  position:relative;
  width:100%;
  height:36px;
  background:#0A0A0F;
  overflow:visible;
  pointer-events:none;
}
.orbit-divider svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.orbit-divider-path{
  fill:none;
  stroke:rgba(139,147,255,0.35);
  stroke-width:1.5;
  stroke-dasharray:4 6;
}
.orbit-divider-dot{
  position:absolute;
  top:18px;
  left:12%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fac800;
  box-shadow:0 0 8px 2px rgba(250,200,0,0.7);
  animation:orbitDividerTravel 9s linear infinite;
}
@keyframes orbitDividerTravel{
  0%{left:0%; top:24px}
  25%{top:4px}
  50%{left:50%; top:22px}
  75%{top:8px}
  100%{left:100%; top:14px}
}
@media(max-width:640px){.orbit-divider{height:22px}}

/* ============ PARTNERS ============ */
.hero-partners{position:relative;z-index:10;padding:3rem 0 4rem;background:transparent}

.section-tag{text-align:center;margin-bottom:1rem}
.section-tag-label{display:inline-block;padding:.625rem 1.25rem;border:1px solid rgba(250,200,0,0.5);border-radius:9999px;background:rgba(255,255,255,0.05);backdrop-filter:blur(4px);font-size:.875rem;font-weight:600;color:#fac800;letter-spacing:.05em;text-transform:uppercase}
@media(min-width:640px){.section-tag-label{background:rgba(255,255,255,0.1)}}

.section-heading{text-align:center;margin-bottom:1rem}
.section-heading h2{font-size:1.875rem;font-weight:700;color:#fff;line-height:1.25}
@media(min-width:640px){.section-heading h2{font-size:2.25rem}}
@media(min-width:768px){.section-heading h2{font-size:3rem}}

.section-desc{text-align:center;max-width:48rem;margin:0 auto 2.5rem;color:#99a1af;font-size:.875rem;line-height:1.625}
@media(min-width:640px){.section-desc{font-size:1rem}}

.partners-track-wrap{overflow:hidden;width:100%;margin-top:1.5rem}
.partners-track{display:flex;gap:2rem;animation:scrollP 30s linear infinite;white-space:nowrap;width:max-content}
.partner-logo-item{flex-shrink:0;display:flex;align-items:center;gap:.625rem;padding:.75rem 1.5rem;background:rgba(29,41,61,0.5);border:1px solid rgba(49,65,88,0.5);border-radius:.75rem;font-size:.9rem;font-weight:500;color:#99a1af;transition:all .3s;cursor:default}
.partner-logo-item svg{flex-shrink:0;opacity:.7;transition:opacity .3s}
.partner-logo-item:hover{background:rgba(49,65,88,0.7);color:#fff;border-color:rgba(139,92,246,0.3)}
.partner-logo-item:hover svg{opacity:1}
@keyframes scrollP{0%{transform:translateX(0)}to{transform:translateX(25%)}}
@media(max-width:640px){.partner-logo-item{padding:.5rem 1rem;gap:.4rem;font-size:.8rem}.partner-logo-item svg{width:22px;height:22px}.partners-track{gap:1rem}.hero-partners{padding:1rem 0 2rem}.partners-track-wrap{margin-top:1rem}.section-heading{margin-bottom:.5rem}.section-desc{margin-bottom:1.5rem}}

/* ============ WHY CHOOSE US ============ */
.whychoose-section{background:#0A0A0F;padding:4rem 0;position:relative;overflow:hidden;min-height:auto}
@media(max-width:640px){.whychoose-section{padding:2.5rem 0}.wc-blur-1,.wc-blur-2{width:12rem;height:12rem}}
.wc-blurs{position:absolute;inset:0;pointer-events:none}
.wc-blur-1{position:absolute;top:5rem;left:5rem;width:24rem;height:24rem;background:rgba(37,99,235,0.2);border-radius:50%;filter:blur(3rem)}
.wc-blur-2{position:absolute;bottom:5rem;right:5rem;width:24rem;height:24rem;background:rgba(147,51,234,0.2);border-radius:50%;filter:blur(3rem)}

.wc-desktop{display:none}
@media(min-width:1024px){.wc-desktop{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;text-align:start}.wc-mobile{display:none!important}}
.wc-mobile{display:block;text-align:start}

.wc-badge{display:inline-block;padding:.5rem 1rem;background:rgba(30,41,59,0.7);border-radius:9999px;font-size:.75rem;color:#cbd5e1;margin-bottom:1.5rem;border:1px solid rgba(51,65,85,1)}
.wc-card-bg{border-radius:1.5rem;padding:3rem;border:1px solid rgba(51,65,85,0.5);box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);position:relative;overflow:hidden;background-color:rgba(15,23,42,0.4);backdrop-filter:blur(4px)}
@media(max-width:1023px){.wc-card-bg{padding:1.5rem;border-radius:1.5rem}}

.wc-big-title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:1.5rem;line-height:1.25;text-align:start}
@media(min-width:768px){.wc-big-title{font-size:3rem}}
@media(max-width:1023px){.wc-big-title{font-size:2rem}}
.wc-big-desc{color:#94a3b8;font-size:1rem;line-height:1.625;margin-bottom:2.5rem;text-align:start}
@media(max-width:1023px){.wc-big-desc{font-size:.875rem}}

.wc-cta-btn{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2.1rem;background:#152441;color:#fff;font-weight:600;clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);position:relative;font-size:1rem;transition:all .3s;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);border:1.5px solid rgba(139,147,255,0.35)}
.wc-cta-btn::before,.wc-cta-btn::after{content:'';position:absolute;width:9px;height:9px;border:1.5px solid #fac800;opacity:.85;pointer-events:none}
.wc-cta-btn::before{top:-1.5px;left:-1.5px;border-right:none;border-bottom:none}
.wc-cta-btn::after{bottom:-1.5px;right:-1.5px;border-left:none;border-top:none}
.wc-cta-btn:hover{box-shadow:0 20px 25px -5px rgba(21,36,65,0.5)}

.wc-title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:1.5rem;line-height:1.25;text-align:start}
@media(min-width:768px){.wc-title{font-size:3rem}}
@media(max-width:1023px){.wc-title{font-size:2rem}}
.wc-desc{color:#94a3b8;font-size:1rem;line-height:1.625;margin-bottom:2.5rem;text-align:start}
@media(max-width:1023px){.wc-desc{font-size:.875rem}}

.wc-features{display:flex;flex-direction:column;gap:1.5rem;text-align:start}
.wc-feature-card{border-radius:1rem;padding:1.5rem;border:1px solid rgba(51,65,85,0.5);transition:all .3s;background:transparent;backdrop-filter:blur(4px)}
.wc-feature-card:hover{border-color:rgba(59,130,246,0.5)}
.wc-feature-inner{display:flex;align-items:flex-start;gap:1.25rem}
.wc-icon-box{flex-shrink:0;width:3rem;height:3rem;background:#facc15;border-radius:.75rem;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.wc-feature-card h3{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:.75rem;text-align:start}
@media(max-width:1023px){.wc-feature-card h3{font-size:1.125rem}}
.wc-feature-card p{color:#94a3b8;font-size:.875rem;line-height:1.625;text-align:start}

.wc-left{order:1}
@media(min-width:1024px){.wc-left{order:1}}
.wc-right{order:2}
@media(min-width:1024px){.wc-right{order:2}}

/* ============ STATS ============ */
.stats-bar{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;min-height:6rem;padding:1rem;background:#250858;color:#fff;gap:.5rem}
.stats-bar-item{text-align:center;padding:.25rem .5rem}
.stats-bar-value{font-size:1.5rem;font-weight:700}
@media(min-width:640px){.stats-bar-value{font-size:1.875rem}}
@media(min-width:768px){.stats-bar-value{font-size:2.25rem}}
.stats-bar-label{font-size:.75rem;font-weight:700}
@media(min-width:640px){.stats-bar-label{font-size:.875rem}}
@media(min-width:768px){.stats-bar-label{font-size:1rem}}
.stats-bar-divider{width:1px;height:3rem;background:rgba(255,255,255,0.3);margin:0 .25rem}
@media(max-width:640px){.stats-bar{padding:.75rem .5rem;gap:.25rem}.stats-bar-item{flex:1 1 40%;min-width:0}.stats-bar-divider{display:none}}

/* ============ SERVICES ============ */
.services-section{background:#0a0a0f;padding:5rem 0;position:relative;overflow:hidden}
@media(max-width:640px){.services-section{padding:3rem 0}}

.svc-label{color:#6b7280;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}
.svc-heading{font-size:2.25rem;font-weight:700;color:#fff;margin-bottom:.75rem;line-height:1.25}
@media(min-width:768px){.svc-heading{font-size:3rem}}
.svc-heading .gradient-text{background:linear-gradient(to right,#3B82F6,#8B5CF6,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.svc-desc{color:#6b7280;font-size:.875rem;max-width:48rem;margin:0 auto;line-height:1.625}

@keyframes slideInFromRight{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.svc-animate{animation:.8s ease-out forwards slideInFromRight}

/* Desktop grid (hidden on mobile) */
.svc-desktop-only{display:none}
@media(min-width:768px){.svc-desktop-only{display:block}.svc-mobile-only{display:none!important}}
/* Mobile swiper (hidden on desktop) */
.svc-mobile-only{display:block}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;position:relative;z-index:10}

.svc-card{position:relative;border-radius:1rem;padding:1.5rem;overflow:hidden;text-align:start;transition:transform .3s}
.svc-card:hover{transform:scale(1.02)}

.svc-card-content{position:relative;z-index:10;display:flex;flex-direction:column;height:100%}
.svc-card h3{color:#fff;font-size:1.125rem;font-weight:700;margin-bottom:.75rem;line-height:1.25}
.svc-card p{color:rgba(255,255,255,0.8);font-size:.875rem;margin-bottom:1.25rem;line-height:1.625;flex-grow:1}
.svc-link{color:#fff;font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:.5rem;transition:all .3s;margin-top:auto}
.svc-link:hover{gap:.75rem}

/* Swiper pagination dots */
.svc-pagination{text-align:center;margin-top:1rem}
.svc-pagination .swiper-pagination-bullet{background:rgba(255,255,255,0.3);opacity:1;width:8px;height:8px;margin:0 4px!important}
.svc-pagination .swiper-pagination-bullet-active{background:#152441}

.blur-abs{position:absolute;opacity:.15;z-index:0;pointer-events:none}
.blur-abs.tr{top:10%;right:-5%;width:400px}
.blur-abs.bl{bottom:10%;left:-5%;width:400px}

/* ============ METHODOLOGY ============ */
.method-section{background:#0a0a0f;padding:5rem 0;position:relative;overflow:hidden;min-height:auto;text-align:start}
@media(max-width:640px){.method-section{padding:3rem 0}.method-subdesc{font-size:.9rem}}
.method-rocket{position:absolute;left:0;top:0;z-index:1;max-width:300px;pointer-events:none}
.method-blur-1{position:absolute;left:0;top:0;z-index:2;opacity:.5;pointer-events:none}
.method-blur-2{position:absolute;right:0;top:0;z-index:2;opacity:.5;pointer-events:none}

.method-badge{display:inline-block;padding:.5rem 1rem;border-radius:9999px;border:1px solid rgba(55,65,81,1);color:#d1d5db;font-size:.875rem;margin-bottom:1.5rem}
.method-heading{font-size:2.5rem;font-weight:700;margin-bottom:1.5rem;line-height:1.3}
@media(min-width:768px){.method-heading{font-size:3rem}}
.method-subdesc{color:#9ca3af;font-size:1.125rem;max-width:48rem;margin:0 auto;line-height:1.625}

.method-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:64rem;margin:0 auto}
@media(min-width:768px){.method-grid{grid-template-columns:repeat(2,1fr)}}

.method-card{display:flex;align-items:center;gap:1rem;background:#141529;border-radius:.75rem;padding:1.25rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}
.method-num{flex-shrink:0;width:3rem;height:3rem;background:#cca63c;border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:700}
.method-card-text{flex:1}
.method-card h3{color:#fff;font-size:1.25rem;font-weight:600;margin-bottom:.25rem}
.method-card p{color:#fff;font-size:.875rem;line-height:1.4}

/* ============ PORTFOLIO ============ */
.portfolio-section{background:#000;color:#fff;padding:2rem 1rem;overflow:hidden;position:relative;text-align:start}
@media(min-width:640px){.portfolio-section{padding:4rem 1rem}}
@media(max-width:640px){.port-title{font-size:1.5rem}.port-desc{font-size:.875rem}}
.port-light{position:absolute;right:20%;z-index:0;pointer-events:none;opacity:.6}

.port-desktop{display:none}
@media(min-width:1024px){.port-desktop{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.port-mobile{display:none!important}}
.port-mobile{display:block}

.port-images-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.port-img-card{border-radius:1.5rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
.port-aspect-tall{aspect-ratio:4/5}
.port-aspect-wide{aspect-ratio:4/3}
.port-img-bg{width:100%;height:100%;background:linear-gradient(to bottom right,#1f2937,#111827)}

.port-text-panel{display:flex;flex-direction:column;justify-content:center;padding-inline-start:2rem}
.port-text-inner{padding:2rem;display:flex;flex-direction:column;gap:1.5rem}
.port-label{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#e5e7eb;border-bottom:2px solid #eab308;display:inline-block;padding-bottom:.25rem}
.port-title{font-size:2rem;font-weight:700;line-height:1.25}
@media(min-width:1280px){.port-title{font-size:2.5rem}}
.port-desc{color:#9ca3af;font-size:1rem;line-height:1.625}
.port-btn{display:inline-flex;align-items:center;gap:.75rem;padding:.75rem 1.6rem;background:#152441;clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);position:relative;color:#fff;font-weight:600;font-size:.875rem;transition:all .3s;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);border:1.5px solid rgba(139,147,255,0.35)}
.port-btn::before,.port-btn::after{content:'';position:absolute;width:7px;height:7px;border:1.5px solid #fac800;opacity:.85;pointer-events:none}
.port-btn::before{top:-1.5px;left:-1.5px;border-right:none;border-bottom:none}
.port-btn::after{bottom:-1.5px;right:-1.5px;border-left:none;border-top:none}
.port-btn:hover{transform:scale(1.05);box-shadow:0 20px 25px -5px rgba(0,0,0,0.25)}

.port-mobile-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}
.port-mobile-slide{flex-shrink:0;width:85%;scroll-snap-align:start}

/* Portfolio/Projects Swiper pagination */
.port-pagination .swiper-pagination-bullet,.proj-pagination .swiper-pagination-bullet{background:rgba(255,255,255,0.3);opacity:1;width:8px;height:8px;margin:0 4px!important}
.port-pagination .swiper-pagination-bullet-active,.proj-pagination .swiper-pagination-bullet-active{background:#152441}

/* Projects desktop/mobile toggle */
.proj-desktop-only{display:none}
@media(min-width:768px){.proj-desktop-only{display:block}.proj-mobile-only{display:none!important}}
.proj-mobile-only{display:block}

/* ============ CONTACT ============ */
.contact-section{background:#0a0a0f;padding:2rem 1rem;position:relative;overflow:visible;text-align:start;min-height:auto;display:flex;align-items:center}
@media(max-width:640px){.contact-section{padding:2rem .75rem}.contact-form-card{padding:1rem 1.25rem}.contact-title{font-size:1.25rem}}
@media(min-width:640px){.contact-section{padding:3rem 1.5rem}}
@media(min-width:768px){.contact-section{padding:4rem 2rem}}
.contact-star{position:absolute;width:7.5rem;top:2.5rem;left:2.5rem;opacity:.8;pointer-events:none}

.contact-layout{display:flex;flex-direction:column;gap:1.5rem;max-width:100%;margin:0 auto;width:100%}
@media(min-width:768px){.contact-layout{flex-direction:row;gap:1.5rem}}

.contact-img-side{display:flex;justify-content:center;width:100%}
@media(min-width:768px){.contact-img-side{width:50%;justify-content:flex-end}}
.contact-img-wrap{position:relative;width:100%;max-width:480px;border-radius:1rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
.contact-img-wrap>img:first-child{width:100%;height:100%;object-fit:cover}
.contact-img-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:10;pointer-events:none}

.contact-form-side{display:flex;justify-content:center;width:100%}
@media(min-width:768px){.contact-form-side{width:50%;justify-content:flex-start}}
.contact-form-card{width:100%;max-width:760px;border-radius:1rem;padding:1.5rem 2rem;background:linear-gradient(to bottom right,rgba(255,255,255,0.03),rgba(255,255,255,0.06));border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(12px);box-shadow:0 20px 25px -5px rgba(0,0,0,0.1);display:flex;flex-direction:column;justify-content:center}

.contact-label{font-size:.75rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.contact-title{font-size:1.5rem;font-weight:600;color:#fff;line-height:1.3;margin-bottom:1.5rem}
@media(min-width:640px){.contact-title{font-size:1.875rem}}

.contact-form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.contact-form-grid{grid-template-columns:1fr 1fr}}
.form-group-full{grid-column:1/-1}

.input-icon-wrap{position:relative}
.input-icon-wrap>svg:first-child{position:absolute;inset-inline-start:.75rem;top:50%;transform:translateY(-50%)}
.input-icon-wrap input,.input-icon-wrap select{width:100%;padding:.5rem .75rem;padding-inline-start:2.25rem;background:#0f1113;border:1px solid rgba(55,65,81,1);border-radius:9999px;color:#fff;font-size:.875rem;transition:border-color .3s,box-shadow .3s;appearance:none}
.input-icon-wrap input::placeholder{color:#9ca3af}
.input-icon-wrap input:focus,.input-icon-wrap select:focus{outline:none;border-color:rgba(142,45,226,0.5);box-shadow:0 0 0 2px rgba(142,45,226,0.3)}
.select-arrow{position:absolute;inset-inline-end:.75rem;top:50%;transform:translateY(-50%);pointer-events:none}
.input-icon-wrap select option{background:#0a0a0f;color:#fff}

.btn-submit{width:100%;padding:.85rem;background:#152441;border:1.5px solid rgba(139,147,255,0.35);clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);position:relative;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.btn-submit::before,.btn-submit::after{content:'';position:absolute;width:8px;height:8px;border:1.5px solid #fac800;opacity:.85;pointer-events:none}
.btn-submit::before{top:-1.5px;left:-1.5px;border-right:none;border-bottom:none}
.btn-submit::after{bottom:-1.5px;right:-1.5px;border-left:none;border-top:none}
.btn-submit:hover{transform:scale(1.05);box-shadow:0 15px 40px rgba(21,36,65,0.4)}

.form-success{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.4);border-radius:.75rem;padding:1rem;text-align:center;margin-bottom:1rem;color:#22c55e}
.form-error{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.4);border-radius:.75rem;padding:1rem;text-align:center;margin-bottom:1rem;color:#ef4444}

/* ============ FOOTER ============ */
.site-footer{background:#0A0A0F;color:#fff;padding:2rem;position:relative}
@media(max-width:640px){.site-footer{padding:1.5rem 1rem}.footer-grid{gap:1.5rem}}
.footer-inner{max-width:80rem;margin:0 auto;position:relative;z-index:20}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 1.5fr}}

.footer-brand p{color:#99a1af;font-size:.875rem;line-height:1.625;margin-top:1rem;margin-bottom:1.5rem}
.footer-social{display:flex;gap:.75rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:rgba(29,41,61,0.5);border:1px solid rgba(49,65,88,0.5);border-radius:.5rem;color:#99a1af;font-size:1rem;transition:all .3s}
.footer-social a:hover{background:rgba(49,65,88,1);color:#fff;transform:translateY(-3px)}

.footer-col h4{font-size:1rem;font-weight:700;margin-bottom:1rem}
.footer-col ul li{margin-bottom:.5rem}
.footer-col ul li a{color:#99a1af;font-size:.875rem;transition:color .2s}
.footer-col ul li a:hover{color:#c07eff}

.footer-contact-info{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem}
.footer-contact-info a{color:#99a1af;font-size:.875rem;display:flex;align-items:center;gap:.5rem;transition:color .2s}
.footer-contact-info a:hover{color:#c07eff}

.footer-countries{margin-top:1.2rem}
.footer-countries p{color:#cbd5e1;font-size:.8rem;margin-bottom:.6rem;font-weight:600}
.country-flags{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.country-flags .fi{
  width:28px;
  height:21px;
  line-height:21px;
  border-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.25);
  display:inline-block;
  flex-shrink:0;
  transition:all .2s ease;
}
.country-flags .fi:hover{
  transform:scale(1.15);
  border-color:rgba(192,126,255,0.8);
  box-shadow:0 4px 12px rgba(139,92,246,0.4);
}

.footer-bottom{border-top:1px solid rgba(30,41,61,0.5);padding-top:1.5rem;margin-top:1.5rem;text-align:center}
.footer-bottom p{font-size:.75rem;color:#6a7282}

/* ============ PROJECT SHOWCASE (marquee) ============ */
.marquee-wrap{overflow:hidden;position:relative;width:100%}
.marquee-track{display:flex;gap:1.5rem;width:max-content}
.marquee-track:hover{animation-play-state:paused}
.marquee-track{animation:marqueeRTL 40s linear infinite}
@keyframes marqueeRTL{0%{transform:translateX(0)}100%{transform:translateX(50%)}}

/* ============ BLOG ============ */
.blog-section{background:#0a0a0f;padding:5rem 0;position:relative}
@media(max-width:640px){.blog-section{padding:3rem 0}.blog-card-title{font-size:.95rem}.blog-card-excerpt{font-size:.8rem}}

/* Blog desktop/mobile toggle */
.blog-desktop-only{display:none}
@media(min-width:768px){.blog-desktop-only{display:block}.blog-mobile-only{display:none!important}}
.blog-mobile-only{display:block}

.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

/* Blog Swiper pagination */
.blog-pagination .swiper-pagination-bullet{background:rgba(255,255,255,0.3);opacity:1;width:8px;height:8px;margin:0 4px!important}
.blog-pagination .swiper-pagination-bullet-active{background:#a855f7}

.blog-card{
    background:#141520;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:1.125rem;
    overflow:hidden;
    transition:all .35s cubic-bezier(0.16, 1, 0.3, 1);
    display:flex;
    flex-direction:column;
    box-shadow:0 10px 30px -10px rgba(0,0,0,0.6);
    position:relative;
    height:100%;
}
.blog-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -10px rgba(139,92,246,0.2), 0 0 25px rgba(139,92,246,0.15);
    border-color:rgba(139,92,246,0.5);
}

.blog-card-img{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#0d0e15;
}
.blog-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}

.blog-card-body{
    padding:1.15rem 1.25rem 1.25rem;
    display:flex;
    flex-direction:column;
    flex-grow:1;
    gap:.5rem;
}
.blog-card-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom:.25rem;
}
.blog-category{
    font-size:.72rem;
    font-weight:600;
    color:#a855f7;
    background:rgba(168,85,247,0.12);
    border:1px solid rgba(168,85,247,0.25);
    padding:.18rem .65rem;
    border-radius:9999px;
    display:inline-block;
}
.blog-date{
    font-size:.75rem;
    color:#9ca3af;
    font-weight:500;
}

.blog-card-title{
    font-size:1.05rem;
    font-weight:700;
    color:#fff;
    line-height:1.45;
    margin-bottom:.25rem;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    transition:color .2s;
}
.blog-card:hover .blog-card-title{color:#a78bfa}
.blog-card-excerpt{
    font-size:.85rem;
    color:#9ca3af;
    line-height:1.6;
    margin-bottom:.75rem;
    flex-grow:1;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.blog-read-more{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.85rem;
    font-weight:600;
    color:#fac800;
    transition:all .3s ease;
    margin-top:auto;
    text-decoration:none;
}
.blog-read-more:hover{
    gap:.65rem;
    color:#fde047;
}

/* ============ ANIMATIONS ============ */
.fade-in-up{opacity:0;transform:translateY(60px);transition:all .8s ease-out}
.fade-in-up.visible{opacity:1;transform:translateY(0)}

/* ============ DEDICATED PAGES (portfolio.php, blog.php) ============ */
.page-hero{background:linear-gradient(to bottom,#0f0f1a,#0a0a0f);padding:7.5rem 0 3.5rem;text-align:center;position:relative}
@media(max-width:640px){.page-hero{padding:5.5rem 0 2rem}}

.page-content-section{background:#0a0a0f;padding:2rem 0 5rem}
@media(max-width:640px){.page-content-section{padding:1.5rem 0 3rem}}

.page-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.page-grid{grid-template-columns:repeat(2,1fr)}}

.page-grid-blog{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.page-grid-blog{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.page-grid-blog{grid-template-columns:repeat(3,1fr)}}

/* Modern Pill Breadcrumb */
.post-back{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem 1.25rem;
  border-radius:9999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:#cbd5e1;
  font-size:.875rem;
  font-weight:600;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 15px rgba(0,0,0,0.3);
  transition:all .25s ease;
  margin-bottom:1.5rem;
}
.post-back svg{
  transition:transform .25s ease;
  width:16px;
  height:16px;
}
body[dir="rtl"] .post-back svg{
  transform:rotate(180deg);
}
.post-back:hover{
  color:#fff;
  background:rgba(139,92,246,0.15);
  border-color:rgba(139,92,246,0.4);
  box-shadow:0 6px 20px rgba(139,92,246,0.25);
  transform:translateY(-1px);
}
body[dir="rtl"] .post-back:hover svg{
  transform:rotate(180deg) translateX(3px);
}
body[dir="ltr"] .post-back:hover svg{
  transform:translateX(-3px);
}

/* ============ PROJECT DETAIL (project.php) ============ */
.proj-hero{background:linear-gradient(to bottom,#0f0f1a,#0a0a0f);padding:7.5rem 0 3.5rem;position:relative}
@media(max-width:640px){.proj-hero{padding:5.5rem 0 2rem}}
.proj-hero-content{display:flex;flex-direction:column;gap:2.5rem;align-items:center}
@media(min-width:768px){.proj-hero-content{flex-direction:row;gap:3rem;align-items:center}}
.proj-hero-text{flex:1}
.proj-hero-title{font-size:2.25rem;font-weight:800;color:#fff;line-height:1.3;margin-bottom:1.25rem}
@media(min-width:768px){.proj-hero-title{font-size:3rem}}
.proj-hero-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.proj-tag{padding:.35rem 1rem;border-radius:9999px;font-size:.8rem;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;border:1px solid rgba(139,92,246,0.3)}
.proj-tag-featured{background:rgba(250,200,0,0.15);color:#fac800;border-color:rgba(250,200,0,0.3)}
.proj-hero-img{flex:1;max-width:500px;border-radius:1rem;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,0.4)}
.proj-hero-img img{width:100%;height:auto;display:block}

.proj-info-section{background:#0a0a0f;padding:2.5rem 0;border-top:1px solid rgba(49,65,88,0.3);border-bottom:1px solid rgba(49,65,88,0.3)}
.proj-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media(min-width:640px){.proj-info-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.proj-info-grid{grid-template-columns:repeat(5,1fr)}}
.proj-info-item{text-align:center}
.proj-info-label{display:block;font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.proj-info-value{display:block;font-size:1rem;font-weight:600;color:#fff}
.proj-info-link{display:block;font-size:1rem;font-weight:600;color:#a78bfa;transition:color .3s}
.proj-info-link:hover{color:#c4b5fd}

/* Project section titles */
.proj-section-title{font-size:1.35rem;font-weight:700;color:#fff;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem}
.proj-section-title svg{flex-shrink:0;color:#a78bfa}

/* Services & Technologies tags */
.proj-services-section,.proj-tech-section{background:#0a0a0f;padding:2rem 0}
.proj-tags-grid{display:flex;flex-wrap:wrap;gap:.75rem}
.proj-service-tag{padding:.5rem 1.25rem;border-radius:9999px;font-size:.85rem;font-weight:500;background:rgba(139,92,246,0.1);color:#c4b5fd;border:1px solid rgba(139,92,246,0.25);transition:all .3s}
.proj-service-tag:hover{background:rgba(139,92,246,0.2);border-color:rgba(139,92,246,0.4)}
.proj-tech-tag{padding:.5rem 1.25rem;border-radius:9999px;font-size:.85rem;font-weight:500;background:rgba(59,130,246,0.1);color:#93c5fd;border:1px solid rgba(59,130,246,0.25);transition:all .3s}
.proj-tech-tag:hover{background:rgba(59,130,246,0.2);border-color:rgba(59,130,246,0.4)}

/* Challenge & Solution */
.proj-cs-section{background:#0a0a0f;padding:2.5rem 0}
.proj-cs-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.proj-cs-grid{grid-template-columns:1fr 1fr}}
.proj-cs-card{padding:2rem;border-radius:1rem;border:1px solid rgba(49,65,88,0.3);position:relative;overflow:hidden}
.proj-cs-challenge{background:rgba(245,158,11,0.04);border-color:rgba(245,158,11,0.2)}
.proj-cs-solution{background:rgba(34,197,94,0.04);border-color:rgba(34,197,94,0.2)}
.proj-cs-icon{margin-bottom:1rem}
.proj-cs-card h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:1rem}
.proj-cs-card p{font-size:.95rem;line-height:1.9;color:#d1d5db}

.proj-desc-section{background:#0a0a0f;padding:2.5rem 0}
.proj-desc-text{font-size:1.1rem;line-height:2;color:#d1d5db;text-align:start}
.max-w-4xl{max-width:56rem;margin:0 auto}

.proj-showcase{background:#0a0a0f;padding:0 0 3.5rem}
.proj-showcase-img{border-radius:1rem;overflow:hidden;border:1px solid rgba(49,65,88,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.proj-showcase-img img{width:100%;height:auto;display:block}

/* Results */
.proj-results-section{background:#0a0a0f;padding:3rem 0}
.proj-results-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.proj-results-grid{grid-template-columns:repeat(2,1fr)}}
.proj-result-card{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;border-radius:.75rem;background:rgba(139,92,246,0.05);border:1px solid rgba(139,92,246,0.15);transition:all .3s}
.proj-result-card:hover{border-color:rgba(139,92,246,0.3);background:rgba(139,92,246,0.08)}
.proj-result-icon{flex-shrink:0;width:2.5rem;height:2.5rem;background:rgba(139,92,246,0.1);border-radius:.5rem;display:flex;align-items:center;justify-content:center}
.proj-result-text{font-size:.95rem;font-weight:500;color:#e5e7eb;line-height:1.6}

/* Testimonial */
.proj-testimonial-section{background:#0a0a0f;padding:2rem 0 3rem}
.proj-testimonial-card{position:relative;padding:2.5rem;border-radius:1.25rem;background:linear-gradient(135deg,rgba(139,92,246,0.06),rgba(59,130,246,0.04));border:1px solid rgba(139,92,246,0.2);text-align:center}
.proj-testimonial-quote{margin-bottom:1.5rem}
.proj-testimonial-text{font-size:1.15rem;line-height:2;color:#d1d5db;font-style:italic;margin-bottom:1.5rem;max-width:40rem;margin-left:auto;margin-right:auto}
.proj-testimonial-author{display:flex;align-items:center;justify-content:center;gap:.75rem}
.proj-testimonial-avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:linear-gradient(135deg,#8E2DE2,#F5A623);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem}
.proj-testimonial-author span{font-size:.9rem;color:#9ca3af;font-weight:500}

.proj-cta-section{background:linear-gradient(to bottom,#0a0a0f,#0f0f1a);padding:4rem 0}
.proj-cta-title{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:1rem}
@media(min-width:768px){.proj-cta-title{font-size:2.25rem}}
.proj-cta-desc{color:#9ca3af;font-size:1rem;line-height:1.7;margin-bottom:2rem;max-width:36rem;margin-left:auto;margin-right:auto}
.proj-cta-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.proj-cta-outline{background:transparent!important;border:1px solid rgba(139,92,246,0.5);box-shadow:none!important}
.proj-cta-outline:hover{border-color:rgba(139,92,246,0.8);box-shadow:0 0 20px rgba(139,92,246,0.2)!important}

.proj-similar-section{background:#0a0a0f;padding:3rem 0 5rem}
.proj-similar-heading{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:2rem;text-align:center}
.proj-similar-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.proj-similar-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.proj-similar-grid{grid-template-columns:repeat(3,1fr)}}
.proj-similar-card{display:block;border-radius:1rem;overflow:hidden;background:rgba(29,41,61,0.2);border:1px solid rgba(49,65,88,0.3);transition:all .3s;text-decoration:none}
.proj-similar-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.3);border-color:rgba(139,92,246,0.4)}
.proj-similar-img{width:100%;aspect-ratio:16/10;overflow:hidden}
.proj-similar-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.proj-similar-card:hover .proj-similar-img img{transform:scale(1.05)}
.proj-similar-info{padding:1.25rem}
.proj-similar-info h4{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.proj-similar-cat{font-size:.8rem;color:#9ca3af}

/* ============ PORTFOLIO CARDS (Clean Clean Design - No Top Bar) ============ */
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(min-width:1024px){.portfolio-grid{grid-template-columns:repeat(3,1fr);gap:1.75rem}}

.portfolio-card{
    display:flex;
    flex-direction:column;
    border-radius:1.125rem;
    overflow:hidden;
    background:#141520;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 10px 30px -10px rgba(0,0,0,0.6);
    transition:all .35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration:none;
    position:relative;
    height:100%;
}
.portfolio-card:hover{
    transform:translateY(-6px);
    border-color:rgba(139,92,246,0.5);
    box-shadow:0 20px 40px -10px rgba(139,92,246,0.2), 0 0 25px rgba(139,92,246,0.15);
}

.portfolio-card-img{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#0d0e15;
}
.portfolio-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.portfolio-card:hover .portfolio-card-img img{transform:scale(1.05)}

.portfolio-card-badge{
    position:absolute;
    top:.75rem;
    inset-inline-end:.75rem;
    z-index:5;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    padding:.22rem .65rem;
    border-radius:9999px;
    box-shadow:0 4px 10px rgba(0,0,0,0.35);
}

.portfolio-card-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(10,10,15,0.85) 0%, rgba(10,10,15,0.2) 60%, transparent 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity .35s;
    z-index:3;
}
.portfolio-card:hover .portfolio-card-overlay{opacity:1}
.portfolio-card-view{
    padding:.45rem 1.25rem;
    background:rgba(139,92,246,0.9);
    border:1px solid rgba(255,255,255,0.3);
    border-radius:9999px;
    color:#fff;
    font-size:.8rem;
    font-weight:600;
    backdrop-filter:blur(8px);
    box-shadow:0 8px 20px rgba(139,92,246,0.5);
    transition:all .25s;
}
.portfolio-card-view:hover{background:#a855f7;transform:scale(1.05)}

.portfolio-card-body{
    padding:1.15rem 1.25rem 1.25rem;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    flex:1;
    justify-content:space-between;
}
.portfolio-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.5rem;
}
.portfolio-card-title{
    font-size:1.05rem;
    font-weight:700;
    color:#fff;
    line-height:1.4;
    transition:color .2s;
}
.portfolio-card:hover .portfolio-card-title{color:#a78bfa}
.portfolio-card-cat{
    font-size:.72rem;
    font-weight:600;
    color:#a855f7;
    background:rgba(168,85,247,0.12);
    border:1px solid rgba(168,85,247,0.25);
    padding:.18rem .65rem;
    border-radius:9999px;
    display:inline-block;
    width:fit-content;
}

/* ============ PROJECT GALLERY ============ */
.proj-gallery-section{background:#0a0a0f;padding:3rem 0}
.proj-gallery-title{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:2rem;text-align:center}
.proj-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:768px){.proj-gallery-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
@media(min-width:1024px){.proj-gallery-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.proj-gallery-item{position:relative;border-radius:1rem;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:rgba(20,21,41,0.4);border:1px solid rgba(49,65,88,0.3);transition:all .3s}
.proj-gallery-item:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,0,0,0.3);border-color:rgba(139,92,246,0.4)}
.proj-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.proj-gallery-item:hover img{transform:scale(1.05)}
.proj-gallery-hover{position:absolute;inset:0;background:rgba(10,10,15,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.proj-gallery-item:hover .proj-gallery-hover{opacity:1}
.proj-gallery-hover svg{width:2rem;height:2rem;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4))}

/* ============ LIGHTBOX ============ */
.proj-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.92);display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.proj-lightbox.active{display:flex}
.proj-lightbox-close{position:absolute;top:1.5rem;right:1.5rem;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:all .2s;z-index:10}
.proj-lightbox-close:hover{background:rgba(255,255,255,0.2)}
#lightboxImg{max-width:90vw;max-height:85vh;border-radius:.75rem;object-fit:contain;box-shadow:0 25px 60px rgba(0,0,0,0.5)}

/* ============ PRELOADER (Mobic style top progress bar + Page Transitions) ============ */
.site-preloader{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:3px;
    z-index:99999;
    pointer-events:none;
    overflow:hidden;
    background:rgba(20,25,45,0.25);
    transition:opacity 0.45s ease-out;
}
.site-preloader.done{
    opacity:0;
}
.site-progress-bar{
    height:100%;
    width:100%;
    transform-origin:left;
    transform:scaleX(0);
    background:linear-gradient(90deg, #8b5cf6, #ec4899, #fac800);
    box-shadow:0 0 14px rgba(236,72,153,0.8), 0 0 8px rgba(139,92,246,0.9);
    transition:transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .site-progress-bar{
    transform-origin:right;
}

/* Page exit transition when switching page or language */
body.page-transitioning{
    opacity:0.85;
    transition:opacity 0.35s ease;
}

/* Fullscreen Logo Loader (Identical to Mobic ClientLayout UX) */
.site-page-loader{
    position:fixed;
    inset:0;
    z-index:999998;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(3, 4, 8, 0.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:1;
    visibility:visible;
    transition:opacity 0.35s ease, visibility 0.35s ease;
    pointer-events:all;
}
.site-page-loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.site-loader-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.site-loader-logo-wrap{
    position:relative;
    margin-bottom:1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 1.5rem;
    animation:mobicLogoPulse 1.4s ease-in-out infinite;
}
.site-loader-logo{
    height:3.5rem;
    width:auto;
    object-fit:contain;
    filter:drop-shadow(0 4px 25px rgba(139, 92, 246, 0.65)) drop-shadow(0 0 40px rgba(168, 85, 247, 0.4));
}
@media(min-width:640px){
    .site-loader-logo{height:4.25rem}
}
@keyframes mobicLogoPulse{
    0%{transform:scale(0.95);opacity:0.9}
    50%{transform:scale(1.05);opacity:1}
    100%{transform:scale(0.95);opacity:0.9}
}

/* Bouncing Dots (identical to Mobic) */
.site-loader-dots{
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.site-loader-dot{
    width:0.75rem;
    height:0.75rem;
    border-radius:9999px;
    display:inline-block;
    animation:mobicDotBounce 1.2s infinite ease-in-out;
}
.site-loader-dot.dot-1{
    background:#8b5cf6;
    animation-delay:-0.3s;
}
.site-loader-dot.dot-2{
    background:#c084fc;
    animation-delay:-0.15s;
}
.site-loader-dot.dot-3{
    background:#ffffff;
    animation-delay:0s;
}
@keyframes mobicDotBounce{
    0%, 80%, 100%{
        transform:translateY(0);
        opacity:0.4;
    }
    40%{
        transform:translateY(-8px);
        opacity:1;
    }
}