@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Outfit:wght@300;600;900&family=Noto+Sans+JP:wght@400;700;900&family=Oswald:wght@500;700&display=swap');

  :root {
      --bg: #050505;
      --bg-accent: #0f0f0f;
      --text: #ffffff;
      --text-muted: #a0a0a0;
      --accent-cyan: #00f3ff;
      --accent-silver: #e0e0e0;
      --accent-purple: #7000ff;
      --accent-gradient: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
      --glass: rgba(255, 255, 255, 0.05);
      --glass-border: rgba(255, 255, 255, 0.1);
      --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }

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

  html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      width: 100%;
  }

  body {
      background-color: var(--bg);
      color: var(--text);
      font-family: 'Noto Sans JP', 'Inter', sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
      width: 100%;
      position: relative;
  }

  h1,
  h2,
  h3 {
      font-family: 'Outfit', 'Oswald', sans-serif;
      letter-spacing: -0.02em;
  }

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

  /* Header */
  .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      padding: 1.5rem 0;
      background: linear-gradient(to bottom, rgba(5, 5, 5, 0.8), transparent);
      border-bottom: 1px solid transparent;
      transition: var(--transition);
  }

  .logo {
      font-size: 1.5rem;
      font-weight: 900;
      font-family: 'Oswald', sans-serif;
      text-transform: uppercase;
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .nav ul {
      display: flex;
      list-style: none;
      gap: 2.5rem;
  }

  .nav a {
      text-decoration: none;
      color: var(--text);
      font-size: 0.85rem;
      font-weight: 700;
      text-transform: uppercase;
      opacity: 0.7;
  }

  /* Hero Overhaul */
  .hero {
      position: relative;
      height: 100vh;
      min-height: 850px;
      background-image: url('https://uniqstyle.co.jp/products/K680ERG/img/hero_key.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      overflow: hidden;
      display: flex;
      align-items: center;
  }

  .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
      z-index: 1;
  }

  .hero-container {
      position: relative;
      z-index: 2;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .hero-content {
      max-width: 1000px;
      padding-left: 5%;
  }

  .hero-heading {
      color: var(--accent-silver);
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 0.8rem;
      opacity: 0.9;
  }

  /* Typing Animation & Cursor FX */
  .hero-title-wrapper {
      display: flex;
      align-items: center;
      /* Perfect vertical center */
      min-height: 1.2em;
      position: relative;
      z-index: 2;
      margin-bottom: 2.5rem;
      /* Margin moved here from title */
  }

  .hero-title {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: clamp(2.5rem, 5.5vw, 3.8rem);
      line-height: 1.2;
      color: #fff;
      margin: 0;
      /* RESET ALL MARGINS to prevent misalignment */
      padding: 0;
      white-space: nowrap;
      position: relative;
      z-index: 2;
  }

  .typing-cursor {
      display: inline-block;
      width: 4px;
      /* Slightly thicker for visibility */
      height: 3rem;
      /* Fixed height relative to font size approx */
      background-color: var(--accent-cyan);
      margin-right: 1.2rem;
      border-radius: 2px;
      animation: cursorBlink 0.8s infinite;
      transform: translateY(2px);
      /* Optical adjustment */
      box-shadow: 0 0 10px var(--accent-cyan);
  }

  .hero-title.pikoon {
      animation: pikoonSurge 0.6s ease-out forwards;
  }

  @keyframes cursorBlink {

      0%,
      100% {
          opacity: 1;
      }

      50% {
          opacity: 0;
      }
  }

  @keyframes pikoonSurge {
      0% {
          filter: brightness(1);
          text-shadow: none;
      }

      50% {
          filter: brightness(3);
          text-shadow: 0 0 20px var(--accent-cyan), 0 0 40px var(--accent-cyan);
      }

      100% {
          filter: brightness(1.2);
          text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
      }
  }

  /* Feature List Indicators */
  .hero-ux-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
  }

  .hero-ux-features li {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 1.2rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
  }

  .indicator {
      width: 6px;
      height: 6px;
      background: var(--accent-cyan);
      border-radius: 50%;
      box-shadow: 0 0 10px var(--accent-cyan);
  }

  /* Tech Badge (No Glow) */
  .hero-assets {
      position: absolute;
      right: 15%;
      top: 15%;
  }

  .tech-badge img {
      width: 160px;
      filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
  }

  /* Icon Bar: Mockup Style (No Frame) */
  .hero-icon-bar {
      position: absolute;
      bottom: 8%;
      left: 5%;
      display: flex;
      gap: 1rem;
      align-items: flex-end;
  }

  .icon-item img {
      height: 110px;
      /* Increased from 75px as requested */
      width: auto;
      filter: none;
      opacity: 1;
      transition: var(--transition);
  }

  .icon-item:hover img {
      transform: translateY(-5px);
  }

  @media (max-width: 1200px) {
      .hero-title {
          white-space: normal;
      }

      .hero-title-wrapper {
          display: block;
      }

      .tesla-fx {
          display: none;
      }
  }

  @media (max-width: 992px) {
      .hero {
          min-height: 100vh;
          background-attachment: scroll;
      }

      .hero-content {
          padding: 0 2rem;
          text-align: center;
          max-width: 100%;
      }

      .hero-ux-features {
          align-items: center;
      }

      .hero-assets {
          display: none;
      }

      .hero-icon-bar {
          position: relative;
          bottom: 0;
          left: 0;
          margin: 3rem auto 0;
          width: fit-content;
          flex-wrap: wrap;
          justify-content: center;
      }
  }

  /* Existing Sections Styles (Keeping them stable) */
  .features,
  .gallery,
  .specs {
      padding: 8rem 0;
  }

  .logo {
      display: flex;
      align-items: center;
  }

  .logo img {
      height: 40px;
      /* Adjust height to fit header */
      width: auto;
      filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.5));
      /* Subtle glow to match theme */
  }

  .section-label {
      font-size: 0.8rem;
      color: var(--accent-cyan);
      letter-spacing: 3px;
      display: block;
      text-align: center;
      margin-bottom: 1rem;
  }

  .section-title {
      font-size: clamp(1.8rem, 8vw, 2.8rem);
      text-align: center;
      margin-bottom: 4rem;
      text-transform: uppercase;
      font-weight: 900;
      word-break: keep-all;
      white-space: normal;
  }

  .carousel-wrapper {
      position: relative;
      width: 100%;
      height: 600px;
      perspective: 2000px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 4rem;
      overflow: hidden;
      padding-bottom: 4rem;
      /* For buttons */
  }

  .carousel-container {
      position: relative;
      width: 900px;
      max-width: 90vw;
      height: 480px;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .carousel-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 18, 22, 0.98);
      /* Almost solid to avoid need for backdrop-filter */
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 4rem;
      padding: 3rem;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
      /* 
         Note: backdrop-filter omitted intentionally.
         When combined with preserve-3d and rotateY, older versions of Chrome (e.g. v116 on macOS 10.14)
         suffer from a rendering bug where the entire element's content becomes completely blurred.
      */
  }

  .carousel-nav {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 1.5rem;
      z-index: 100;
  }

  .carousel-btn {
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid var(--accent-cyan);
      color: var(--accent-cyan);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 1.5rem;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
  }

  .carousel-btn:hover {
      background: var(--accent-cyan);
      color: #000;
      box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
  }

  .showcase-text {
      flex: 1;
      max-width: 500px;
  }

  .showcase-num {
      font-family: 'Oswald', sans-serif;
      font-size: 5rem;
      font-weight: 700;
      color: var(--accent-cyan);
      opacity: 0.15;
      display: block;
      margin-bottom: -1.5rem;
      line-height: 1;
  }

  .showcase-text h3 {
      font-size: 1.8rem;
      line-height: 1.4;
      margin-bottom: 1.5rem;
      font-weight: 700;
      color: #fff;
  }

  .showcase-text p {
      font-size: 1.05rem;
      color: var(--text-muted);
      line-height: 1.8;
  }

  .showcase-image {
      flex: 1.2;
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
      border: 1px solid var(--glass-border);
  }

  .showcase-image::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(0, 243, 255, 0.05) 0%, transparent 100%);
      pointer-events: none;
  }

  .showcase-image img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .carousel-item:hover .showcase-image img {
      transform: scale(1.05);
  }

  /* Manifesto Intro Section */
  .manifesto-section {
      padding: 10rem 0 6rem;
      position: relative;
      overflow: hidden;
  }

  .manifesto-bg-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      /* Scale up and shift slightly to crop out bottom-right watermark */
      transform: scale(1.2) translate(-2%, -2%);
      transform-origin: center center;
  }

  .manifesto-bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* 
        【背景動画の明るさ調整用】
        rgba(...)の最後の数値（現在は0.6や0.4）が透明度です。
        0.0にすると一切フィルターがかからず動画そのままの明るさに、
        1.0に近づくほど真っ暗（背景色）になります。
        お好みの視認性に併せて微調整してください！
      */
      background: linear-gradient(135deg, rgba(5, 5, 5, 0.4) 0%, rgba(10, 20, 30, 0.5) 100%);
      z-index: 1;
  }

  .manifesto-container {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4rem;
  }

  .manifesto-text {
      flex: 1.5;
      max-width: 580px;
      z-index: 10;
      /* Keep above bg */
  }

  .manifesto-title {
      font-size: clamp(1.8rem, 3.5vw, 2.4rem);
      line-height: 1.5;
      font-weight: 900;
      margin-bottom: 2rem;
      color: #fff;
      word-break: keep-all;
      /* Prevent unnatural breaks */
  }

  .manifesto-title .highlight {
      color: var(--accent-cyan);
      font-size: clamp(1.8rem, 3.5vw, 2.4rem);
      display: inline-block;
      margin-top: 0.5rem;
      text-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
      white-space: nowrap;
  }

  .manifesto-desc {
      font-size: 1.1rem;
      color: var(--text-muted);
      line-height: 1.8;
  }

  .manifesto-visuals {
      flex: 1.2;
      position: relative;
      height: 550px;
  }

  .manifesto-card {
      position: absolute;
      border-radius: 20px;
      background: rgba(20, 22, 26, 0.7);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1.5rem;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .manifesto-card.before-card {
      top: 50px;
      left: 0;
      width: 320px;
      z-index: 1;
      opacity: 0.7;
      transform: scale(0.9) rotate(-2deg);
  }

  .manifesto-card.after-card {
      bottom: 50px;
      right: 0;
      width: 380px;
      z-index: 2;
      background: rgba(10, 28, 38, 0.85);
      /* Slightly cyan tinted glass */
      border: 1px solid rgba(0, 243, 255, 0.3);
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 243, 255, 0.1);
  }

  .manifesto-card:hover {
      transform: scale(1.02) translateY(-10px) !important;
      opacity: 1;
      z-index: 10;
  }

  .manifesto-img-wrapper {
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 1.5rem;
      background: #fff;
      /* For JPGs */
  }

  .manifesto-img-wrapper img {
      width: 100%;
      display: block;
      mix-blend-mode: multiply;
      /* Helps natural blending on white bg */
  }

  .status-badge {
      display: inline-block;
      padding: 0.4rem 1rem;
      border-radius: 30px;
      font-size: 0.85rem;
      font-weight: 700;
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .status-badge.bad {
      background: rgba(255, 80, 80, 0.15);
      color: #ff5050;
      border: 1px solid rgba(255, 80, 80, 0.3);
  }

  .status-badge.good {
      background: rgba(0, 243, 255, 0.15);
      color: var(--accent-cyan);
      border: 1px solid rgba(0, 243, 255, 0.3);
  }

  .manifesto-card p {
      font-size: 0.95rem;
      color: var(--text-muted);
      line-height: 1.6;
  }

  @media (max-width: 992px) {
      .manifesto-container {
          flex-direction: column;
      }

      .manifesto-visuals {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          gap: 2rem;
      }

      .manifesto-card {
          position: relative;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          width: 100% !important;
          transform: none !important;
          opacity: 1 !important;
      }
  }

  /* Reveal & Animation System */
  [data-reveal] {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  [data-reveal].revealed {
      opacity: 1;
      transform: translateY(0);
  }

  .showcase-text[data-reveal] {
      transition-delay: 0.1s;
  }

  .showcase-image[data-reveal] {
      transition-delay: 0.3s;
  }

  .showcase-text.revealed h3 {
      animation: pikoonSurge 0.8s ease-out 0.4s both;
      /* Delay slightly after text reveals */
  }

  @media (max-width: 992px) {
      .carousel-item {
          flex-direction: column;
          gap: 2rem;
          padding: 2rem;
          height: auto;
      }

      .carousel-wrapper {
          height: 800px;
      }

      .showcase-text {
          max-width: 100%;
          text-align: center;
      }

      .showcase-num {
          font-size: 3.5rem;
          margin-bottom: -1rem;
      }
  }

  .specs-images {
      display: flex;
      gap: 3rem;
      margin-bottom: 5rem;
      justify-content: center;
      align-items: flex-start;
  }

  .specs-img-card {
      flex: 1;
      background: #fff;
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      border: 1px solid var(--glass-border);
      transition: transform 0.4s ease;
  }

  .specs-img-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0, 243, 255, 0.15);
  }

  .specs-img-card img {
      width: 100%;
      height: auto;
      display: block;
      mix-blend-mode: multiply;
      /* Helps the sketch lines blend if background isn't pure white */
  }

  @media (max-width: 992px) {
      .specs-images {
          flex-direction: column;
          gap: 2rem;
      }
  }

  .specs-table {
      width: 100%;
      border: 1px solid var(--glass-border);
      border-collapse: collapse;
  }

  .specs-table th,
  .specs-table td {
      padding: 1rem 1.5rem;
      border: 1px solid var(--glass-border);
      font-size: 0.9rem;
  }

  .specs-table th {
      background: rgba(255, 255, 255, 0.02);
      color: var(--accent-cyan);
      text-align: left;
  }

  /* Photo Gallery */
  .photo-gallery-section {
      padding: 2rem 0;
  }

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

  .photo-gallery-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      cursor: zoom-in;
      border: 1px solid var(--glass-border);
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
      background: rgba(10, 20, 30, 0.5);
      aspect-ratio: 16 / 9;
  }

  .photo-gallery-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px rgba(0, 243, 255, 0.25);
      border-color: rgba(0, 243, 255, 0.5);
  }

  .photo-gallery-card img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
      opacity: 0.85;
  }

  .photo-gallery-card:hover img {
      transform: scale(1.1);
      opacity: 1;
  }

  @media (max-width: 992px) {
      .photo-gallery-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;
      }
  }

  @media (max-width: 576px) {
      .photo-gallery-grid {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding-bottom: 2rem;
          /* space for scrolling */
          -webkit-overflow-scrolling: touch;
          gap: 1rem;
          /* Hide scrollbars for clean look */
          scrollbar-width: none;
          -ms-overflow-style: none;
      }

      .photo-gallery-grid::-webkit-scrollbar {
          display: none;
      }

      .photo-gallery-card {
          flex: 0 0 85vw;
          /* Each card takes up most with next peaking out */
          scroll-snap-align: center;
      }
  }

  /* -------------------------------------
     SP Mobile Optimization (max-width: 576px)
     ------------------------------------- */
  @media (max-width: 576px) {

      /* Header & Nav */
      .header {
          padding: 1rem 0;
      }

      .nav {
          /* Allow horizontal scroll for nav items on tiny screens */
          overflow-x: auto;
          padding-bottom: 5px;
          -webkit-overflow-scrolling: touch;
      }

      .nav ul {
          gap: 1.2rem;
          padding-right: 1rem;
      }

      .nav a {
          font-size: 0.75rem;
      }

      .logo {
          font-size: 1.2rem;
      }

      .logo img {
          height: 25px;
          /* scale logo down and set specific height for aspect ratio */
          width: auto;
      }

      /* Hero section */
      .hero {
          min-height: 100svh;
          /* Better support for mobile browsers UI */
          padding-top: 80px;
          /* Push content down below header */
      }

      .hero-content {
          padding: 0 5%;
          /* Evenly space on left and right */
          width: 100%;
          box-sizing: border-box;
      }

      .hero-heading {
          font-size: 1.1rem;
          word-break: normal;
          /* Allow natural wrapping on SP */
      }

      .hero-title {
          font-size: 1.8rem !important;
          white-space: normal !important;
          word-break: normal;
          /* Fix horizontal overflow */
      }

      .hero-ux-features {
          flex-direction: column;
          gap: 0.8rem;
      }

      .hero-icon-bar {
          width: 90%;
          /* Prevent horizontal overflow */
      }

      .icon-item img {
          width: 100%;
          height: auto;
          /* Scale icon proportionally */
          max-width: 400px;
      }

      /* Carousel Adjustments */
      .carousel-wrapper {
          height: 700px;
          /* Reduced for mobile */
      }

      .carousel-container {
          width: 100vw;
          max-width: 100%;
      }

      .carousel-item {
          padding: 1.5rem;
          gap: 1.5rem;
          width: 85vw;
          /* Make cards fit within screen */
          left: 50%;
          margin-left: -42.5vw;
          /* Center horizontally */
      }

      .showcase-num {
          font-size: 2.5rem;
      }

      .showcase-text h3 {
          font-size: 1.3rem;
      }

      /* Manifesto */
      .manifesto-section {
          padding: 6rem 0 4rem;
      }

      .manifesto-title {
          font-size: 1.8rem;
          word-break: normal;
          /* Prevent text flowing off screen */
      }

      .manifesto-title .highlight {
          font-size: 1.8rem;
          white-space: normal;
          /* Allow highlight block to break on SP */
          word-break: normal;
      }

      /* Table Overflow */
      .specs-table {
          display: block;
          overflow-x: auto;
          white-space: nowrap;
      }

      /* Buttons */
      .cyber-btn {
          padding: 0.8rem 1.5rem;
          font-size: 1rem;
      }
  }

  .footer {
      padding: 4rem 0;
      text-align: center;
      border-top: 1px solid var(--glass-border);
  }

  .manual-download {
      margin-top: 4rem;
      text-align: center;
  }

  .cyber-btn {
      display: inline-block;
      padding: 1rem 3rem;
      background: transparent;
      color: var(--accent-cyan);
      border: 1px solid var(--accent-cyan);
      text-decoration: none;
      font-weight: 700;
      font-size: 1.2rem;
      border-radius: 50px;
      transition: all 0.3s ease;
      box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
      position: relative;
      overflow: hidden;
  }

  .cyber-btn:hover {
      background: var(--accent-cyan);
      color: #000;
      box-shadow: 0 0 30px rgba(0, 243, 255, 0.6);
      transform: translateY(-3px);
  }

  .footer-logo-link img {
      max-width: 140px;
      margin-bottom: 1.5rem;
      display: inline-block;
      opacity: 0.8;
      transition: opacity 0.3s;
  }

  .footer-logo-link:hover img {
      opacity: 1;
  }

  .copyright {
      color: var(--text-muted);
      font-size: 0.85rem;
  }

  /* Lightbox Styles */
  .lightbox {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
  }

  .lightbox.active {
      display: flex;
      opacity: 1;
  }

  .lightbox img {
      max-width: 90%;
      max-height: 90vh;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 243, 255, 0.3);
      border: 1px solid var(--glass-border);
      object-fit: contain;
  }

  .lightbox-close {
      position: absolute;
      top: 20px;
      right: 40px;
      color: var(--text-muted);
      font-size: 4rem;
      cursor: pointer;
      transition: color 0.3s;
      line-height: 1;
  }

  .lightbox-close:hover {
      color: var(--accent-cyan);
  }