@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&family=Nunito:wght@300;400;600&display=swap');

/* Root */
:root{
  --dark-bg: #0b132b;
  --deep-purple: #3a0ca3;
  --violet: #7209b7;
  --lavender: #b2a4ff;
  --text-light: #f8f9ff;
  --accent-blue: #4cc9f0;
  --glass: rgba(255,255,255,0.06);
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Nunito",sans-serif;
  color:var(--text-light);
  background:linear-gradient(135deg,var(--dark-bg),var(--deep-purple),var(--violet));
  background-size:400% 400%;
  animation: bgFlow 22s ease infinite;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* Background flow */
@keyframes bgFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Intro typewriter */
.intro-screen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--dark-bg),var(--deep-purple),var(--violet));
  z-index:9999;
}
.typewriter{
  font-family:"Playfair Display",serif;
  font-size:2rem;
  font-weight:700;
  font-style:italic;
  color:var(--text-light);
  border-right:3px solid rgba(255,255,255,0.8);
  white-space:nowrap;
  overflow:hidden;
  width:0;
  animation: typing 3.8s steps(36,end), blink 0.8s step-end infinite;
  text-shadow:0 0 14px rgba(255,255,255,0.6);
}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}

/* Floating orbs */
.orb-container{position:fixed; inset:0; z-index:0; pointer-events:none}
.orb{position:absolute;border-radius:50%;opacity:0.22;filter:blur(40px); transform:translate3d(0,0,0); animation:float 36s linear infinite}
.orb1{width:260px;height:260px;background:#b2a4ff; left:6%; top:8%; animation-delay:0s}
.orb2{width:320px;height:320px;background:#4cc9f0; right:6%; top:22%; animation-delay:6s}
.orb3{width:200px;height:200px;background:#7209b7; left:35%; top:50%; animation-delay:12s}
.orb4{width:220px;height:220px;background:#3a0ca3; right:18%; bottom:12%; animation-delay:18s}
.orb5{width:180px;height:180px;background:#a480ff; left:78%; top:6%; animation-delay:24s}
@keyframes float{
  0%{transform:translateY(0) translateX(0) scale(1)}
  50%{transform:translateY(-50px) translateX(30px) scale(1.08)}
  100%{transform:translateY(0) translateX(0) scale(1)}
}

/* -------------------------------------
   NAV (Home + Research dropdown)
-------------------------------------- */
.navbar{
  position:sticky; top:0; z-index:1001;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(11,19,43,0.7); backdrop-filter: blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
}

/* logo */
.logo{font-family:"Playfair Display",serif; color:var(--lavender); font-weight:600}

/* nav links container */
.nav-links{list-style:none; display:flex; gap:18px; margin:0; padding:0}

/* base link styles */
.nav-links a{
  color:var(--text-light);
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}
.nav-links a:hover{
  color:var(--accent-blue);
  text-shadow:0 0 10px var(--accent-blue);
}

/* dropdown button style */
.drop-btn{
  background:none;
  border:none;
  color:var(--text-light);
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:0.3s;
}
.drop-btn:hover{
  color:var(--accent-blue);
  text-shadow:0 0 10px var(--accent-blue);
}

/* style for nav toggle (mobile) */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  font-size:1.6rem;
  cursor:pointer;
  color:var(--text-light);
}

/* Dropdown menu container */
.dropdown{
  position:relative;
}
.dropdown-menu{
  position:absolute;
  top:100%;
  /* align submenu to the right edge of the parent */
  left:auto;
  right:0;
  min-width:100%;
  background:rgba(11,19,43,0.85);
  backdrop-filter:blur(6px);
  border-radius:8px;
  display:none;
  flex-direction:column;
  box-shadow:0 8px 28px rgba(0,0,0,0.5);
  overflow:hidden;
  z-index:1002;
}

/* items in dropdown */
.dropdown-menu li{
  list-style:none;
  margin:0;
  padding:0;
}
.dropdown-menu li a{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:12px 18px;
  color:var(--text-light);
  text-decoration:none;
  transition:0.25s;
  white-space:nowrap;
}
.dropdown-menu li a:hover{
  background:var(--accent-blue);
  color:#fff;
}

/* desktop hover show */
@media (hover:hover) and (pointer:fine){
  .dropdown:hover .dropdown-menu{
    display:flex;
  }
}

/* -------------------------------------
   HERO / Overview
-------------------------------------- */
.hero{padding:88px 20px 48px; text-align:center; position:relative; z-index:1}
.hero-panel{max-width:980px; margin:0 auto; background:linear-gradient(180deg,rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:14px; padding:28px; border:1px solid rgba(255,255,255,0.04); box-shadow:0 8px 40px rgba(0,0,0,0.45); transform:translateY(0); opacity:0; transition:all .9s ease}
.hero-panel.visible{opacity:1; transform:translateY(0)}
.hero h2{font-family:"Playfair Display",serif; color:var(--lavender); font-size:1.9rem; margin:0 0 10px; text-shadow:0 0 12px rgba(255,255,255,0.25)}
.overview-text{color:#e9e9ff; line-height:1.7; margin:0; font-size:1.02rem}

/* -------------------------------------
   SUMMARY OBJECTIVES
-------------------------------------- */
.summary-objectives{padding:56px 18px 36px; text-align:center; position:relative; z-index:1}
.summary-objectives h2{font-family:"Playfair Display",serif; color:var(--accent-blue); margin-bottom:28px; text-shadow:0 0 10px rgba(76,201,240,0.18)}
.obj-shapes{display:flex; gap:20px; justify-content:center; align-items:stretch; flex-wrap:wrap; max-width:1200px; margin:0 auto}
.obj-shape{flex:1 1 300px; padding:20px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); box-shadow:0 10px 30px rgba(0,0,0,0.45); opacity:0; transform:translateY(28px); transition:all .8s ease}
.obj-shape.visible{opacity:1; transform:translateY(0)}
.obj-shape h3{font-size:1.05rem; margin:0 0 10px; color:var(--lavender)}
.obj-shape ul{margin:0; padding-left:18px; color:#e6e6ff; line-height:1.6}
.obj-blue{box-shadow:0 10px 35px rgba(76,201,240,0.10); border-left:6px solid rgba(76,201,240,0.18)}
.obj-purple{box-shadow:0 10px 35px rgba(179,111,183,0.12); border-left:6px solid rgba(179,111,183,0.18)}
.obj-aqua{box-shadow:0 10px 35px rgba(102,230,220,0.08); border-left:6px solid rgba(102,230,220,0.18)}

/* Alternating animation */
@keyframes slideInRight {0% {opacity:0; transform:translateX(120px);}100%{opacity:1; transform:translateX(0);} }
@keyframes slideInLeft {0% {opacity:0; transform:translateX(-120px);}100%{opacity:1; transform:translateX(0);} }
.obj-shapes > .obj-shape:nth-of-type(1).visible {animation:slideInRight 0.9s ease-out forwards; animation-delay:0.15s;}
.obj-shapes > .obj-shape:nth-of-type(2).visible {animation:slideInLeft 0.9s ease-out forwards; animation-delay:0.35s;}
.obj-shapes > .obj-shape:nth-of-type(3).visible {animation:slideInRight 0.9s ease-out forwards; animation-delay:0.55s;}

@keyframes breatheGlow {0%{box-shadow:0 0 20px rgba(255,255,255,0.05);}50%{box-shadow:0 0 35px rgba(255,255,255,0.1);}100%{box-shadow:0 0 20px rgba(255,255,255,0.05);}}
.obj-shape{animation:breatheGlow 6s ease-in-out infinite; transition:transform 0.4s ease, box-shadow 0.4s ease;}
.obj-blue:hover{transform:translateY(-6px);box-shadow:0 0 45px rgba(76,201,240,0.4),0 0 20px rgba(76,201,240,0.3);}
.obj-purple:hover{transform:translateY(-6px);box-shadow:0 0 45px rgba(179,111,183,0.4),0 0 20px rgba(179,111,183,0.3);}
.obj-aqua:hover{transform:translateY(-6px);box-shadow:0 0 45px rgba(102,230,220,0.4),0 0 20px rgba(102,230,220,0.3);}

/* Glass Glow Link Buttons */
.link-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-light);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.link-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.link-pill:hover::before {opacity:1;}
.link-pill:hover {
  color: var(--accent-blue);
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(76,201,240,0.4), 0 0 12px rgba(76,201,240,0.25);
  border-color: rgba(76,201,240,0.4);
  background: rgba(255, 255, 255, 0.12);
}
.link-pill:hover span {text-shadow: 0 0 8px var(--accent-blue);}

/* DETAILS */
.details{max-width:1200px; margin:30px auto; padding:0 18px 60px; position:relative; z-index:1}
.detail-section{margin:36px 0; opacity:0; transform:translateY(36px); transition:all .9s ease}
.detail-section.visible{opacity:1; transform:translateY(0)}
.detail-inner{display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap}
.detail-inner.reverse{flex-direction:row-reverse}
.detail-media{flex:1 1 360px; min-width:260px}
.detail-media img{width:100%; height:100%; max-height:320px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,0.04); box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.detail-text{flex:1 1 520px; min-width:260px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.03)}
.detail-text h3{margin-top:0; color:var(--lavender); font-family:"Playfair Display",serif}
.detail-text h4{margin-bottom:6px; color:#e6e6ff}
.paper-list{margin:6px 0 0 18px; color:#e6eff}

/* DATA INSIGHTS SECTION */
.data-insights {
  text-align: center;
  padding:60px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  box-shadow:inset 0 0 40px rgba(114, 9, 183, 0.3);
}
.data-insights h2 {
  font-family:"Playfair Display",serif;
  color:var(--accent-blue);
  margin-bottom:10px;
  text-shadow:0 0 12px rgba(76,201,240,0.4);
}
.data-desc {
  color:#e9e9ff;
  max-width:700px;
  margin:0 auto 40px;
  line-height:1.6;
}
.chart-container {
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
}
.bar {
  position:relative;
  width:160px;
  height:250px;
  background:rgba(255,255,255,0.05);
  border-radius:12px;
  overflow:visible;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 0 25px rgba(0,0,0,0.4);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  flex-direction:column;
  padding-bottom:30px;
}
.bar::before {
  content:"";
  position:absolute;
  bottom:30px;
  left:0;
  width:100%;
  height:var(--value);
  background:linear-gradient(180deg, #4cc9f0, #7209b7);
  box-shadow:0 0 15px rgba(114,9,183,0.6);
  border-radius:12px 12px 0 0;
  animation:growBar 3s ease forwards, pulseGlow 2s ease-in-out infinite alternate;
}
.bar span {
  position:relative;
  bottom:0;
  width:100%;
  text-align:center;
  color:var(--lavender);
  font-size:0.9rem;
  font-weight:600;
  margin-top:12px;
}
@keyframes growBar { from { height: 0; } to { height: var(--value); } }
@keyframes pulseGlow { 0% { filter: brightness(1); } 100% { filter: brightness(1.3); } }

/* Footer */
footer{padding:36px 18px 60px; text-align:center; background:linear-gradient(180deg, rgba(11,19,43,0.5), rgba(11,19,43,0.9)); margin-top:18px}
.footer-inner p{margin:6px 0; color:#e9eff;}

/* -------------------------------------
   NEW: Mobile submenu show
------------------------------------- */
.nav-links.show {
  display:flex;
  flex-direction:column;
  gap:12px;
  background:rgba(11,19,43,0.85);
  backdrop-filter:blur(6px);
  position:absolute;
  top:100%;
  right:0;
  width:220px;
  padding:12px 16px;
  border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,0.5);
  z-index:1001;
}

/* Responsive */
@media (max-width:1000px){
  .detail-inner{flex-direction:column}
  .detail-media,.detail-text{min-width:100%}
  .obj-shapes{flex-direction:column}
  .hero{padding:64px 16px 36px}
  .typewriter{font-size:1.6rem}
}
@media (max-width:768px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .hero h2{font-size:1.6rem;}
  .obj-shape{padding:16px;}
}
@media (max-width:480px){
  .typewriter{font-size:1.1rem}
}