@font-face {
	font-family: "thinSans";
	src: url("Thin sans.ttf") format("truetype");
}

:root{
      --bg: #0b0d12;
      --bg-secondary: #12151c;
      --card: #161a22;
      --border: #252b36;
      --text: #f5f7fa;
      --muted: #aab2bf;
      --accent: #82ff7c;
      --accent-hover: #a1ff9d;
      --max-width: 1150px;
    }

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

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family: "thinSans", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 2.5;
    }

    a{
      color: inherit;
      text-decoration: none;
    }

    img{
      width:100%;
      display:block;
      border-radius:18px;
    }

    .container{
      width:min(92%, var(--max-width));
      margin:auto;
    }

    /* HERO */

    .hero{
      padding: 90px 0 60px;
      text-align:center;
    }

    .title{
      font-size: clamp(2.6rem, 5vw, 4.5rem);
      line-height:1.05;
      font-weight:800;
      letter-spacing:-2px;
      margin-bottom:20px;
    }

    .subtitle{
      color: var(--muted);
      font-size:1.15rem;
      max-width:850px;
      margin: 0 auto 35px;
    }

    .subsubtitle{
      color: #e9e9e9;
      font-size:0.85rem;
      max-width:850px;
      margin: 0 auto 35px;
    }

    .authors{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:16px;
      margin-bottom:35px;
      color: var(--muted);
    }

    .authors a{
      transition:0.2s;
    }

    .authors a:hover{
      color:white;
    }

    .button-group{
      display:flex;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:60px;
    }

    .btn{
      background: var(--card);
      border:1px solid var(--border);
      padding:14px 22px;
      border-radius:14px;
      font-weight:600;
      transition:0.2s;
    }

    .btn:hover{
      background: var(--accent);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .hero-media{
      border-radius:24px;
      overflow:hidden;
      border:1px solid var(--border);
      background: var(--card);
    }

    /* SECTION */

    section{
      padding: 80px 0;
    }

    .section-title{
      text-align: center;
      font-size:2rem;
      margin-bottom:24px;
      font-weight:700;
      letter-spacing:-1px;
    }

    .section-text{
      color: var(--muted);
      font-size:1.05rem;
      text-align: justify;
    }

    /* STATS */

    .stats-grid{
      margin-top:40px;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
      gap:20px;
    }

    .stat-card{
      background: var(--card);
      border:1px solid var(--border);
      border-radius:20px;
      padding:28px;
    }

    .stat-number{
      font-size:2rem;
      font-weight:800;
      margin-bottom:8px;
    }

    .stat-label{
      color: var(--muted);
    }

    /* VIDEO GRID */

    .video-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
      gap:24px;
      margin-top:35px;
    }

    .video-card{
      background: var(--card);
      border:1px solid var(--border);
      border-radius:20px;
      overflow:hidden;
    }

    .video-placeholder{
      aspect-ratio:16/9;
      display:flex;
      align-items:center;
      justify-content:center;
      color: var(--muted);
      background:#0f1319;
      border-bottom:1px solid var(--border);
    }

    .video-content{
      padding:20px;
    }

    .video-content h3{
      margin-bottom:8px;
    }

    .video-content p{
      color: var(--muted);
      font-size:0.95rem;
    }

    /* GALLERY */

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

    .gallery-item{
      background: var(--card);
      border:1px solid var(--border);
      border-radius:18px;
      overflow:hidden;
      min-height:220px;
    }

    .gallery-item .placeholder{
      height:220px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--muted);
      background:#0f1319;
    }

    /* CITATION */

    .citation{
      background: var(--card);
      border:1px solid var(--border);
      border-radius:20px;
      padding:30px;
      overflow:auto;
    }

    pre{
      color:#d6deeb;
      font-size:0.95rem;
    }

    footer{
      padding:50px 0;
      border-top:1px solid var(--border);
      text-align:center;
      color: var(--muted);
      font-size:0.95rem;
    }

    @media (max-width:700px){
      .hero{
        padding-top:60px;
      }

      .title{
        letter-spacing:-1px;
      }
    } 

    .stat-card img {
      display: block;
      margin: 0 auto;
      width: 80%;
    }