@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

:root{
  /* ── Backgrounds ── */
  --bg:         #0d0a08;   /* page background */
  --bg-raised:  #0d0a1b;   /* card / panel background */
  --bg-raised-2:#1d1a36;   /* elevated card / hover bg */

  /* ── Text ── */
  --ink:        #f4efe9;   /* primary text — warm white */
  --lavender:   #d3d9f9;   /* secondary / muted text */

  /* ── Brand ── */
  --orange:     #ff5e17;   /* primary brand orange */
  --purple:     #6877b1;   /* secondary brand purple */

  /* ── Structural ── */
  --line:       rgba(255,255,255,0.1); /* borders, dividers */

  /* ── Layout ── */
  --container:  1180px;
  --edge:       clamp(20px,5vw,80px);
  --font:       'IBM Plex Sans Arabic', 'Cairo Variable', 'Tahoma', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-weight:700; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
::selection{ background:var(--orange); color:var(--bg); }

.grain{
  position:fixed; inset:0; z-index:500; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ======== NAV ======== */
.nav{
  position:fixed; top:0; right:0; left:0; z-index:100;
  display:flex; align-items:center;
  padding:16px var(--edge);
  background:linear-gradient(to bottom,rgba(18,13,10,0.85),transparent);
}
.nav-logo{ height:40px; width:auto; }
.nav-name{ display:none; }

/* ======== SECTION HEAD ======== */
.section-head{ max-width:var(--container); margin:0 auto; padding:0 var(--edge) 48px; }
.section-head h2{ font-size:clamp(26px,4vw,46px); max-width:40ch; font-weight:700; }
.section-head p{ margin-top:14px; color:var(--lavender); max-width:56ch; font-size:17px; }

/* ======== HERO ======== */
.hero{
  position:relative; height:100vh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-stage{
  position:absolute; inset:0;
  display:block;
}
#emblem-canvas{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
#hero-dark-overlay{
  position:absolute; inset:0; z-index:1;
  background:var(--bg);
  opacity:0.45;
  pointer-events:none;
}
.hero-stage::after{
  content:'';
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to bottom, rgba(18,13,10,0.6) 0%, rgba(18,13,10,0.0) 30%, rgba(18,13,10,0.0) 70%, rgba(18,13,10,0.7) 100%),
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(18,13,10,0.0) 0%, rgba(18,13,10,0.4) 100%);
  pointer-events:none;
}
.hero-title-wrap{
  position:absolute;
  top:16vh;
  left:50%; transform:translateX(-50%);
  z-index:4; text-align:center; pointer-events:none;
  width:90%; max-width:960px;
  opacity:0;
}
.hero-title{
  font-size:clamp(28px,6vw,100px);
  line-height:1.05;
  font-weight:700;
  color:#ffffff;
  text-shadow:0 2px 48px rgba(0,0,0,0.7);
}
.hero-sub-wrap{
  position:absolute;
  bottom:16vh;
  left:50%; transform:translateX(-50%);
  z-index:4; text-align:center; pointer-events:none;
  width:90%; max-width:700px;
  opacity:0;
}
.hero-sub{
  font-size:clamp(16px,2.5vw,50px);
  color:var(--orange);
  font-weight:400;
  letter-spacing:0.04em;
}
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  z-index:3; cursor:default;
}
.scroll-cue span{ display:none; }
.scroll-cue i{
  display:block;
  width:18px; height:18px;
  border-right:2px solid rgba(255,94,23,0.7);
  border-bottom:2px solid rgba(255,94,23,0.7);
  transform:rotate(45deg);
  animation:chevron-pulse 1.4s ease-in-out infinite;
}
@keyframes chevron-pulse{
  0%,100%{ opacity:0.4; transform:rotate(45deg) translateY(0); }
  50%{ opacity:1; transform:rotate(45deg) translateY(5px); }
}

/* ======== ROADMAP — PINNED ======== */
.roadmap{
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg); position:relative; overflow:hidden;
}
.roadmap-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); width:100%; }
.roadmap-intro{ text-align:center; margin-bottom:48px; }
.rm-line1{ font-size:clamp(13px,2vw,60px); color:var(--lavender); font-weight:300; margin-bottom:8px; opacity:0; }
.rm-line2{ font-size:clamp(20px,3vw,38px); font-weight:700; color:var(--ink); margin-bottom:12px; opacity:0; }
.rm-line3{ font-size:clamp(17px,4vw,100px); font-weight:700; color:var(--orange); opacity:0; }
.roadmap-line-container{ position:relative; }
.roadmap-svg{ width:100%; height:60px; display:block; margin-bottom:24px; }
.roadmap-nodes{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.roadmap-node{ opacity:0; text-align:center; }
.roadmap-dot{
  width:32px; height:32px;
  margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 0 8px rgba(255,94,23,0.8)) drop-shadow(0 0 18px rgba(255,94,23,0.4));
}
.roadmap-dot img{
  width:32px; height:32px;
  object-fit:contain;
  /* tint the SVG orange to match brand */
  filter:brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(700%) hue-rotate(5deg) brightness(120%);
}

.roadmap-label{ text-align:center; }
.roadmap-num{ font-size:11px; color:var(--orange); font-weight:600; letter-spacing:2px; display:block; margin-bottom:8px; }
.roadmap-label h3{ font-size:clamp(14px,1.8vw,30px); margin-bottom:0; font-weight:600; line-height:1.4; }
.roadmap-label p{ color:var(--lavender); font-size:13px; font-weight:300; margin-top:6px; }

/* ======== WHY HACKATHON — PINNED ======== */
.why{
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.why-journey{
  max-width:640px; margin:0 auto; padding:0 var(--edge);
  display:flex; flex-direction:column;
}
.why-step{
  display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start;
  padding:28px 0; opacity:0;
  border-bottom:1px solid var(--line);
}
.why-step:last-child{ border-bottom:none; }
.why-step-num-wrap{ display:flex; align-items:flex-start; padding-top:4px; }
.why-step-num{ font-size:clamp(28px,4vw,48px); font-weight:700; color:var(--orange); opacity:0.3; line-height:1; }
.why-step-content h3{ font-size:clamp(18px,2.5vw,26px); margin-bottom:8px; }
.why-step-content p{ color:var(--lavender); font-size:20px; font-weight:300; }
.why-connector{ display:flex; flex-direction:column; align-items:flex-start; padding-right:32px; }
.why-connector-line{ width:1px; height:20px; background:var(--line); margin-right:31px; }
.why-connector-arrow{ font-size:16px; color:var(--orange); margin-right:22px; opacity:0; }

/* ======== STORY STAGE — pinned crossfade container ======== */
#story-stage{
  position:relative;
  height:100vh;   /* one viewport — GSAP will extend with a spacer */
}
/* every child section stacks at position 0, filling the full stage */
#story-stage > section{
  position:absolute; inset:0;
  height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:40px var(--edge);
  opacity:0;            /* all start invisible; JS controls everything */
}

/* ONE persistent logo — floats above all slides, GSAP moves it */
#persistent-tga{
  position:absolute;
  top:50%; left:50%;
  /* GSAP sets xPercent:-50 yPercent:-50 and animates y */
  z-index:10;
  opacity:0;
  pointer-events:none;
}
#persistent-tga img{ height:90px; width:auto; }

/* Slides 4+5: push text to lower half so it sits below the moved-up logo */
#hesitation, #launch{
  align-items:flex-end;
  padding-bottom:14vh;
}


/* ======== STORY INTRO — PINNED ======== */

.story-intro{ text-align:center; background:var(--bg); }
.story-intro-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.story-intro-small{
  font-size:clamp(26px,2.5vw,36px); font-weight:300; color:var(--lavender);
  opacity:0;
}
.story-intro-big{
  font-size:clamp(40px,8vw,96px); font-weight:700; color:var(--orange);
  opacity:0; line-height:1.1;
}

/* ======== YEAR REVEAL — PINNED ======== */
.year-reveal{ overflow:hidden; }
.year-bg-text{
  position:absolute; font-size:clamp(200px,22vw,360px); font-weight:800;
  color:var(--orange); line-height:1; pointer-events:none;
  direction:ltr; opacity:0;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 80px rgba(255,94,23,0.2);
}
.year-sentence{
  position:relative; z-index:2; font-size:clamp(18px,2.5vw,36px);
  font-weight:300; color:#ffffff; text-align:center;
  opacity:0;
}

/* ======== NAQL IDEA — PINNED ======== */
.naql-idea{ background:var(--bg); }
.naql-idea-inner{ display:flex; flex-direction:column; align-items:center; gap:0px; text-align:center; }
.naql-idea-small{ font-size:clamp(30px,2vw,36px); font-weight:300; color:var(--lavender); opacity:0; }
.naql-idea-big{ font-size:clamp(100px,5vw,120px); font-weight:700; color:var(--orange); opacity:0; margin-bottom: 20px; }
.naql-idea-agency{ font-size:clamp(18px,2vw,30px); font-weight:300; color:#ffffff; opacity:0; margin-bottom: 100px; }
.naql-idea-logo{ opacity:0; }
.naql-idea-logo img{ height:120px; width:auto; filter:brightness(1.2); }

/* ======== HESITATION — PINNED ======== */
.hesitation{}
.hesitation-inner{ display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center; }
.hes-logo{ opacity:0; }
.hes-logo img{ height:60px; width:auto; }
.hes-text{ font-size:clamp(36px,2.5vw,60px); font-weight:300; color:var(--lavender); opacity:0;margin-top: 100px; margin-bottom: -20px; }
.hes-fight{ font-size:clamp(100px,3.5vw,100px); color:var(--ink); font-weight:400; opacity:0; }
.hes-fight strong{ color:var(--orange); font-weight:700; }

/* ======== LAUNCH — PINNED ======== */
.launch{ background:var(--bg); }
.launch-inner{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.launch-logo{ opacity:0; }
.launch-logo img{ height:60px; width:auto; }
.launch-title{ font-size:clamp(32px,5.5vw,72px); font-weight:700; opacity:0; color:var(--orange); margin-top: 80px; }
.launch-naql-logo{ opacity:0; }
.launch-naql-logo img{ height:150px; width:auto; }

/* ======== GRID-VIP STAGE — one pinned container, two phases ======== */
#grid-vip-stage{
  position:relative; height:100vh; overflow:hidden;
}
/* Growing layer: on top, covers everything, fades out in phase 1 */
#growing-layer{
  position:absolute; inset:0; z-index:20;
  background:var(--bg); overflow:hidden;
}
/* VIP slides: absolutely stacked, z-index assigned by GSAP */
#grid-vip-stage > section{
  position:absolute; inset:0; height:100%;
}

/* 2×2 image grid fills the growing layer */
.growing-grid{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  direction:rtl; gap:3px;
}
.growing-cell{
  position:relative; overflow:hidden;
  opacity:0; background:var(--bg);
}
.growing-cell img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.55) saturate(0.8);
  transform:scale(1.06);
}
.growing-cell::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(13,10,8,0.35) 0%,rgba(13,10,8,0) 60%);
  pointer-events:none;
}
/* Text centered over the grid */
.growing-text{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:10; text-align:center; line-height:1.15; pointer-events:none;
}
.gw{
  font-size:clamp(36px,6.5vw,90px); font-weight:700;
  display:block; margin:0; padding:0;
  opacity:0; transform:translateY(16px); color:var(--ink);
}
.gw-highlight{ color:var(--orange); }



/* Multi-image VIP backgrounds */
.vip-grid-bg{
  position:absolute; inset:0; overflow:hidden;
}
/* 2-col: images 09 + 10 side by side (VIP LUAY) */
.vip-bg-2col{
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
}
.vip-bg-2col img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.55) saturate(0.85);
}
/* 3-panel: top row has 2 cols, bottom row is full width (VIP RUMAIH) */
.vip-bg-3panel{
  display:grid; grid-template-rows:1fr 1fr; gap:3px; height:100%;
}
.vip-bg-top{
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
}
.vip-bg-top img, .vip-bg-bottom img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.55) saturate(0.85);
  display:block;
}
.vip-bg-bottom{ overflow:hidden; }

/* ======== VIP SECTIONS ======== */

.vip-section,.vip-farewell{
  position:relative;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:0 var(--edge) 8vh;
  overflow:hidden;
}
.vip-bg{
  position:absolute; inset:0; background-size:cover; background-position:center top;
  opacity:1;
}
.vip-veil{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(18,13,10,0.5) 20%,rgb(255, 255, 255,0));
  pointer-events:none;
}
.vip-content{ position:relative; z-index:2; max-width:700px; }
.vip-verb{
  font-size:clamp(20px,2.5vw,32px); font-weight:700; color:var(--orange);
  display:block; opacity:0; margin-bottom:8px;
}
.vip-title{
  font-size:clamp(18px,1.6vw,24px); font-weight:400; color:var(--ink);
  display:block; opacity:0; margin-bottom:12px;
}
.vip-name{
  font-size:clamp(24px,4vw,50px); font-weight:700; color:var(--orange);
  display:block; opacity:0; margin-bottom:20px; line-height:1.2;
}
.vip-desc{
  font-size:clamp(16px,1.8vw,24px); font-weight:300; color:var(--lavender);
  display:block; opacity:0;
}
.farewell-text{

  position:relative; z-index:2;
  font-size:clamp(20px,3.5vw,44px); font-weight:700; color:var(--ink);
  opacity:0;
}

/* ======== IDEA TO EVENT — PINNED ======== */
/* ======== IDEA → ANNUAL EVENT (combined pinned stage) ======== */
#idea-annual-stage{
  position:relative; height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); text-align:center;
}
.ia-inner{
  display:flex; flex-direction:column; align-items:center; gap:64px;
  width:100%; padding:0 var(--edge);
}
/* Text zone: both phases occupy the same visual space */
.ia-text-zone{
  position:relative;
  min-height:clamp(120px,18vh,220px);
  display:flex; align-items:center; justify-content:center; width:100%;
}
.ia-p1{
  font-size:clamp(50px,2vw,60px); font-weight:300; color:var(--lavender);
  opacity:0; position:relative; z-index:1;
}
.ia-p2-group{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  pointer-events:none;
}
.ia-p2a{
  font-size:clamp(70px,7vw,90px); font-weight:700; color:var(--ink) ;
  margin:0; opacity:0;
}
.ia-p2b{
  font-size:clamp(50px,2vw,50px); font-weight:500; color:var(--lavender) ; margin-top: -20px;
  opacity:0;
}
/* Logo row — RTL makes Naql1 (first DOM child) the rightmost item */
.ia-logos{
  display:flex; direction:rtl; justify-content:center; align-items:flex-end;
}
/* Each logo item — NO padding here so logos inside .ia-collapse are never clipped */
.ia-logo{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0;
}
.ia-logo img{ height:110px; width:auto; }
/* Gap between logos: RIGHT padding on each collapse logo — in RTL the right side faces the next logo.
   Change 70px to adjust gap. Also update SLOT_W in JS = gap_px + logo_natural_width. */
.ia-collapse .ia-logo{ padding-right:70px; }
.ia-year{
  font-size:clamp(18px,2vw,22px); font-weight:400; color:var(--orange);
  direction:ltr; font-variant-numeric:tabular-nums;
}
/* Collapsible wrappers: start at width:0, GSAP expands to SLOT_W */
.ia-collapse{
  overflow:hidden; width:0;
}



/* ======== GUESTS BIG — PINNED ======== */
.guests-big{
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.gb-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); width:100%; }
.gb-kicker{ font-size:clamp(28px,4.5vw,60px); font-weight:700; margin-bottom:16px; opacity:0; }
.gb-desc{ font-size:clamp(28px,1.6vw,28px); color:var(--lavender); font-weight:300; max-width:90ch; margin-bottom:40px; opacity:0; }
.gb-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  /* NO background — was causing grey box when cards were opacity:0 */
}
.gb-card{
  background:var(--bg-raised); overflow:hidden; opacity:0;
  border-radius:8px; display:flex; flex-direction:column;
}
.gb-photo{
  aspect-ratio:3/4; background-size:cover; background-position:center;
  filter:brightness(0.75); flex-shrink:0;
}
.gb-name{ font-size:clamp(13px,1.3vw,15px); padding:14px 14px 5px; font-weight:600; }
.gb-pos{ font-size:12px; color:var(--orange); padding:0 14px 16px; font-weight:400; }

/* ======== STATEMENT BIG — PINNED ======== */
.statement-big{
  height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:60px var(--edge); background:var(--bg);
}
.sb-inner{ display:flex; flex-direction:column; align-items:center; gap:30px; }
.sb-small{ font-size:clamp(30px,1.8vw,30px); font-weight:300; color:var(--ink); opacity:0; }
.sb-big{ font-size:clamp(32px,5.5vw,72px); font-weight:700; line-height:1.15; opacity:0; }

/* ======== WINNERS SECTION — 3 vertical cards, horizontal row ======== */
.winners-section{
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.ws-cards{
  max-width:var(--container); margin:0 auto; padding:0 var(--edge);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  width:100%; direction:rtl;
}
.ws-card{ display:flex; flex-direction:column; opacity:0; }
.ws-card-img{ border-radius:8px 8px 0 0; overflow:hidden; aspect-ratio:4/3; }
.ws-card-img img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.85); }
.ws-card-body{ background:var(--bg-raised); padding:20px 20px 24px; border-radius:0 0 8px 8px; }
.ws-rank{ font-size:11px; color:var(--orange); font-weight:600; margin-bottom:8px; letter-spacing:0.03em; }
.ws-card-body h3{ font-size:clamp(18px,2vw,24px); margin-bottom:10px; }
.ws-card-body p{ color:var(--lavender); font-size:14px; font-weight:300; line-height:1.6; }

/* ======== NUMBERS — PINNED ======== */
.numbers{
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.numbers-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); width:100%; text-align:center; }
.numbers-title{
  font-size:clamp(28px,4vw,48px); font-weight:700; margin-bottom:40px; opacity:0;
  text-align:center;
}
.number-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.number-item{ opacity:0; }
.num-card{
  background:var(--bg-raised-2); border:1px solid var(--line);
  border-radius:10px; padding:24px 12px; text-align:center; height:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden; gap:10px;
  transition:border-color 0.3s, transform 0.3s;
}
.num-card:hover{ border-color:var(--orange); transform:translateY(-4px); }
.num-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,94,23,0.1),transparent 55%);
  pointer-events:none;
}
.num{
  display:block; font-size:clamp(26px,3vw,44px); font-weight:700;
  color:var(--orange); direction:ltr; font-variant-numeric:tabular-nums; line-height:1;
}
.num-card p{ color:#ffffff; font-size:clamp(12px,1.1vw,14px); font-weight:300; max-width:12ch; margin:0; line-height:1.5; }

/* ======== RECORD INFOGRAPHIC — PINNED + hover ======== */
.record-info{
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.ri-grid{
  max-width:var(--container); margin:0 auto; padding:0 var(--edge);
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px; width:100%;
}
.ri-card{
  background:var(--bg-raised); border:1px solid var(--line);
  border-radius:10px; padding:20px 16px; opacity:0;
  display:flex; flex-direction:column; gap:10px;
  cursor:default;
  transition:border-color 0.25s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  will-change:transform;
}
.ri-card:hover{
  border-color:var(--orange);
  transform:translateY(-6px) scale(1.02);
  background:var(--bg-raised-2);
  box-shadow:0 12px 40px rgba(255,94,23,0.15), 0 0 0 1px var(--orange);
}
.ri-card:hover .ri-logo img{ filter:brightness(1.4); }
.ri-logo{ height:44px; display:flex; align-items:center; }
.ri-logo img{ height:32px; width:auto; max-width:100%; object-fit:contain; filter:brightness(1.1); transition:filter 0.25s; }
.ri-client-name{ font-size:12px; color:var(--orange); font-weight:600; }
.ri-proj{ padding:7px 0; border-top:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; gap:3px; }
.ri-proj:first-child{ border-top:none; }
.ri-pname{ font-size:12px; font-weight:600; color:#ffffff; }
.ri-pscope{ font-size:11px; color:var(--lavender); font-weight:300; }

/* ======== WHY ZANJABEEL — PINNED ======== */
.why-us{
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.why-us-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); width:100%; }
.wus-services,.wus-pitch{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.wus-pitch{ grid-template-columns:repeat(4,1fr); }
.wus-item,.wus-pitch-item{
  background:var(--bg-raised); border:1px solid var(--line);
  border-radius:10px; padding:28px 24px; opacity:0;
  transition:border-color 0.25s, transform 0.25s;
}
.wus-item:hover,.wus-pitch-item:hover{ border-color:var(--orange); transform:translateY(-4px); }
.wus-num{
  font-size:clamp(44px,4.5vw,68px); font-weight:700; color:var(--orange);
  display:block; margin-bottom:12px; line-height:1;
}
.wus-body h4,.wus-pitch-item h4{ font-size:22px; margin-bottom:10px; color:#ffffff; font-weight:600; }
.wus-body ul li{ padding:7px 0; border-top:1px solid rgba(255,255,255,0.08); color:#ffffff; font-size:13px; font-weight:300; }
.wus-body ul li:first-child{ border-top:none; }
.wus-pitch-item p{ color:rgba(255,255,255,0.7); font-size:15px; font-weight:300; line-height:1.5; }
.wus-pitch-icon{ width:44px; height:44px; margin-bottom:18px; display:block; color:var(--orange); }
.wus-pitch-icon svg{ width:100%; height:100%; }
.wus-pitch{ display:none; }

/* ======== WHY US EXTRA — PINNED ======== */
.why-us-extra{
  height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
}
.why-us-extra .section-head{ opacity:0; }
.why-us-extra .wus-pitch{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:14px; margin-top:36px;
}
.why-us-extra .wus-pitch-item{ opacity:0; }

/* ======== CONTACT ======== */
.contact{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:60px var(--edge); text-align:center;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,94,23,0.06), transparent 60%);
}
.closing-logo{ margin:0 auto 48px; }
.closing-logo img{ height:100px; width:auto; margin:0 auto; filter:brightness(1.2); }
.contact h2{ font-size:clamp(32px,5.5vw,72px); font-weight:700; margin-bottom:16px; }
.contact-name{ margin-top:16px; color:var(--lavender); font-size:15px; font-weight:300; }
.contact-links{
  margin-top:28px; display:flex; justify-content:center; gap:28px;
  color:var(--lavender); font-size:14px; direction:ltr; flex-wrap:wrap;
}

/* ======== REVEAL UTILITY ======== */
.reveal{ opacity:0; }

/* ======================================================
   RESPONSIVE — TABLET
====================================================== */
@media(max-width:900px){
  .roadmap-nodes{ grid-template-columns:repeat(2,1fr); }
  .gb-grid{ grid-template-columns:repeat(2,1fr); }
  .number-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .ri-grid{ grid-template-columns:repeat(2,1fr); }
  .wus-services{ grid-template-columns:1fr 1fr; }
  .wus-pitch{ grid-template-columns:repeat(2,1fr); }
  .why-us-extra .wus-pitch{ grid-template-columns:repeat(2,1fr) !important; }
  .ws-company{ grid-template-columns:1fr; }
  .ae-logos{ gap:24px; }
  .gb-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ======================================================
   RESPONSIVE — MOBILE (<768px)
   Pinning disabled via JS; sections use auto height
====================================================== */
@media(max-width:767px){
  :root{ --edge: 20px; }

  .nav{ padding:12px var(--edge); }
  .nav-logo{ height:32px; }

  /* Override fixed heights — JS disables pinning on mobile */
  .roadmap, .why, .story-intro, .year-reveal, .naql-idea,
  .hesitation, .launch, .idea-to-event, .annual-event,
  .guests-big, .statement-big, .winners-section, .numbers,
  .record-info, .why-us, .why-us-extra{
    height:auto;
    min-height:100svh;
    padding-top:80px;
    padding-bottom:60px;
  }

  /* VIP stage: show each section stacked, not absolute */
  #vip-stage{
    height:auto;
    overflow:visible;
  }
  #vip-stage .vip-section,
  #vip-stage .vip-farewell{
    position:relative;
    inset:unset;
    height:auto;
    min-height:100svh;
    opacity:1 !important;
  }

  /* Hero */
  .hero-title-wrap{ top:14vh; }
  .hero-sub-wrap{ bottom:10vh; }

  /* Roadmap */
  .roadmap-nodes{ grid-template-columns:1fr 1fr; gap:12px; }
  .roadmap-intro{ margin-bottom:28px; }

  /* Why */
  .why-journey{ max-width:100%; }
  .why-step{ grid-template-columns:48px 1fr; gap:12px; padding:20px 0; }

  /* Numbers */
  .number-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .num-card{ height:150px; }
  .numbers-title{ margin-bottom:24px; }

  /* Record info */
  .ri-grid{ grid-template-columns:1fr; }
  .ri-card{ padding:16px 14px; }

  /* Guests */
  .gb-grid{ grid-template-columns:1fr 1fr; }
  .gb-desc{ margin-bottom:24px; }

  /* Winners */
  .ws-company{ grid-template-columns:1fr; direction:ltr !important; }
  .ws-company:nth-child(even){ direction:ltr; }
  .ws-all{ gap:24px; }

  /* Why us */
  .wus-services{ grid-template-columns:1fr; }
  .wus-pitch{ grid-template-columns:1fr 1fr !important; }
  .why-us-extra .wus-pitch{ grid-template-columns:1fr 1fr !important; }
  .wus-item,.wus-pitch-item{ padding:20px 16px; }

  /* Annual event */
  .ae-logos{ gap:16px; }
  .ae-logo-item img{ height:48px; }

  /* VIP on mobile */
  .vip-section,.vip-farewell{ padding:0 var(--edge) 60px; }

  /* Growing text */
  .growing-text{ padding:24px 24px; }

  /* Section head */
  .section-head{ padding:0 var(--edge) 28px; }

  /* Statement */
  .statement-big{ padding:40px var(--edge); }
}

@media(max-width:400px){
  .number-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .wus-pitch{ grid-template-columns:1fr !important; }
  .why-us-extra .wus-pitch{ grid-template-columns:1fr !important; }
  .gb-grid{ grid-template-columns:1fr; }
  .roadmap-nodes{ grid-template-columns:1fr; }
}

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ======== SCROLL COMPANION ORB ======== */
#scroll-orb{
  position:fixed;
  top:0; left:0;
  width:68px; height:68px;
  z-index:200;           /* above content, below .grain(500) */
  pointer-events:none;
  opacity:0;
  will-change:transform, filter, opacity;
  transform-origin:center center;
}
.orb-core{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change:transform, filter;
}
.orb-core img{
  width:60px; height:60px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 8px rgba(255,94,23,0.5));
  user-select:none;
}

/* Ghost trail copies */
.orb-ghost{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  will-change:transform, opacity;
}
.orb-ghost img{
  width:60px; height:60px;
  object-fit:contain;
  display:block;
  filter:blur(4px);
  opacity:0.55;
  user-select:none;
}

/* Mobile: hide entirely */
@media(max-width:767px){
  #scroll-orb{ display:none; }
}

/* Reduced motion: disable all orb animation, just show static glow */
@media(prefers-reduced-motion:reduce){
  #scroll-orb,
  .orb-core,
  .orb-ghost{ animation:none !important; filter:none !important; }
}