/* ==========================================
   RESET
========================================== */
*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  width:100%; overflow:hidden;
  background:#0A0A0A; color:#F8FAFC;
  font-family: Inter, Arial, sans-serif;
}

:root{
  --bg:#0A0A0A; --text:#F8FAFC;
  --muted:#64748B; --green:#22C55E;
  --cyan:#06B6D4; --border:rgba(255,255,255,.08);
  --border-hover:#22C55E;
}

/* ==========================================
   EXPERIENCE WRAPPER
========================================== */
#experienceWrapper{
  opacity:0; pointer-events:none;
  position:relative; z-index:1;
}

/* ==========================================
   HEADER
========================================== */
#siteHeader{
  position:fixed; top:0; left:0; right:0;
  z-index:500; padding:0 44px; height:60px;
  display:flex; align-items:center;
  background:transparent; border-bottom:none;
  transition:transform .4s ease, opacity .4s ease;
}

#siteHeader.hidden{ transform:translateY(-100%); opacity:0; }

#projectsHeader, #caseHeader, #caseHeaderINKKA{
  position:fixed; top:0; left:0; right:0;
  z-index:1300; padding:0 44px; height:60px;
  display:flex; align-items:center;
  background:rgba(10,10,10,.8);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}

#caseHeader, #caseHeaderINKKA{ z-index:2100; }

.header-inner{
  width:100%; display:flex;
  align-items:center; justify-content:space-between;
}

.header-logo{ font-size:14px; font-weight:800; letter-spacing:4px; color:var(--green); }

.header-right{ display:flex; gap:36px; align-items:center; }
.header-left{ display:flex; align-items:center; }

.header-btn{
  background:transparent; border:none;
  color:rgba(248,250,252,.65); cursor:pointer;
  font-size:11px; letter-spacing:4px;
  padding:6px 0; text-decoration:none;
  transition:color .3s ease; white-space:nowrap;
  position:relative;
}

.header-btn::after{
  content:""; position:absolute;
  bottom:-2px; left:0; width:0; height:1px;
  background:var(--text);
  transition:width .35s cubic-bezier(.16,1,.3,1);
}

.header-btn:hover{ color:var(--text); }
.header-btn:hover::after{ width:100%; }

.header-btn-accent{ color:rgba(248,250,252,.4); }
.header-btn-accent:hover{ color:var(--text); }

/* ==========================================
   HERO
========================================== */
#hero{ position:relative; width:100%; height:100vh; }

#heroCanvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:1; background:#000;
}

.hero-overlay{
  position:fixed; inset:0; z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.65) 35%,rgba(0,0,0,.08) 100%);
}

/* ==========================================
   WELCOME TYPEWRITER
========================================== */
#welcomeOverlay{
  position:fixed; top:80px; right:60px;
  z-index:200; text-align:right; pointer-events:none;
  transition:opacity .8s ease, transform .8s ease;
}
#welcomeOverlay.hidden{ opacity:0; transform:translateY(-10px); }

.welcome-label{
  display:block; font-size:8px; letter-spacing:5px;
  color:rgba(248,250,252,.3); margin-bottom:6px; min-height:14px;
}
.welcome-year{
  display:block; font-size:46px; font-weight:800;
  color:rgba(248,250,252,.06); letter-spacing:8px; line-height:1; min-height:54px;
}
.tw-cursor{
  display:inline-block; width:2px; height:.85em;
  background:rgba(248,250,252,.25); margin-left:2px;
  vertical-align:middle; animation:blinkCursor .7s step-end infinite;
}
@keyframes blinkCursor{ 0%,100%{opacity:1} 50%{opacity:0} }

/* ==========================================
   CONTENT BLOCKS
========================================== */
.content-block{
  position:fixed;
  left:6vw !important;
  right:auto !important;
  top:44%;
  transform:translateY(-50%);
  width:100%; max-width:620px;
  z-index:100; color:var(--text);
  opacity:0; pointer-events:none;
  filter:blur(10px);
  transition:opacity .65s ease, filter .65s ease;
}

.content-block.active{ opacity:1; pointer-events:auto; filter:blur(0); }

/* glitch animations */
.content-block.glitch-out{ animation:glitchOut .3s ease forwards; }
.content-block.glitch-in{ animation:glitchIn .4s ease forwards; }

@keyframes glitchOut{
  0%{ opacity:1; transform:translateY(-50%) translateX(0); filter:blur(0); }
  30%{ transform:translateY(-50%) translateX(-5px); filter:blur(2px); clip-path:inset(10% 0 30% 0); }
  60%{ transform:translateY(-50%) translateX(5px); filter:blur(3px); opacity:.5; clip-path:inset(30% 0 10% 0); }
  100%{ opacity:0; transform:translateY(-50%); filter:blur(8px); clip-path:inset(0); }
}

@keyframes glitchIn{
  0%{ opacity:0; transform:translateY(-50%) translateX(0); filter:blur(8px); clip-path:inset(50% 0 50% 0); }
  30%{ transform:translateY(-50%) translateX(5px); filter:blur(3px); opacity:.4; clip-path:inset(20% 0 20% 0); }
  60%{ transform:translateY(-50%) translateX(-3px); filter:blur(1px); opacity:.8; clip-path:inset(5% 0 5% 0); }
  100%{ opacity:1; transform:translateY(-50%); filter:blur(0); clip-path:inset(0); }
}

@media(max-width:768px){
  @keyframes glitchOut{
    0%{ opacity:1; transform:translateY(-50%) scale(0.8) translateX(0); filter:blur(0); }
    30%{ transform:translateY(-50%) scale(0.8) translateX(-5px); filter:blur(2px); clip-path:inset(10% 0 30% 0); }
    60%{ transform:translateY(-50%) scale(0.8) translateX(5px); filter:blur(3px); opacity:.5; clip-path:inset(30% 0 10% 0); }
    100%{ opacity:0; transform:translateY(-50%) scale(0.8); filter:blur(8px); clip-path:inset(0); }
  }
  @keyframes glitchIn{
    0%{ opacity:0; transform:translateY(-50%) scale(0.8) translateX(0); filter:blur(8px); clip-path:inset(50% 0 50% 0); }
    30%{ transform:translateY(-50%) scale(0.8) translateX(5px); filter:blur(3px); opacity:.4; clip-path:inset(20% 0 20% 0); }
    60%{ transform:translateY(-50%) scale(0.8) translateX(-3px); filter:blur(1px); opacity:.8; clip-path:inset(5% 0 5% 0); }
    100%{ opacity:1; transform:translateY(-50%) scale(0.8); filter:blur(0); clip-path:inset(0); }
  }
}

.subtitle{
  display:block; margin-bottom:20px;
  font-size:11px; letter-spacing:7px; color:rgba(248,250,252,.4);
}

/* h-line — enters from sides */
.h-line{
  display:block; overflow:hidden;
  font-size:clamp(48px,6vw,108px);
  line-height:.88; font-weight:800;
  transform:translateX(-40px); opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .55s ease;
}
.h-line:nth-child(2){ transform:translateX(40px); transition-delay:.08s; }
.h-line:nth-child(3){ transform:translateX(-40px); transition-delay:.16s; }
.h-accent{ color:rgba(248,250,252,.45); }

.content-block.active .h-line{
  transform:translateX(0); opacity:1;
}

.content-block h1, .content-block h2{
  margin-bottom:24px;
}

.content-block p{
  font-size:15px; line-height:1.9;
  max-width:580px; color:rgba(248,250,252,.55);
  transform:translateY(16px); opacity:0;
  transition:transform .55s ease .3s, opacity .55s ease .3s;
}
.content-block.active p{ transform:translateY(0); opacity:1; }

.intro-sub{
  font-size:18px !important; color:rgba(248,250,252,.7) !important;
  opacity:1 !important; transform:none !important;
  transition:none !important; line-height:1.5 !important;
}

.skill-list{ color:rgba(248,250,252,.4); font-size:13px; letter-spacing:1px; }

/* ==========================================
   LOADING
========================================== */
#loadingScreen{
  position:fixed; inset:0; z-index:10000; background:#0A0A0A;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
}
.loading-content{ color:var(--text); width:240px; }
.loading-content span{ display:block; margin-bottom:20px; font-size:11px; letter-spacing:8px; color:var(--muted); }
#loadingBar{
  width:100%; height:2px;
  background:rgba(255,255,255,.08);
  position:relative; overflow:hidden;
}
#loadingBarFill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:var(--green);
  transition:width .2s ease;
}

/* ==========================================
   SCROLL BANNER — fixed bottom (new system)
========================================== */
#scrollBanner{
  position:fixed; bottom:40px; left:0; right:0;
  z-index:600;
  opacity:0; pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1);
}

#scrollBanner.visible{
  opacity:1;
  pointer-events:auto;
}

#scrollBannerInner{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:0;
  background:transparent;
}

#scrollBannerText{
  font-size:13px; letter-spacing:5px;
  color:var(--green); white-space:pre-line;
  text-align:center; line-height:1.8;
  text-shadow:0 0 20px rgba(34,197,94,.4);
}

/* سهم لتحت */
#scrollBannerText::after{
  content:"|\A↓";
  white-space:pre;
  display:block;
  margin-top:8px;
  font-size:11px;
  letter-spacing:2px;
  color:rgba(34,197,94,.6);
  line-height:1.4;
}

#scrollBannerProgress{
  width:200px; height:1px;
  background:rgba(255,255,255,.08);
  position:relative; overflow:hidden;
  display:none;
}

#scrollBannerBar{
  position:absolute; left:0; top:0; height:100%;
  width:0%;
  background:var(--green);
  box-shadow:0 0 10px rgba(34,197,94,.7);
}

@media(max-width:768px){
  #scrollBannerText{ font-size:9px; letter-spacing:3px; }
  #scrollBanner{ bottom:100px; }
}

/* ==========================================
   NAV MAP
========================================== */
#navMap{
  position:fixed; right:44px; top:50%;
  transform:translateY(-50%); z-index:300;
  display:flex; flex-direction:column; gap:24px;
}

.nav-item{
  display:flex; align-items:center; gap:10px;
  opacity:.25; transition:.4s ease;
  cursor:pointer; user-select:none;
  padding:8px 4px;
}

.nav-item:hover{ opacity:.6; }
.nav-item.active{ opacity:1; }

.nav-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(248,250,252,.2); transition:.4s ease; flex-shrink:0;
}
.nav-item.active .nav-dot{
  background:var(--text); box-shadow:0 0 8px rgba(248,250,252,.3);
}

.nav-label{ font-size:11px; letter-spacing:3px; color:var(--text); white-space:nowrap; }

/* ==========================================
   SCROLL HINT
========================================== */
#scrollHint{
  position:fixed; left:50%; bottom:36px;
  transform:translateX(-50%); z-index:250;
  text-align:center; color:var(--text);
  pointer-events:auto; cursor:pointer;
  padding:16px 28px;
}
#scrollHint:hover .hint-title{ color:rgba(248,250,252,.7); }
#scrollHint:hover #nextSectionText{ opacity:.8; }
.hint-title{
  display:block; font-size:11px; letter-spacing:5px;
  color:rgba(248,250,252,.45); margin-bottom:8px;
  animation:glitchPulse 2.5s infinite;
}
#nextSectionText{
  display:block; font-size:12px; opacity:.5;
  letter-spacing:2px; color:rgba(248,250,252,.5);
}

/* ==========================================
   TRANSITION
========================================== */
#transitionSection{
  position:fixed; inset:0; z-index:1000;
  opacity:0; visibility:hidden; pointer-events:none; background:#000;
}
#transitionCanvas{ width:100vw; height:100vh; }

/* ==========================================
   PROJECTS UNIVERSE
========================================== */
#projectsUniverse{
  position:fixed; inset:0; z-index:1200;
  opacity:0; visibility:hidden; pointer-events:none;
  overflow-y:auto; background:#0A0A0A;
}

.radial-glow{
  position:fixed; width:1000px; height:1000px;
  left:50%; top:30%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.08) 0%,transparent 70%);
  filter:blur(100px); animation:auraMove 8s ease-in-out infinite;
  pointer-events:none;
}

.particles{
  position:fixed; inset:0; opacity:.06;
  background-image:radial-gradient(rgba(248,250,252,.3) 1px,transparent 1px);
  background-size:90px 90px;
  animation:particlesMove 40s linear infinite; pointer-events:none;
}

.projects-inner{
  position:relative; max-width:1160px;
  margin:0 auto; padding:110px 60px 80px; z-index:5;
}

.projects-inner>h2{
  font-size:clamp(56px,7vw,120px);
  line-height:.85; margin-bottom:16px;
}
.projects-inner>p{ font-size:15px; opacity:.4; line-height:2; margin-bottom:56px; }

/* ==========================================
   PROJECT CARDS
========================================== */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:24px; margin-bottom:80px;
}

.project-card{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  overflow:hidden; cursor:pointer;
  transition:.4s ease; position:relative;
}
.project-card:hover{
  border-color:rgba(255,255,255,.15);
  transform:translateY(-4px);
}

.project-card-soon{ opacity:.4; cursor:default; }
.project-card-soon:hover{ transform:none; border-color:var(--border); }

.project-card-img{
  width:100%; height:210px;
  background-size:cover; background-position:center; background-color:#111;
  position:relative;
}
.project-card-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(10,10,10,.7));
}
.project-card-img-soon{
  background:repeating-linear-gradient(
    45deg, #111 0px, #111 10px, #0d0d0d 10px, #0d0d0d 20px
  );
}

.project-card-body{ padding:24px; }

.project-card-tags{ margin-bottom:10px; display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  font-size:10px; letter-spacing:3px; color:rgba(248,250,252,.45);
  border:1px solid rgba(255,255,255,.1); padding:5px 14px;
}
.tag-cat{ color:rgba(248,250,252,.25); }

.project-card-body h3{
  font-size:20px; font-weight:800; color:var(--text);
  margin-bottom:8px; letter-spacing:1px;
}
.card-hook{
  font-size:13px; color:rgba(248,250,252,.45);
  line-height:1.7; margin-bottom:20px;
}

.view-case-btn{
  background:transparent; border:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:rgba(248,250,252,.5); font-size:10px;
  letter-spacing:4px; padding:5px 0; cursor:pointer;
  transition:.3s ease;
}
.view-case-btn:hover{ color:var(--text); border-bottom-color:rgba(255,255,255,.4); }

.coming-soon-label{
  display:inline-block; font-size:9px; letter-spacing:4px;
  color:rgba(248,250,252,.25); border:1px solid rgba(255,255,255,.06);
  padding:4px 12px;
}

/* ==========================================
   SERVICES SECTION
========================================== */
.services-section{
  border-top:1px solid var(--border);
  padding-top:60px; margin-bottom:60px;
}

.services-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:32px; margin-top:32px;
}

.service-item{ padding:28px 0; border-top:1px solid var(--border); }
.service-num{
  display:block; font-size:9px; letter-spacing:4px;
  color:rgba(248,250,252,.2); margin-bottom:12px;
}
.service-item h4{
  font-size:14px; font-weight:700; color:var(--text);
  letter-spacing:1px; margin-bottom:10px;
}
.service-item p{ font-size:12px; color:var(--muted); line-height:1.8; }

/* ==========================================
   SKILLS SECTION
========================================== */
.skills-section{
  border-top:1px solid var(--border);
  padding-top:60px; margin-bottom:60px;
}

.skills-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:32px; margin-top:32px;
}

.skill-group h5{
  font-size:9px; letter-spacing:5px; color:var(--muted);
  margin-bottom:16px;
}
.skill-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.skill-tags span{
  font-size:10px; letter-spacing:2px; color:rgba(248,250,252,.5);
  border:1px solid var(--border); padding:5px 12px;
}

/* ==========================================
   FINAL CTA
========================================== */
.final-cta{
  border-top:1px solid var(--border);
  padding-top:80px; padding-bottom:80px;
  text-align:center;
}

.final-cta h2{
  font-size:clamp(36px,5vw,72px);
  line-height:.9; font-weight:800;
  margin-bottom:20px; color:var(--text);
}

.final-cta p{ font-size:16px; color:var(--muted); margin-bottom:44px; }

.cta-buttons{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.cta-btn{
  font-size:11px; letter-spacing:4px;
  padding:16px 40px; cursor:pointer;
  text-decoration:none; transition:.3s ease;
  display:inline-block;
}

.cta-btn-primary{
  background:var(--text); color:#0A0A0A; font-weight:700;
}
.cta-btn-primary:hover{ background:rgba(248,250,252,.85); }

.cta-btn-secondary{
  background:transparent; color:var(--text);
  border:1px solid rgba(255,255,255,.2);
}
.cta-btn-secondary:hover{ border-color:rgba(255,255,255,.4); }

/* ==========================================
   ARCHIVE OVERLAY + SEQUENCE
========================================== */
#archiveOverlay{
  position:fixed; inset:0; z-index:9000; opacity:0; pointer-events:none;
  transition:opacity .6s ease;
  background:
    repeating-linear-gradient(0deg,rgba(34,197,94,.015) 0px,rgba(34,197,94,.015) 1px,transparent 2px,transparent 4px),
    rgba(0,0,0,.75);
}

#archiveSequence{
  position:fixed; inset:0; z-index:9100;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease; background:transparent;
}
#archiveSequence.active{ opacity:1; visibility:visible; }

.archive-sequence-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }

.seq-line{
  display:block; font-size:10px; letter-spacing:6px;
  color:var(--text); opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
  margin-bottom:16px; white-space:nowrap;
}
.seq-line.visible{ opacity:1; transform:translateY(0); }
.seq-line.dim.visible{ opacity:.3; }
.seq-line.highlight{ color:rgba(248,250,252,.9); font-size:12px; letter-spacing:8px; }
.seq-line.large{ font-size:44px; letter-spacing:12px; font-weight:800; margin-bottom:0; }

.seq-divider{ width:1px; height:0; background:rgba(248,250,252,.15); margin:4px auto 20px; transition:height .5s ease; }
.seq-divider.visible{ height:36px; }

.seq-scan{ width:200px; height:1px; background:rgba(248,250,252,.05); position:relative; margin-bottom:20px; overflow:hidden; }
.seq-scan::after{
  content:""; position:absolute; left:-100%; top:0; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(248,250,252,.5),transparent);
  transition:left .7s ease;
}
.seq-scan.scanning::after{ left:100%; }

#portalCanvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:9200; opacity:0; pointer-events:none; transition:opacity .3s ease;
}

/* ==========================================
   CASE STUDY — SHARED
========================================== */
.case-study-section{
  position:fixed; inset:0; z-index:2000;
  opacity:0; visibility:hidden; pointer-events:none;
  overflow-y:auto; background:#0A0A0A;
}
.case-study-section.active{ opacity:1; visibility:visible; pointer-events:auto; }

/* legacy selector kept for 8west compatibility */
#case8west{
  position:fixed; inset:0; z-index:2000;
  opacity:0; visibility:hidden; pointer-events:none;
  overflow-y:auto; background:#0A0A0A;
}
#case8west.active{ opacity:1; visibility:visible; pointer-events:auto; }

.case-inner{ max-width:1060px; margin:0 auto; padding:100px 60px 80px; }

.case-hero-text{ margin-bottom:44px; }
.case-hero-text h2{
  font-size:clamp(56px,7vw,110px);
  line-height:.84; font-weight:800; color:var(--text); margin-bottom:12px;
}
.case-niche{ font-size:10px; letter-spacing:5px; color:var(--muted); margin-bottom:12px; }
.case-tagline{ font-size:20px; line-height:1.5; color:rgba(248,250,252,.55); font-weight:300; }

.case-description{ max-width:700px; margin-bottom:56px; }
.case-description p{ font-size:16px; line-height:2; color:rgba(248,250,252,.6); margin-bottom:16px; }

/* VIDEO */
.case-video-wrap{
  position:relative; margin-bottom:72px;
  background:#000; overflow:hidden;
}
.case-video-wrap video{
  width:100%; height:auto; display:block;
  max-height:75vh; object-fit:cover;
}
.case-video-label{
  position:absolute; bottom:20px; left:24px;
  font-size:9px; letter-spacing:5px; color:rgba(248,250,252,.4);
}

/* CASE BLOCKS */
.case-blocks{ display:flex; flex-direction:column; gap:72px; margin-bottom:72px; }

.case-block img{ width:100%; height:auto; display:block; border:1px solid var(--border); }
.case-block-hero img{ border:none; }

.case-block-info{
  padding:28px 0 0; border-top:1px solid var(--border); margin-top:0;
}
.case-block-info ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; }
.case-block-info ul li{
  font-size:11px; letter-spacing:3px; color:var(--muted);
  position:relative; padding-left:14px;
}
.case-block-info ul li::before{ content:"—"; position:absolute; left:0; color:rgba(248,250,252,.2); font-size:9px; }
.case-block-info p{ font-size:15px; line-height:1.9; color:var(--muted); max-width:620px; }

/* RESULTS */
.case-results{
  border-top:1px solid var(--border);
  padding-top:56px; margin-bottom:64px;
}
.results-grid{ display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.result-item{
  display:flex; align-items:center; gap:20px;
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,.05);
  flex-wrap:wrap;
}
.result-before{ font-size:12px; letter-spacing:2px; color:var(--muted); flex:1; min-width:200px; }
.result-arrow{ font-size:16px; color:rgba(248,250,252,.2); }
.result-after{ font-size:13px; letter-spacing:1px; color:rgba(248,250,252,.7); font-weight:600; flex:1; min-width:200px; }

/* PROCESS */
.case-process{
  border-top:1px solid var(--border);
  padding-top:56px; margin-bottom:64px;
}
.process-steps{ display:flex; flex-direction:column; gap:0; margin-top:28px; max-width:320px; }
.process-step{ display:flex; align-items:center; gap:20px; padding:16px 0; }
.process-num{ font-size:9px; letter-spacing:4px; color:rgba(248,250,252,.2); width:24px; }
.process-name{ font-size:13px; letter-spacing:3px; color:rgba(248,250,252,.65); }
.process-arrow{ font-size:18px; color:rgba(248,250,252,.1); padding:2px 0 2px 44px; }

/* CASE ACTIONS */
.case-actions{ display:flex; gap:36px; flex-wrap:wrap; margin-top:48px; padding-top:48px; border-top:1px solid var(--border); }
.case-action-btn{
  background:transparent; border:none;
  border-bottom:1px solid rgba(255,255,255,.15);
  color:rgba(248,250,252,.45); font-size:10px;
  letter-spacing:4px; padding:6px 0; cursor:pointer;
  transition:.3s ease; text-decoration:none; display:inline-block;
}
.case-action-btn:hover{ color:var(--text); border-bottom-color:rgba(255,255,255,.4); }
.case-action-accent{ color:rgba(248,250,252,.45); }

/* Live site link — bordered */
.case-action-live{
  border:1px solid rgba(34,197,94,.35) !important;
  border-bottom:1px solid rgba(34,197,94,.35) !important;
  color:var(--green) !important;
  padding:6px 18px !important;
  letter-spacing:4px;
  transition:border-color .3s ease, color .3s ease, background .3s ease !important;
}
.case-action-live:hover{
  border-color:var(--green) !important;
  background:rgba(34,197,94,.06) !important;
  color:var(--green) !important;
}

/* ==========================================
   KEYFRAMES
========================================== */
@keyframes pulseAura{ 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.1);opacity:1} }
@keyframes auraMove{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.1)} }
@keyframes particlesMove{ from{transform:translateY(0)} to{transform:translateY(-180px)} }
@keyframes glitchPulse{ 0%{opacity:.3} 15%{opacity:.8} 18%{opacity:.2} 20%{opacity:.7} 100%{opacity:.4} }

/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){
  #siteHeader{
    padding:0 16px;
    height:52px;
  }

  /* header-right على الموبايل — أصغر وقريبة */
  #siteHeader .header-right{
    gap:20px;
  }

  #siteHeader .header-btn{
    font-size:9px;
    letter-spacing:3px;
  }

  /* projects + case headers */
  #projectsHeader, #caseHeader, #caseHeaderINKKA{
    padding:0 16px;
    height:52px;
  }

  #projectsHeader .header-right,
  #caseHeader .header-right,
  #caseHeaderINKKA .header-right{
    gap:16px;
  }

  #projectsHeader .header-btn,
  #caseHeader .header-btn,
  #caseHeaderINKKA .header-btn{
    font-size:9px;
    letter-spacing:2px;
  }

  /* NAV — horizontal bottom-left on mobile */
  #navMap{
    position:fixed;
    right:auto; left:16px;
    top:auto; bottom:72px;
    transform:none;
    flex-direction:row;
    gap:0; align-items:center;
    background:rgba(10,10,10,.75);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.07);
    border-radius:2px;
    padding:0 4px;
    z-index:601;
  }

  .nav-item{
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:10px 12px;
    opacity:.35;
  }
  .nav-item.active{ opacity:1; }

  .nav-dot{
    width:5px; height:5px;
    display:block;
  }

  .nav-label{
    display:block;
    font-size:7px;
    letter-spacing:1.5px;
    color:var(--text);
    white-space:nowrap;
    text-align:center;
  }

  .content-block{ left:6vw; right:6vw; max-width:none; top:46%; transform:translateY(-50%) scale(0.8); transform-origin:left center; }

  .h-line{ font-size:44px; }
  .content-block p{ font-size:14px; }

  #scrollHint{ bottom:24px; }

  .projects-inner{ padding:90px 20px 60px; }
  .projects-grid{ grid-template-columns:1fr; }
  .skills-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }

  .case-inner{ padding:88px 20px 60px; }
  .case-video-wrap video{ max-height:55vw; }
  .result-item{ flex-direction:column; gap:8px; }
  .process-steps{ max-width:100%; }
  .case-actions{ gap:20px; flex-direction:column; }
  .cta-buttons{ flex-direction:column; align-items:center; }

  #welcomeOverlay{ top:70px; right:20px; }
  .welcome-year{ font-size:32px; }
}

/* scroll hint — always clickable */
#scrollHint {
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 500;
  padding: 20px 32px;
}