<style>

   @font-face {
     font-family: 'Nebula';
     src: url('fonts/NebulaSans-Medium.ttf') format('ttf');
     font-weight: normal;
     font-style: normal;
   }


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Nebula', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: #000;
      color: #fff;
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    /* Hero Section */
    .project-hero {
      position: relative;
      height: 70vh;
      width: 100%;
      overflow: hidden;
    }

    #heroCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: #000;
    }

    .hero-content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      padding: 0 1rem;
    }

    .back-link {
      position: absolute;
      top: 2rem;
      left: 2rem;
      color: #22d3ee;
      text-decoration: none;
      font-size: 1rem;
      transition: all 0.3s ease;
    }

    .back-link:hover {
      color: #67e8f9;
      transform: translateX(-4px);
    }

    .chrome-icon-container {
      margin-bottom: 2rem;
      animation: fadeInUp 1s ease-out 0.1s both;
    }

    .chrome-icon-wrapper {
      position: relative;
      display: inline-block;
      padding: 1rem;
      background: rgba(34, 211, 238, 0.1);
      border-radius: 50%;
      border: 2px solid rgba(34, 211, 238, 0.3);
    }

    .chrome-icon-wrapper::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: linear-gradient(45deg, rgba(34, 211, 238, 0.3), rgba(34, 211, 238, 0.1));
      animation: pulse 2s ease-in-out infinite;
      z-index: -1;
    }

    .chrome-icon {
      width: 4rem;
      height: 4rem;
      color: #22d3ee;
    }

    .hero-title {
      font-size: 3rem;
      font-weight: bold;
      letter-spacing: -0.025em;
      margin-bottom: 1.5rem;
      animation: fadeInUp 1s ease-out;
    }

    .hero-subtitle {
      font-size: 1.125rem;
      color: #9ca3af;
      max-width: 600px;
      margin-bottom: 2rem;
      animation: fadeInUp 1s ease-out 0.2s both;
    }

    .hero-buttons {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      animation: fadeInUp 1s ease-out 0.3s both;
    }

    @media (min-width: 640px) {
      .hero-buttons {
        flex-direction: row;
      }
      .hero-title {
        font-size: 5rem;
      }
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 2rem;
      border-radius: 0.375rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
      font-size: 1rem;
    }

    .btn-primary {
      background-color: #0891b2;
      color: white;
    }

    .btn-primary:hover {
      background-color: #0e7490;
    }

    .btn-outline {
      border: 1px solid #4b5563;
      color: #d1d5db;
      background: transparent;
    }

    .btn-outline:hover {
      background-color: #1f2937;
    }

    .btn svg {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 0.5rem;
    }

    /* Disclaimer Section */
    .disclaimer-section {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 101, 101, 0.05));
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 0.75rem;
      margin: 2rem 0;
      padding: 2rem;
      position: relative;
      overflow: hidden;
    }

    .disclaimer-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.1), transparent);
      animation: shimmer 3s ease-in-out infinite;
    }

    .disclaimer-icon {
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
    }

    .disclaimer-icon svg {
      width: 3rem;
      height: 3rem;
      color: #f87171;
      animation: bounce 2s ease-in-out infinite;
    }

    .disclaimer-title {
      font-size: 1.5rem;
      font-weight: bold;
      color: #f87171;
      text-align: center;
      margin-bottom: 1rem;
    }

    .disclaimer-text {
      color: #d1d5db;
      text-align: center;
      line-height: 1.7;
      font-size: 1.1rem;
    }

    /* Project Overview */
    .project-overview {
      padding: 5rem 0;
    }

    .project-grid {
      display: grid;
      gap: 4rem;
      grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
      .project-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .project-meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .meta-item h3 {
      color: #6b7280;
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }

    .meta-item p {
      color: #d1d5db;
      font-size: 1rem;
      font-weight: 500;
    }

    .project-title {
      font-size: 2rem;
      font-weight: bold;
      letter-spacing: -0.025em;
      margin-bottom: 1.5rem;
    }

    .project-description {
      color: #d1d5db;
      margin-bottom: 1.5rem;
      font-size: 1.1rem;
    }

    .tech-stack {
      margin-bottom: 2rem;
    }

    .tech-stack h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .tech-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .badge {
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid;
    }

    .badge-yellow {
      background: rgba(245, 158, 11, 0.1);
      color: #fbbf24;
      border-color: rgba(245, 158, 11, 0.3);
    }

    .badge-blue {
      background: rgba(59, 130, 246, 0.1);
      color: #60a5fa;
      border-color: rgba(59, 130, 246, 0.3);
    }

    .badge-green {
      background: rgba(34, 197, 94, 0.1);
      color: #4ade80;
      border-color: rgba(34, 197, 94, 0.3);
    }

    .badge-purple {
      background: rgba(168, 85, 247, 0.1);
      color: #a78bfa;
      border-color: rgba(168, 85, 247, 0.3);
    }

    .badge-coral {
      
      background: rgba(247, 85, 93, 0.1);
      color: #FF6F61;
      border-color: rgba(247, 85, 93, 0.3);
    }

    .badge-azure {
      background: rgba(254, 100, 198, 0.1);
      color: #fe64c6;
      border-color: rgba(254, 100, 198, 0.3);
    }

    .project-image {
      position: relative;
    }

    .project-image img {
      width: 100%;
      height: auto;
      border-radius: 0.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      transition: transform 0.3s ease;
    }

    .project-image:hover img {
      transform: scale(1.02);
    }

    .image-caption {
      text-align: center;
      font-size: 0.875rem;
      color: #9ca3af;
      margin-top: 1rem;
    }

    /* Features Section */
    .features-section {
      padding: 5rem 0;
      background-color: #18181b;
    }

    .section-title {
      font-size: 2.5rem;
      font-weight: bold;
      letter-spacing: -0.025em;
      text-align: center;
      margin-bottom: 4rem;
      position: relative;
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #34d399, #06b6d4);
      border-radius: 2px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-bottom: 4rem;
    }

    @media (min-width: 768px) {
      .features-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .feature-card {
      background: rgba(39, 39, 42, 0.5);
      border: 1px solid rgba(63, 63, 70, 0.5);
      border-radius: 0.75rem;
      padding: 2rem;
      text-align: center;
      transition: all 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      background: rgba(39, 39, 42, 0.8);
      border-color: rgba(34, 211, 238, 0.3);
    }

    .feature-icon {
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
    }

    .feature-icon svg {
      width: 2rem;
      height: 2rem;
    }

    .feature-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .feature-description {
      color: #d1d5db;
    }

    /* Recognition Section */
    .recognition-section {
      padding: 2rem 0;
    }

    .recognition-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      background: rgba(254, 100, 198, 0.1);
      color: #fe64c6;
      border: 1px solid rgba(254, 100, 198, 0.3);
      border-radius: 0.375rem;
      font-size: 0.875rem;
      font-weight: 500;
    }

    .recognition-badge svg {
      width: 1rem;
      height: 1rem;
      margin-right: 0.5rem;
    }

    .recognition-content {
      text-align: center;
      margin-bottom: 1rem;
    }

    .recognition-title {
      font-size: 2rem;
      font-weight: bold;
      letter-spacing: -0.025em;
      margin-bottom: 1rem;
    }

    .recognition-description {
      color: #9ca3af;
      max-width: 48rem;
      margin: 0 auto;
      font-size: 1.1rem;
    }

    .recognition-image {
      max-width: 64rem;
      margin: 0 auto;
    }

    .recognition-card {
      background-color: #18181b;
      border: 1px solid #3f3f46;
      border-radius: 0.5rem;
      padding: 2rem;
    }

    .recognition-card img {
      max-width: 100%;
      height: auto;
      border-radius: 0.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      display: block;
      margin: 0 auto;
    }

    /* Stats Section */
    .stats-section {
      padding: 5rem 0;
      background-color: #18181b;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    @media (min-width: 768px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .stat-card {
      background: rgba(39, 39, 42, 0.5);
      border: 1px solid rgba(63, 63, 70, 0.5);
      border-radius: 0.75rem;
      padding: 2rem;
      text-align: center;
      transition: all 0.3s ease;
    }

    .stat-card:hover {
      transform: translateY(-4px);
      background: rgba(39, 39, 42, 0.8);
    }

    .stat-icon {
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
    }

    .stat-icon svg {
      width: 2rem;
      height: 2rem;
    }

    .stat-number {
      font-size: 2.5rem;
      font-weight: bold;
      color: #34d399;
      margin-bottom: 0.5rem;
    }

    .stat-label {
      color: #9ca3af;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* CTA Section */
    .cta-section {
      padding: 5rem 0;
      text-align: center;
    }

    .cta-title {
      font-size: 2rem;
      font-weight: bold;
      letter-spacing: -0.025em;
      margin-bottom: 1.5rem;
    }

    .cta-description {
      color: #9ca3af;
      max-width: 48rem;
      margin: 0 auto 2rem;
      font-size: 1.1rem;
    }

    .cta-buttons {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
    }

    @media (min-width: 640px) {
      .cta-buttons {
        flex-direction: row;
      }
    }

    /* Footer */
    .footer {
      border-top: 1px solid #3f3f46;
      background-color: #000;
      padding: 2rem 0;
    }

    .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .footer-text {
      font-size: 0.875rem;
      color: #9ca3af;
    }

    .footer-made {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
      margin-top: 0.5rem;
    }

    /* Animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 0.3;
        transform: scale(1);
      }
      50% {
        opacity: 0.6;
        transform: scale(1.05);
      }
    }

    @keyframes shimmer {
      0% {
        left: -100%;
      }
      100% {
        left: 100%;
      }
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-10px);
      }
      60% {
        transform: translateY(-5px);
      }
    }

    /* SVG Icons */
    .icon-chrome { color: #22d3ee; }
    .icon-image { color: #22d3ee; }
    .icon-zap { color: #4ade80; }
    .icon-shield { color: #60a5fa; }
    .icon-users { color: #22d3ee; }
    .icon-star { color: #fbbf24; }
    .icon-download { color: #4ade80; }
    .icon-alert { color: #f87171; }
  </style>
