:root {
        --navy: #0a1628;
        --blue: #1a3a6b;
        --accent: #1fadcc;
        --accent-light: #56c1e1;
        --gold: #f59e0b;
        --white: #ffffff;
        --gray-50: #f8fafc;
        --gray-100: #f1f5f9;
        --gray-200: #e2e8f0;
        --gray-400: #94a3b8;
        --gray-600: #475569;
        --gray-800: #1e293b;
        --text: #0f172a;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: "Sora", sans-serif;
        color: var(--text);
        background: var(--white);
        overflow-x: hidden;
      }

      /* ── NAV ── */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 3rem;
        height: 64px;
        background: rgba(10, 22, 40, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      }

      .nav-logo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
      }

      .nav-logo-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--accent), var(--accent-light));
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        font-weight: 500;
        color: #fff;
        letter-spacing: -0.5px;
      }

      .nav-logo span {
        font-size: 0.85rem;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.02em;
      }

      .nav-links {
        display: flex;
        gap: 2rem;
        list-style: none;
      }

      .nav-links a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: 0.82rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        transition: color 0.2s;
      }

      .nav-links a:hover {
        color: #fff;
      }

      .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        background: none;
        border: none;
      }

      .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        transition: all 0.3s;
      }

      /* ── HERO ── */
      .hero {
        position: relative;
        height: 100vh;
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: var(--navy);
      }

      .logo-text {
        font-style: italic;    
        font-weight: 900;      
        letter-spacing: -1px;  
      }

      .hero-bg {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 80% 60% at 60% 40%,
            rgba(37, 192, 235, 0.25) 0%,
            transparent 70%
          ),
          radial-gradient(
            ellipse 50% 40% at 20% 70%,
            rgba(96, 209, 250, 0.1) 0%,
            transparent 60%
          );
      }

      /* grid lines */
      .hero-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 60px 60px;
      }

      /* animated dots */
      .hero-dots {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }

      .dot {
        position: absolute;
        border-radius: 50%;
        background: var(--accent-light);
        opacity: 0;
        animation: floatDot var(--dur, 6s) var(--delay, 0s) ease-in-out infinite;
      }

      @keyframes floatDot {
        0% {
          transform: translateY(0) scale(1);
          opacity: 0;
        }
        20% {
          opacity: 0.5;
        }
        80% {
          opacity: 0.2;
        }
        100% {
          transform: translateY(-120px) scale(0.4);
          opacity: 0;
        }
      }

      .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 0 2rem;
        animation: fadeUp 0.9s ease both;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 1rem;
        border: 2px solid rgba(250, 96, 96, 0.35);
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        color: rgb(172, 45, 45);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 1.5rem;
        background: rgba(235, 37, 37, 0.1);
      }

      .hero h1 {
        font-family: "DM Serif Display", serif;
        font-size: clamp(2.2rem, 6vw, 4.5rem);
        color: #fff;
        line-height: 1.1;
        margin-bottom: 1.25rem;
      }

      .hero h1 em {
        font-style: normal;
        background: linear-gradient(135deg, #fa6060, #fd9393);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .hero p {
        font-size: clamp(0.95rem, 2vw, 1.15rem);
        color: rgba(255, 255, 255, 0.65);
        max-width: 540px;
        margin: 0 auto 2.5rem;
        font-weight: 300;
        line-height: 1.7;
      }

      .hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.85rem 2rem;
        background: var(--accent);
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
        border-radius: 8px;
        text-decoration: none;
        transition:
          background 0.2s,
          transform 0.2s,
          box-shadow 0.2s;
        box-shadow: 0 4px 24px rgba(37, 143, 235, 0.4);
      }

      .hero-cta:hover {
        background: #1a7abf;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(37, 143, 235, 0.4);
      }

      .hero-cta svg {
        transition: transform 0.2s;
      }
      .hero-cta:hover svg {
        transform: translateX(4px);
      }

      .hero-scroll {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        color: rgba(255, 255, 255, 0.35);
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        z-index: 2;
        animation: bounce 2s ease-in-out infinite;
      }

      @keyframes bounce {
        0%,
        100% {
          transform: translateX(-50%) translateY(0);
        }
        50% {
          transform: translateX(-50%) translateY(-6px);
        }
      }

      .hero-scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.4),
          transparent
        );
      }

      /* ── SECTION SHARED ── */
      section {
        padding: 5rem 0;
      }

      .container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 2rem;
      }

      .section-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--accent);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
      }

      .section-title {
        font-family: "DM Serif Display", serif;
        font-size: clamp(1.8rem, 4vw, 2.8rem);
        color: var(--navy);
        line-height: 1.15;
        margin-bottom: 1rem;
      }

      .section-sub {
        font-size: 0.95rem;
        color: var(--gray-600);
        max-width: 560px;
        line-height: 1.7;
        font-weight: 300;
      }

      /* ── RESEARCH ── */
      .research {
        background: var(--gray-50);
      }

      .research-categories {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-top: 3rem;
      }

      .research-category {
        background: #fff;
        border-radius: 16px;
        border: 1px solid var(--gray-200);
        overflow: hidden;
        transition:
          box-shadow 0.3s,
          transform 0.3s;
      }

      .research-category:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
        transform: translateY(-4px);
      }

      .cat-header {
        padding: 1.5rem 1.5rem 0;
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .cat-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        font-size: 1.3rem;
        flex-shrink: 0;
      }

      .cat-icon.blue {
        background: rgba(37, 99, 235, 0.1);
      }
      .cat-icon.green {
        background: rgba(16, 185, 129, 0.1);
      }
      .cat-icon.purple {
        background: rgba(139, 92, 246, 0.1);
      }

      .cat-header h3 {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        line-height: 1.3;
      }

      .cat-projects {
        padding: 1rem 1.5rem 1.5rem;
      }

      .cat-project {
        padding: 0.75rem 0;
        border-top: 1px solid var(--gray-100);
        cursor: pointer;
      }

      .cat-project:first-child {
        border-top: none;
        padding-top: 0.25rem;
      }

      .cat-project h4 {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 0.25rem;
        transition: color 0.2s;
      }

      .cat-project:hover h4 {
        color: var(--accent);
      }

      .cat-project p {
        font-size: 0.78rem;
        color: var(--gray-400);
        line-height: 1.5;
        font-weight: 300;
      }

      .learn-more {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--accent);
        margin-top: 0.35rem;
        opacity: 0;
        transition: opacity 0.2s;
      }

      .cat-project:hover .learn-more {
        opacity: 1;
      }

      /* ── NEWS ── */
      .news {
        background: #fff;
      }

      .news-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 2.5rem;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .news-list {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .news-item {
        display: grid;
        grid-template-columns: 140px 1fr auto;
        align-items: start;
        gap: 1.5rem;
        padding: 1.25rem 0;
        border-bottom: 1px solid var(--gray-100);
        transition: background 0.2s;
      }

      .news-item:first-child {
        border-top: 1px solid var(--gray-100);
      }

      .news-date {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        color: var(--gray-400);
        padding-top: 0.15rem;
      }

      .news-text {
        font-size: 0.88rem;
        color: var(--gray-800);
        line-height: 1.6;
      }

      .news-tag {
        padding: 0.25rem 0.75rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        white-space: nowrap;
      }

      .tag-pub {
        background: rgba(37, 99, 235, 0.1);
        color: var(--accent);
      }
      .tag-news {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
      }
      .tag-award {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
      }

      .view-all {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--accent);
        text-decoration: none;
        transition: gap 0.2s;
      }

      .view-all:hover {
        gap: 0.7rem;
      }

      /* ── PUBLICATIONS ── */
      .publications {
        background: var(--gray-50);
      }

      .pub-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2.5rem;
      }

      .pub-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
        padding: 1.5rem;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        align-items: start;
        transition: box-shadow 0.3s;
      }

      .pub-card:hover {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
      }

      .pub-venue {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--accent);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
      }

      .pub-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        line-height: 1.4;
        margin-bottom: 0.5rem;
      }

      .pub-authors {
        font-size: 0.8rem;
        color: var(--gray-600);
        line-height: 1.5;
      }

      .pub-authors strong {
        color: var(--navy);
      }

      .pub-links {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }

      .pub-link {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.35rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid var(--gray-200);
        color: var(--gray-600);
        transition: all 0.2s;
        white-space: nowrap;
      }

      .pub-link:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(37, 99, 235, 0.05);
      }

      /* ── JOIN ── */
      .join {
        background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
        padding: 5rem 0;
      }

      .join-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }

      .join h2 {
        font-family: "DM Serif Display", serif;
        font-size: clamp(2rem, 4vw, 3rem);
        color: #fff;
        margin-bottom: 1rem;
      }

      .join p {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.95rem;
        line-height: 1.7;
        font-weight: 300;
        margin-bottom: 2rem;
      }

      .join-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.85rem 1.75rem;
        background: var(--accent);
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
        border-radius: 8px;
        text-decoration: none;
        transition:
          background-color 0.2s,
          transform 0.2s;
        box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
      }

      .join-cta:hover {
        background: #1d4ed8;
        transform: translateY(-2px);
      }

      .contact-card {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        padding: 2rem;
      }

      .contact-card h3 {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 1.5rem;
      }

      .contact-row {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 2rem;
      }

      .contact-row:last-child {
        margin-bottom: 0;
      }

      .contact-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(37, 99, 235, 0.25);
        display: grid;
        place-items: center;
        font-size: 0.9rem;
        flex-shrink: 0;
      }

      .contact-info label {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--accent-light);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 0.2rem;
      }

      .contact-info p {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.5;
        margin: 0;
      }

      /* ── MAP ── */
      .map-section {
        background: #fff;
        padding: 4rem 0;
      }

      .map-placeholder {
        width: 100%;
        height: 300px;
        border-radius: 16px;
        overflow: hidden;
        margin-top: 2rem;
        border: 1px solid var(--gray-200);
        background: var(--gray-100);
        position: relative;
      }

      .map-placeholder iframe {
        width: 100%;
        height: 100%;
        border: none;
      }

      /* ── FOOTER ── */
      footer {
        background: var(--navy);
        padding: 2rem;
        text-align: center;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.35);
        letter-spacing: 0.03em;
      }

      /* ── MOBILE ── */
      @media (max-width: 900px) {
        nav {
          padding: 0 1.5rem;
        }
        .nav-links {
          display: none;
        }
        .nav-links.open {
          display: flex;
          flex-direction: column;
          position: fixed;
          top: 64px;
          left: 0;
          right: 0;
          background: var(--navy);
          padding: 1.5rem 2rem;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          gap: 1.25rem;
        }
        .hamburger {
          display: flex;
        }
        .research-categories {
          grid-template-columns: 1fr;
        }
        .news-item {
          grid-template-columns: 1fr;
          gap: 0.5rem;
        }
        .pub-card {
          grid-template-columns: 1fr;
        }
        .pub-links {
          flex-direction: row;
          flex-wrap: wrap;
        }
        .join-inner {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
      }

      /* ── REVEAL ── */
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }

      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }