/* ============================================================
   WATER PURIFICATION RESEARCH v3 — Complete Stylesheet
   RTL Arabic · Premium Science Exhibition
   ============================================================ */

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

/* ─── VARIABLES ──────────────────────────────────────────── */
:root {
  --c-bg:          #08111f;
  --c-mid:         #0d3558;
  --c-bright:      #1a6fa8;
  --c-glow:        #38c8f5;
  --c-foam:        #b8ebf7;
  --c-teal:        #00bfa5;
  --c-teal-lt:     #4dd0c4;
  --c-gold:        #f5a623;
  --c-gold-lt:     #ffd180;
  --c-white:       #ffffff;
  --c-text:        rgba(220,240,255,.9);
  --c-muted:       rgba(180,215,240,.6);
  --c-card:        rgba(255,255,255,.055);
  --c-border:      rgba(100,200,255,.15);
  --c-glass:       rgba(255,255,255,.07);

  --z-visitor-bg:      #070f19;
  --z-why-bg:          #0b1630;
  --z-research-bg:     #07111c;
  --z-research-border: rgba(100,160,220,.18);

  --font:   'Cairo', sans-serif;
  --serif:  'Amiri', serif;
  --max-w:  1080px;
  --r:      16px;
  --t:      .28s;
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  direction: rtl;
  overflow-x: hidden;
  line-height: 1.85;
}
::selection { background: rgba(56,200,245,.28); color:#fff; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-mid); border-radius:3px; }

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html { scroll-behavior:auto; }
}

/* ─── PARTICLES ──────────────────────────────────────────── */
.bg-particles { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.particle {
  position:absolute; border-radius:50%;
  background: radial-gradient(circle, var(--c-glow), transparent);
  opacity:0; animation: ptl linear infinite;
}
@keyframes ptl {
  0%   { transform:translateY(102vh) scale(.2); opacity:0; }
  10%  { opacity:.22; }
  90%  { opacity:.05; }
  100% { transform:translateY(-10px) scale(1.1); opacity:0; }
}

/* ─── NAVBAR ─────────────────────────────────────────────── */
.navbar {
  position:fixed; inset:0 0 auto; z-index:900;
  transition: background var(--t), box-shadow var(--t);
}
.navbar.scrolled {
  background: rgba(8,17,31,.93);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 4px 28px rgba(0,0,0,.45);
}
.nav-inner {
  max-width: var(--max-w); margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; gap:16px;
}
.nav-brand {
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:1rem; color:var(--c-glow);
  flex-shrink:0; white-space:nowrap;
}
.nav-drop { font-size:1.3rem; animation: sway 3s ease-in-out infinite; }
@keyframes sway { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(6deg)} }

.nav-menu {
  display:flex; list-style:none; gap:6px;
  margin-right:auto; flex-wrap:wrap;
}
.nlink {
  color:var(--c-muted); text-decoration:none;
  font-size:.84rem; font-weight:600;
  padding:7px 14px; border-radius:20px;
  transition: all var(--t);
}
.nlink:hover { color:#fff; background:rgba(56,200,245,.14); }
.nlink-research { color:var(--c-gold); border:1px solid rgba(245,166,35,.3); }
.nlink-research:hover { background:rgba(245,166,35,.18); color:var(--c-gold-lt); }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--c-glow); border-radius:2px; transition:all var(--t);
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:120px 24px 100px;
  background: radial-gradient(ellipse at 50% 0%, #0e3a6a 0%, #08111f 65%);
}
.water-anim {
  position:absolute; bottom:-2px; left:-5%; width:110%; height:200px;
  pointer-events:none;
}
.wave-svg { position:absolute; bottom:0; left:0; width:100%; height:100%; }
.wave-svg path { animation: wave linear infinite; }
.w1 path { fill:rgba(26,111,168,.28); animation-duration:14s; }
.w2 path { fill:rgba(0,191,165,.18); animation-duration:20s; animation-direction:reverse; }
.w3 path { fill:rgba(56,200,245,.12); animation-duration:26s; }
@keyframes wave {
  0%  { d:path("M0,60 C240,100 480,20 720,60 C960,100 1200,20 1440,60 L1440,120 L0,120Z"); }
  50% { d:path("M0,30 C300,90 500,10 720,50 C940,90 1200,10 1440,40 L1440,120 L0,120Z"); }
  100%{ d:path("M0,60 C240,100 480,20 720,60 C960,100 1200,20 1440,60 L1440,120 L0,120Z"); }
}

.bubbles { position:absolute; inset:0; pointer-events:none; }
.bubble {
  position:absolute; bottom:-60px; border-radius:50%;
  border:1px solid rgba(56,200,245,.28);
  background: radial-gradient(circle at 30% 30%, rgba(56,200,245,.12), transparent);
  animation: brise ease-in infinite;
}
@keyframes brise {
  0%   { transform:translateY(0) scale(1); opacity:.7; }
  100% { transform:translateY(-115vh) scale(.2); opacity:0; }
}

.hero-box { position:relative; z-index:2; text-align:center; max-width:860px; }
.badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(56,200,245,.1); border:1px solid rgba(56,200,245,.28);
  color:var(--c-glow); padding:8px 20px; border-radius:30px;
  font-size:.87rem; font-weight:600; margin-bottom:20px;
}
.hero-title {
  font-family:var(--serif);
  font-size:clamp(1.9rem,5vw,3.4rem);
  font-weight:700; line-height:1.3; margin-bottom:16px;
  color:#fff; text-shadow:0 4px 20px rgba(0,0,0,.4);
}
.accent-text {
  background:linear-gradient(135deg, var(--c-glow), var(--c-teal-lt));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-tagline {
  font-size:clamp(1rem,2.2vw,1.35rem);
  color:var(--c-foam); margin-bottom:16px;
  letter-spacing:.07em; opacity:.9;
}
.hero-meta {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:10px 20px; margin-bottom:16px;
  font-size:.9rem; color:var(--c-muted);
}
.dot { opacity:.4; }

/* Supervision banner (hero) */
.supervision-banner {
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:center;
  background:linear-gradient(135deg,rgba(245,166,35,.12),rgba(255,209,128,.06));
  border:1.5px solid rgba(245,166,35,.35);
  border-radius:30px; padding:10px 24px; margin-bottom:28px;
  font-size:.9rem;
}
.sup-label  { color:var(--c-gold); font-weight:700; }
.sup-name   { color:var(--c-gold-lt); font-weight:600; }
.sup-divider{ color:rgba(245,166,35,.4); }

/* Stats */
.hero-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-bottom:44px; }
.stat-pill {
  background:var(--c-glass); border:1px solid var(--c-border);
  backdrop-filter:blur(10px); border-radius:14px;
  padding:16px 24px; text-align:center; min-width:130px;
  transition:transform var(--t), box-shadow var(--t);
}
.stat-pill:hover { transform:translateY(-4px); box-shadow:0 0 28px rgba(56,200,245,.25); }
.stat-n { font-size:2.3rem; font-weight:900; color:var(--c-glow); line-height:1; }
.stat-u { font-size:.82rem; color:var(--c-teal-lt); font-weight:600; margin:0 2px; }
.stat-l { display:block; font-size:.78rem; color:var(--c-muted); margin-top:4px; }

/* Jump buttons */
.hero-jumps { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.jump {
  display:inline-flex; align-items:center; gap:14px;
  text-decoration:none; border-radius:14px;
  padding:14px 22px; transition:all var(--t);
  min-width:210px;
}
.team-jump {
  background:linear-gradient(135deg,rgba(56,200,245,.15),rgba(26,111,168,.1));
  border:1.5px solid rgba(56,200,245,.38); color:var(--c-glow);
}
.team-jump:hover {
  background:linear-gradient(135deg,rgba(56,200,245,.28),rgba(26,111,168,.2));
  transform:translateY(-3px); box-shadow:0 8px 28px rgba(56,200,245,.3);
}
.visitor-jump {
  background:linear-gradient(135deg,rgba(0,191,165,.22),rgba(77,208,196,.12));
  border:1.5px solid rgba(77,208,196,.45); color:var(--c-teal-lt);
}
.visitor-jump:hover {
  background:linear-gradient(135deg,rgba(0,191,165,.35),rgba(77,208,196,.22));
  transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,191,165,.3);
}
.research-jump {
  background:linear-gradient(135deg,rgba(245,166,35,.18),rgba(255,209,128,.1));
  border:1.5px solid rgba(245,166,35,.4); color:var(--c-gold-lt);
}
.research-jump:hover {
  background:linear-gradient(135deg,rgba(245,166,35,.3),rgba(255,209,128,.18));
  transform:translateY(-3px); box-shadow:0 8px 28px rgba(245,166,35,.25);
}
.jump-icon { font-size:1.6rem; }
.jump-text { text-align:right; }
.jump-text strong { display:block; font-size:.97rem; font-weight:700; }
.jump-text small  { font-size:.77rem; opacity:.75; }
.jump-arrow { font-size:1.2rem; margin-right:auto; animation:bounce .8s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

.hero-anim {
  opacity:0; transform:translateY(22px);
  animation:heroin .7s ease forwards;
  animation-delay:var(--d,0s);
}
@keyframes heroin { to { opacity:1; transform:translateY(0); } }

/* ─── ZONE LABELS ────────────────────────────────────────── */
.zone-label { position:relative; z-index:2; padding:0 24px; }
.zone-label-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 28px;
}
.zone-icon { font-size:1.8rem; flex-shrink:0; margin-top:4px; }
.zone-label-inner > div > strong { display:block; font-size:1.1rem; font-weight:800; }
.zone-label-inner > div > span   { display:block; font-size:.82rem; opacity:.65; margin-top:2px; }

.team-zone-label { background:#060f1a; padding-top:12px; }
.team-zone-label .zone-label-inner {
  background:rgba(56,200,245,.07);
  border:1.5px solid rgba(56,200,245,.3); border-radius:14px;
}
.team-zone-label .zone-label-inner > div > strong { color:var(--c-glow); }

.visitor-zone-label { background:#04120b; padding-top:12px; }
.visitor-zone-label .zone-label-inner {
  background:rgba(0,191,165,.08);
  border:1.5px dashed rgba(77,208,196,.4); border-radius:14px;
}
.visitor-zone-label .zone-label-inner > div > strong { color:var(--c-teal-lt); }

.why-zone-label { background:var(--z-why-bg); padding-top:14px; }
.why-zone-label .zone-label-inner {
  background:rgba(56,200,245,.06);
  border:1.5px solid rgba(56,200,245,.2); border-radius:14px;
}
.why-zone-label .zone-label-inner > div > strong { color:var(--c-glow); }

.research-zone-label { background:var(--z-research-bg); padding-top:14px; }
.research-zone-label .zone-label-inner {
  background:rgba(245,166,35,.06);
  border:1.5px solid rgba(245,166,35,.25);
  border-radius:14px 14px 0 0;
  flex-wrap:wrap; gap:14px;
}
.research-zone-label .zone-label-inner > div > strong { color:var(--c-gold-lt); }

.research-toc {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:12px; width:100%;
}
.research-toc a {
  color:var(--c-muted); text-decoration:none; font-size:.77rem;
  font-weight:600; padding:4px 10px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  transition:all .2s;
}
.research-toc a:hover { color:var(--c-gold-lt); background:rgba(245,166,35,.12); }

/* ─── TEAM SECTION ───────────────────────────────────────── */
.team-section { background:#060f1a; padding:50px 24px 70px; position:relative; z-index:1; }
.container { max-width:var(--max-w); margin:0 auto; }

.team-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin-bottom:52px;
}

.team-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(56,200,245,.15);
  border-radius:20px; padding:30px 22px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:14px;
  transition:all .35s cubic-bezier(.25,.46,.45,.94);
  position:relative; overflow:hidden;
}
.team-card::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 0%, rgba(56,200,245,.07), transparent 70%);
  opacity:0; transition:opacity .35s;
}
.team-card:hover { transform:translateY(-7px); border-color:rgba(56,200,245,.4); box-shadow:0 14px 36px rgba(56,200,245,.14); }
.team-card:hover::before { opacity:1; }

.team-card--leader { border-color:rgba(245,166,35,.35); background:rgba(245,166,35,.04); }
.team-card--leader::before { background:radial-gradient(ellipse at 50% 0%, rgba(245,166,35,.1), transparent 70%); }
.team-card--leader:hover { border-color:rgba(245,166,35,.6); box-shadow:0 14px 36px rgba(245,166,35,.18); }

/* Team avatar — real photo with fallback */
.team-avatar {
  width:110px; height:110px; border-radius:50%; overflow:hidden;
  flex-shrink:0; position:relative;
  border:3px solid rgba(56,200,245,.25);
  transition:border-color var(--t), transform var(--t);
}
.team-card--leader .team-avatar { border-color:rgba(245,166,35,.45); }
.team-card:hover .team-avatar { transform:scale(1.05); }
.team-avatar img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.avatar-fallback {
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--c-mid),#0a1e33);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:700; color:var(--c-glow);
  letter-spacing:.06em;
}

.team-info { display:flex; flex-direction:column; align-items:center; gap:6px; }
.team-name { font-size:1rem; font-weight:700; color:var(--c-white); line-height:1.35; }
.team-card--leader .team-name { color:var(--c-gold-lt); }
.team-role {
  display:inline-block; font-size:.74rem; font-weight:600;
  color:var(--c-glow);
  background:rgba(56,200,245,.1); border:1px solid rgba(56,200,245,.2);
  padding:3px 12px; border-radius:20px;
}
.team-role--leader { color:var(--c-gold-lt); background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.3); }

/* ─── SUPERVISION CARDS ──────────────────────────────────── */
.supervision-section { text-align:center; }
.sup-section-label {
  font-size:1rem; font-weight:700; color:var(--c-gold);
  margin-bottom:20px; letter-spacing:.04em;
}
.sup-cards { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; }

.sup-card {
  display:flex; align-items:center; gap:16px;
  background:linear-gradient(135deg,rgba(245,166,35,.08),rgba(255,209,128,.04));
  border:1.5px solid rgba(245,166,35,.3);
  border-radius:18px; padding:20px 28px; min-width:240px;
  transition:all var(--t);
}
.sup-card:hover {
  transform:translateY(-3px);
  border-color:rgba(245,166,35,.55);
  box-shadow:0 10px 28px rgba(245,166,35,.15);
}

/* Supervisor avatar — photo with emoji fallback */
.sup-avatar-wrap {
  width:80px; height:80px; border-radius:50%; overflow:hidden;
  flex-shrink:0; border:2px solid rgba(245,166,35,.4);
  position:relative; background:rgba(245,166,35,.08);
  transition:border-color var(--t);
}
.sup-card:hover .sup-avatar-wrap { border-color:rgba(245,166,35,.7); }
.sup-avatar-wrap img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.sup-avatar-fallback {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  background:linear-gradient(135deg,rgba(60,40,10,.9),rgba(8,17,31,.95));
}

.sup-info { display:flex; flex-direction:column; gap:4px; text-align:right; }
.sup-card-name { font-size:1rem; font-weight:700; color:var(--c-gold-lt); }
.sup-card-role { font-size:.78rem; color:var(--c-muted); }

/* ─── VISITOR / SUMMARY SECTION ─────────────────────────── */
.visitor-section { background:var(--z-visitor-bg); padding:52px 24px 72px; position:relative; z-index:1; }

.visitor-intro { text-align:center; max-width:680px; margin:0 auto 44px; }
.visitor-intro h2 {
  font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:700; color:var(--c-teal-lt); margin-bottom:14px;
}
.visitor-intro p { font-size:1rem; color:var(--c-muted); line-height:1.9; }
.visitor-intro strong { color:var(--c-white); }

/* Summary blocks */
.summary-block {
  border-radius:20px; padding:28px 28px 32px;
  margin-bottom:24px; border:1px solid transparent;
  transition:border-color var(--t), box-shadow var(--t);
}
.sb-red  { background:rgba(255,80,80,.04);   border-color:rgba(255,80,80,.15); }
.sb-blue { background:rgba(56,200,245,.04);  border-color:rgba(56,200,245,.15); }
.sb-teal { background:rgba(0,191,165,.04);   border-color:rgba(0,191,165,.15); }
.sb-green{ background:rgba(60,220,120,.04);  border-color:rgba(60,220,120,.15); }
.sb-gold { background:rgba(245,166,35,.05);  border-color:rgba(245,166,35,.18); }

.sb-red:hover  { border-color:rgba(255,80,80,.3);   box-shadow:0 6px 24px rgba(255,80,80,.06); }
.sb-blue:hover { border-color:rgba(56,200,245,.3);  box-shadow:0 6px 24px rgba(56,200,245,.06); }
.sb-teal:hover { border-color:rgba(0,191,165,.3);   box-shadow:0 6px 24px rgba(0,191,165,.06); }
.sb-green:hover{ border-color:rgba(60,220,120,.3);  box-shadow:0 6px 24px rgba(60,220,120,.06); }
.sb-gold:hover { border-color:rgba(245,166,35,.35); box-shadow:0 6px 24px rgba(245,166,35,.08); }

.sb-header {
  display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap;
}
.sb-num {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:900; color:#fff;
  background: var(--c-bright);
}
.sb-red .sb-num  { background:rgba(220,60,60,.8); }
.sb-teal .sb-num { background:rgba(0,155,130,.85); }
.sb-green .sb-num{ background:rgba(40,180,100,.85); }
.sb-gold .sb-num { background:rgba(200,130,20,.85); }

.sb-title { font-size:1.1rem; font-weight:800; color:var(--c-teal-lt); flex:1; }
.sb-red .sb-title  { color:#ff8080; }
.sb-blue .sb-title { color:var(--c-glow); }
.sb-green .sb-title{ color:#7afa9a; }
.sb-gold .sb-title { color:var(--c-gold-lt); }

.sb-tag {
  font-size:.73rem; font-weight:600; color:var(--c-muted);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  padding:3px 10px; border-radius:12px;
}

.sb-content { font-size:.93rem; color:var(--c-muted); line-height:1.85; }
.sb-intro { margin-bottom:16px; }
.sb-intro strong { color:var(--c-white); }

/* highlight box */
.sb-highlight {
  background:rgba(56,200,245,.07); border:1px solid rgba(56,200,245,.18);
  border-radius:12px; padding:14px 18px; margin-bottom:18px;
  font-size:.95rem; color:var(--c-text);
}
.sb-highlight strong { color:var(--c-glow); }

/* Problem mini-cards */
.problem-cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;
}
.prob-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,80,80,.12);
  border-radius:12px; padding:16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:all var(--t);
}
.prob-card:hover { background:rgba(255,80,80,.06); border-color:rgba(255,80,80,.25); }
.prob-icon { font-size:1.8rem; }
.prob-card p { font-size:.84rem; color:var(--c-muted); margin:0; }
.prob-card strong { color:var(--c-white); }

/* Materials grid */
.material-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:14px;
}
.mat-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(77,208,196,.12);
  border-radius:14px; padding:20px 16px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  transition:all var(--t);
}
.mat-card:hover { background:rgba(0,191,165,.08); border-color:var(--c-teal); transform:translateY(-3px); }
.mat-emoji { font-size:2.2rem; }
.mat-card strong { font-size:.92rem; font-weight:700; color:var(--c-teal-lt); }
.mat-card p { font-size:.8rem; color:var(--c-muted); margin:0; line-height:1.6; }
.mat-card em { color:var(--c-glow); font-style:normal; font-size:.76rem; }

/* Steps flow */
.steps-flow { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.step-item {
  display:flex; align-items:flex-start; gap:12px;
  background:rgba(255,255,255,.03); border-radius:10px; padding:11px 14px;
  font-size:.88rem; color:var(--c-muted);
}
.step-num {
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--c-bright); color:#fff;
  font-size:.76rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.step-item strong { color:var(--c-white); }
.step-arrow { text-align:center; color:rgba(56,200,245,.35); font-size:1.1rem; line-height:1; }

/* Formula mini */
.formula-mini {
  display:flex; flex-direction:column; gap:6px; align-items:center;
  background:rgba(8,17,31,.7); border:1px solid rgba(56,200,245,.2);
  border-radius:12px; padding:14px 20px; text-align:center;
}
.fm-label { font-size:.78rem; color:var(--c-glow); font-weight:700; letter-spacing:.05em; }
.fm-eq { font-size:.95rem; color:#fff; font-weight:600; }

/* Bar chart */
.bar-section { margin-bottom:20px; }
.vb-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.vb-row span { width:145px; font-size:.82rem; color:var(--c-muted); text-align:right; flex-shrink:0; }
.vb-track { flex:1; height:28px; background:rgba(255,255,255,.05); border-radius:20px; overflow:hidden; }
.vb-fill {
  height:100%; width:0;
  background:linear-gradient(90deg, var(--c-mid), var(--c-glow));
  border-radius:20px; display:flex; align-items:center; padding-left:10px;
  font-size:.78rem; font-weight:700; color:#fff; white-space:nowrap;
  transition:width 1.4s cubic-bezier(.25,.46,.45,.94);
}
.gold-fill { background:linear-gradient(90deg,#c27d00,var(--c-gold)); box-shadow:0 0 14px rgba(245,166,35,.4); }
.gold-row span { color:var(--c-gold-lt); font-weight:700; }
.vb-fill.go { width:calc(var(--w)*1%); }

/* Result insights */
.result-insights { display:flex; flex-direction:column; gap:10px; }
.ri-item {
  display:flex; align-items:flex-start; gap:12px;
  background:rgba(255,255,255,.03); border-radius:10px; padding:12px 16px;
  font-size:.88rem; color:var(--c-muted); border:1px solid transparent;
  transition:all var(--t);
}
.ri-item:hover { background:rgba(56,200,245,.05); border-color:rgba(56,200,245,.12); }
.ri-item.ri-gold { background:rgba(245,166,35,.06); border-color:rgba(245,166,35,.2); }
.ri-item.ri-gold:hover { background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.35); }
.ri-item > span { font-size:1.3rem; flex-shrink:0; margin-top:1px; }
.ri-item strong { color:var(--c-white); }

/* Conclusion */
.conclusion-box {
  background:rgba(0,191,165,.05); border:1px solid rgba(0,191,165,.18);
  border-radius:14px; padding:20px 22px; margin-bottom:18px;
}
.conclusion-box p { font-size:.93rem; color:var(--c-muted); margin-bottom:10px; line-height:1.85; }
.conclusion-box p:last-child { margin-bottom:0; }
.conclusion-box strong { color:var(--c-teal-lt); }

/* SDG box */
.sdg-box {
  display:flex; align-items:center; gap:16px;
  background:linear-gradient(135deg,rgba(0,191,165,.08),rgba(56,200,245,.05));
  border:1px solid rgba(0,191,165,.25); border-radius:12px; padding:16px 20px;
}
.sdg-icon { font-size:2rem; flex-shrink:0; }
.sdg-box strong { display:block; font-size:.92rem; color:var(--c-teal-lt); margin-bottom:4px; }
.sdg-box p { font-size:.84rem; color:var(--c-muted); margin:0; }

/* ─── WHY SECTION ────────────────────────────────────────── */
.why-section { background:var(--z-why-bg); padding:50px 24px 70px; position:relative; z-index:1; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.why-card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r); padding:24px 20px; position:relative;
  transition:all var(--t);
}
.why-card:hover { transform:translateY(-4px); border-color:rgba(56,200,245,.35); background:rgba(56,200,245,.07); }
.why-num {
  position:absolute; top:16px; left:16px;
  font-size:.7rem; font-weight:700; color:var(--c-glow);
  background:rgba(56,200,245,.1); border:1px solid rgba(56,200,245,.2);
  padding:2px 8px; border-radius:8px;
}
.why-ico { font-size:2rem; margin-bottom:10px; }
.why-card h3 { font-size:.97rem; font-weight:700; color:var(--c-glow); margin-bottom:8px; }
.why-card p  { font-size:.87rem; color:var(--c-muted); line-height:1.75; }
.sdg-card { border-color:rgba(0,191,165,.3); }
.sdg-card:hover { border-color:var(--c-teal-lt); background:rgba(0,191,165,.08); }
.sdg-card h3 { color:var(--c-teal-lt); }
.sdg-card p em { color:var(--c-teal-lt); font-style:normal; font-weight:600; }

/* ─── RESEARCH SECTION ───────────────────────────────────── */
.research-section { background:var(--z-research-bg); padding:0 24px 80px; position:relative; z-index:1; }
.research-container { max-width:var(--max-w); margin:0 auto; }

.r-titlepage {
  background:linear-gradient(135deg,rgba(245,166,35,.07),rgba(26,111,168,.07));
  border:1px solid rgba(245,166,35,.18);
  border-radius:0 0 var(--r) var(--r);
  padding:40px 36px; text-align:center; margin-bottom:48px;
}
.r-school-name { font-size:.95rem; font-weight:600; color:var(--c-gold-lt); letter-spacing:.06em; margin-bottom:16px; }
.r-main-title {
  font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem);
  font-weight:700; color:#fff; line-height:1.4; margin-bottom:28px;
}
.r-meta-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px; max-width:820px; margin:0 auto;
}
.r-meta-item {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:10px 16px;
  display:flex; flex-direction:column; gap:4px;
}
.r-meta-wide { grid-column:1/-1; }
.r-meta-label { font-size:.73rem; color:var(--c-glow); font-weight:600; }
.r-meta-val   { font-size:.88rem; color:var(--c-text); font-weight:600; line-height:1.5; }

/* Chapter */
.r-chapter {
  border:1px solid var(--z-research-border);
  border-radius:var(--r); margin-bottom:28px; overflow:hidden;
  transition:border-color var(--t);
}
.r-chapter:hover { border-color:rgba(100,160,220,.32); }
.r-ch-header {
  background:rgba(26,111,168,.12);
  border-bottom:1px solid var(--z-research-border);
  padding:18px 28px; display:flex; align-items:center; gap:14px;
}
.r-ch-num {
  min-width:36px; height:36px; border-radius:50%;
  background:var(--c-bright); color:#fff;
  font-size:.85rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.r-ch-header h2 {
  font-family:var(--serif); font-size:clamp(1.1rem,2.5vw,1.4rem);
  font-weight:700; color:#fff;
}
.r-body {
  padding:28px 32px;
  font-size:clamp(.9rem,1.4vw,1rem);
  color:rgba(210,235,255,.88); line-height:1.95;
}
.r-body p { margin-bottom:18px; }
.r-body p:last-child { margin-bottom:0; }
.r-body ul,.r-body ol { padding-right:24px; margin:12px 0 18px; }
.r-body li { margin-bottom:10px; line-height:1.85; }
.r-body strong { color:rgba(220,245,255,.95); }

.r-sub {
  font-size:1rem; font-weight:700; color:var(--c-teal-lt);
  margin:22px 0 10px; padding-right:12px;
  border-right:3px solid var(--c-teal);
}

/* Infobox inside research */
.r-infobox {
  background:rgba(56,200,245,.06); border:1px solid rgba(56,200,245,.22);
  border-radius:12px; padding:16px 20px; margin:18px 0;
  font-size:.9rem; color:var(--c-text); line-height:1.8;
}
.r-infobox strong { color:var(--c-glow); }

/* Formula */
.r-formula {
  background:rgba(8,17,31,.7); border:1px solid rgba(56,200,245,.25);
  border-radius:12px; padding:18px 24px; margin:22px 0; text-align:center;
}
.r-formula-label { font-size:.8rem; color:var(--c-glow); font-weight:700; margin-bottom:10px; letter-spacing:.05em; }
.r-formula-eq {
  font-size:1.05rem; color:#fff; font-weight:600;
  padding:10px 0; border-top:1px solid rgba(56,200,245,.15);
}

/* Figure */
.r-figure {
  background:rgba(56,200,245,.04); border:1px dashed rgba(56,200,245,.2);
  border-radius:12px; padding:20px 24px; margin:16px 0;
  display:flex; align-items:center; gap:14px;
}
.r-figure-placeholder { font-size:2.2rem; flex-shrink:0; }
.r-figure-caption { font-size:.87rem; color:var(--c-muted); margin:0; line-height:1.7; }

/* Table */
.r-table-wrap { overflow-x:auto; margin-top:24px; border-radius:12px; }
.r-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.86rem; direction:rtl; min-width:600px; }
.r-table thead tr { background:linear-gradient(135deg,var(--c-mid),var(--c-bright)); }
.r-table th { padding:13px 16px; text-align:center; font-weight:700; color:#fff; white-space:nowrap; border-bottom:2px solid rgba(56,200,245,.3); }
.r-table td { padding:12px 16px; text-align:center; background:rgba(255,255,255,.025); color:rgba(210,235,255,.82); border-bottom:1px solid rgba(255,255,255,.05); transition:background .2s; }
.r-table tbody tr:hover td { background:rgba(56,200,245,.07); }
.tr-best td { background:rgba(0,191,165,.1) !important; font-weight:600; }
.td-green  { color:#5ee87a; font-weight:700; }
.td-blue   { color:var(--c-glow); font-weight:700; }
.td-yellow { color:var(--c-gold-lt); font-weight:700; }
.td-orange { color:#ffab40; font-weight:700; }

/* SDG box inside research */
.r-sdg {
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(135deg,rgba(0,191,165,.1),rgba(56,200,245,.06));
  border:1.5px solid rgba(0,191,165,.28); border-radius:14px;
  padding:22px 26px; margin-top:28px;
}
.r-sdg-icon { font-size:2.6rem; flex-shrink:0; }
.r-sdg strong { display:block; font-size:1rem; color:var(--c-teal-lt); margin-bottom:6px; }
.r-sdg p { font-size:.9rem; color:var(--c-muted); line-height:1.7; margin:0 !important; }

/* References */
.r-refs { list-style:none; padding-right:0; }
.r-refs li {
  padding:11px 16px; margin-bottom:10px;
  background:rgba(255,255,255,.03); border-radius:9px;
  border-right:3px solid var(--c-bright);
  font-size:.89rem; color:var(--c-muted); line-height:1.75;
  transition:all .22s;
}
.r-refs li:hover { background:rgba(56,200,245,.05); border-right-color:var(--c-glow); }

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer { background:#040b15; padding:60px 24px 36px; text-align:center; position:relative; overflow:hidden; z-index:1; }
.footer-waves { position:absolute; top:0; left:0; right:0; height:60px; }
.footer-waves svg { width:100%; height:100%; }
.footer-inner { position:relative; z-index:2; }
.footer-logo  { font-size:2.6rem; margin-bottom:12px; }
.footer-title { font-size:1rem; font-weight:700; color:#fff; margin-bottom:8px; }
.footer-by    { font-size:.84rem; color:var(--c-muted); margin-bottom:4px; line-height:1.7; max-width:700px; margin-left:auto; margin-right:auto; }
.footer-school{ font-size:.83rem; color:var(--c-muted); margin-bottom:6px; }
.footer-sup   { font-size:.85rem; color:var(--c-gold-lt); font-weight:600; margin-bottom:6px; }
.footer-sdg   { font-size:.88rem; color:var(--c-teal-lt); font-weight:600; margin-top:14px; }

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease; }
[data-reveal].in { opacity:1; transform:translateY(0); }

/* ─── RESPONSIVE — TABLET ────────────────────────────────── */
@media (max-width:768px) {
  .hamburger { display:flex; }
  .nav-menu {
    position:fixed; top:0; right:-100%; width:75%; max-width:280px; height:100vh;
    background:rgba(8,17,31,.97); backdrop-filter:blur(20px);
    flex-direction:column; align-items:flex-start;
    padding:76px 20px 40px; gap:6px;
    border-left:1px solid var(--c-border);
    transition:right .35s ease; flex-wrap:nowrap;
  }
  .nav-menu.open { right:0; }
  .nlink { font-size:.95rem; padding:10px 14px; width:100%; }

  .hero-jumps { flex-direction:column; align-items:center; }
  .jump { min-width:260px; }
  .supervision-banner { font-size:.84rem; padding:8px 16px; }

  .team-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  .sup-cards { flex-direction:column; align-items:center; }

  .summary-block { padding:20px 18px 24px; }
  .material-grid { grid-template-columns:repeat(2,1fr); }
  .problem-cards { grid-template-columns:1fr; }

  .r-body { padding:20px; }
  .r-ch-header { padding:14px 20px; }
  .r-titlepage { padding:28px 20px; }
  .r-sdg { flex-direction:column; text-align:center; }
  .sdg-box { flex-direction:column; text-align:center; }
  .zone-label-inner { flex-direction:column; gap:10px; }
  .vb-row span { width:110px; }
}

/* ─── RESPONSIVE — MOBILE ────────────────────────────────── */
@media (max-width:480px) {
  .hero-title { font-size:1.7rem; }
  .hero-stats { gap:10px; }
  .stat-pill { min-width:100px; padding:12px 16px; }
  .stat-n { font-size:1.9rem; }
  .why-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .material-grid { grid-template-columns:1fr; }
  .r-meta-grid { grid-template-columns:1fr; }
  .r-meta-wide { grid-column:auto; }
  .r-table { min-width:500px; font-size:.8rem; }
  .vb-row span { width:100px; font-size:.76rem; }
  .sb-title { font-size:1rem; }
}