--- a
+++ b/web/style.css
@@ -0,0 +1,1276 @@
+/* DNA Helix Animation */
+.dna-helix {
+  position: relative;
+  width: 200px;
+  height: 400px;
+  margin: 0 auto;
+  perspective: 1200px;
+  transform-style: preserve-3d;
+  will-change: transform; /* Optimize animation performance */
+}
+
+.base-pair {
+  position: absolute;
+  width: 100%;
+  height: 20px;
+  animation: rotate 8s linear infinite;
+  transform-style: preserve-3d;
+  backface-visibility: hidden; /* Prevent flickering */
+  will-change: transform;
+}
+
+.base {
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+  text-shadow: 0 0 3px rgba(0,0,0,0.5);
+  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  backface-visibility: hidden;
+}
+
+.left-base {
+  left: 35px;
+  background: #FF0066;
+  animation: pulse 3s ease-in-out infinite;
+  filter: brightness(1.1);
+}
+
+.right-base {
+  right: 35px;
+  background: #00B7FF;
+  animation: pulse 3s ease-in-out infinite;
+  filter: brightness(1.1);
+}
+
+.base-connector {
+  position: absolute;
+  left: 50%;
+  width: 90px;
+  height: 3px;
+  background: linear-gradient(90deg, 
+      rgba(255, 0, 102, 0.8), 
+      rgba(255, 255, 255, 0.3) 50%,
+      rgba(0, 183, 255, 0.8)
+  );
+  transform: translateX(-50%);
+  box-shadow: 0 0 8px rgba(0,0,0,0.15);
+}
+
+@keyframes rotate {
+  0% { transform: rotateY(0deg) translateZ(40px) translateX(-20px); }
+  12.5% { transform: rotateY(45deg) translateZ(40px) translateX(-15px); }
+  25% { transform: rotateY(90deg) translateZ(40px) translateX(0px); }
+  37.5% { transform: rotateY(135deg) translateZ(40px) translateX(15px); }
+  50% { transform: rotateY(180deg) translateZ(40px) translateX(20px); }
+  62.5% { transform: rotateY(225deg) translateZ(40px) translateX(15px); }
+  75% { transform: rotateY(270deg) translateZ(40px) translateX(0px); }
+  87.5% { transform: rotateY(315deg) translateZ(40px) translateX(-15px); }
+  100% { transform: rotateY(360deg) translateZ(40px) translateX(-20px); }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+  50% { transform: scale(1.15); opacity: 1; filter: brightness(1.3); }
+  100% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+}
+/* DNAnalyzer - Main Stylesheet
+* Global styles for all pages
+*/
+/* Notification Banner Styling */
+.notification-banner {
+  background: linear-gradient(135deg, #FF6F00, #FF9100);
+  color: var(--white);
+  padding: 0.75rem 1rem 0.75rem 0.75rem;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 600;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: var(--z-navbar);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  animation: notifPulse 3s infinite;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.notification-banner.hide-notification {
+  transform: translateY(-100%);
+}
+
+.notification-banner.closed {
+  display: none !important;
+}
+
+.notification-banner .notification-link {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 700;
+  background-color: rgba(255, 255, 255, 0.2);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  margin: 0 0.5rem;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.notification-banner .notification-link:hover {
+  color: #FFD700;
+  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
+}
+
+.notification-banner .notification-close {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: var(--white);
+  font-size: 1.25rem;
+  line-height: 1;
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  padding: 0;
+}
+
+.notification-banner .notification-close::before {
+  content: "×";
+  display: block;
+  position: relative;
+  top: -1px;
+}
+
+.notification-banner .notification-close:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-50%) rotate(90deg);
+  color: #FFD700;
+  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
+}
+
+:root {
+  /* Brand colors from logo */
+  --magenta: #ff0066;
+  --blue: #00a4ef;
+  --orange: #f48022;
+  --white: #ffffff;
+  --dark-bg: #001427;
+  
+  /* Additional UI colors */
+  --dark-blue: #051e3e;
+  --light-blue: #2596be;
+  --light-gray: #f5f5f7;
+  --medium-gray: #86868b;
+  --dark-gray: #333333;
+  
+  /* Functional colors */
+  --success: #34c759;
+  --warning: #ff9500;
+  --error: #ff3b30;
+  
+  /* Typography */
+  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'IBM Plex Mono', monospace;
+  
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-xxl: 3rem;
+  
+  /* Border radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 20px;
+  
+  /* Shadows */
+  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.2);
+  
+  /* Transitions */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+  
+  /* Z-index layers */
+  --z-tooltip: 100;
+  --z-navbar: 200;
+  --z-modal: 300;
+}
+
+/* Reset & Base Styles */
+*, 
+*::before, 
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-body);
+  background-color: var(--dark-bg);
+  color: var(--white);
+  line-height: 1.6;
+  overflow-x: hidden;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  line-height: 1.2;
+  font-weight: 700;
+  margin-bottom: var(--space-md);
+}
+
+h1 {
+  font-size: 3.5rem;
+  margin-bottom: var(--space-lg);
+}
+
+h2 {
+  font-size: 2.5rem;
+  margin-bottom: var(--space-lg);
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+
+h4 {
+  font-size: 1.375rem;
+}
+
+p {
+  margin-bottom: var(--space-md);
+  color: rgba(255, 255, 255, 0.85);
+}
+
+a {
+  color: var(--blue);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--light-blue);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+button {
+  font-family: var(--font-body);
+  cursor: pointer;
+}
+
+code, pre {
+  font-family: var(--font-mono);
+}
+
+ul, ol {
+  padding-left: var(--space-lg);
+  margin-bottom: var(--space-md);
+}
+
+/* Container */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-lg);
+}
+
+.container-sm {
+  max-width: 800px;
+}
+
+.container-lg {
+  max-width: 1400px;
+}
+
+/* Navbar */
+.navbar {
+  position: fixed;
+  top: var(--notification-height, 0);
+  left: 0;
+  right: 0;
+  background: var(--dark-bg);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  z-index: var(--z-navbar);
+  padding: var(--space-md) 0;
+  transition: all var(--transition-normal), top 0.3s ease-in-out;
+}
+
+.navbar.scrolled {
+  background: var(--dark-blue);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  padding: var(--space-sm) 0;
+}
+
+.navbar-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.logo img {
+  height: 36px;
+  margin-right: var(--space-sm);
+}
+
+.logo-text {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--white);
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-links li {
+  margin: 0 var(--space-md);
+}
+
+.nav-links a {
+  color: var(--white);
+  font-weight: 500;
+  position: relative;
+  padding: var(--space-xs) 0;
+}
+
+.nav-links a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(90deg, var(--magenta), var(--blue));
+  transition: width var(--transition-normal);
+}
+
+.nav-links a:hover::after,
+.nav-links a.active::after {
+  width: 100%;
+}
+
+.nav-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.mobile-toggle {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--white);
+  font-size: 1.5rem;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  transition: all var(--transition-fast);
+  border: none;
+  text-align: center;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #FF7B00, #FFB347);
+  color: var(--white);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0, 164, 239, 0.4);
+  color: var(--white);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--white);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+  color: var(--white);
+}
+
+.btn-sm {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.btn-lg {
+  padding: 1rem 2rem;
+  font-size: 1.125rem;
+}
+
+.btn-icon {
+  margin-right: var(--space-xs);
+}
+
+.btn-github {
+  background: #24292e;
+  color: var(--white);
+}
+
+.btn-github:hover {
+  background: #2c3440;
+  color: var(--white);
+}
+
+.btn-discord {
+  background: #5865F2;
+  color: var(--white);
+}
+
+.btn-discord:hover {
+  background: #4752c4;
+  color: var(--white);
+}
+
+/* Hero section */
+.hero {
+  padding: 160px 0 100px;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-xxl);
+  align-items: center;
+}
+
+.hero-headings {
+  position: relative;
+  z-index: 2;
+}
+
+.hero h1 {
+  margin-bottom: var(--space-md);
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.hero h1 span {
+  background: linear-gradient(135deg, var(--magenta), var(--blue));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.hero-subtitle {
+  font-size: 1.25rem;
+  margin-bottom: var(--space-xl);
+  color: rgba(255, 255, 255, 0.85);
+  max-width: 500px;
+}
+
+.hero-buttons {
+  display: flex;
+  gap: var(--space-md);
+  margin-bottom: var(--space-xl);
+}
+
+.hero-animation {
+  position: relative;
+  width: 100%;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* DNA Helix Animation */
+.dna-helix {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  perspective: 1200px;
+}
+
+.base-pair {
+  position: absolute;
+  width: 100%;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: rotate3D 12s linear infinite;
+}
+
+@keyframes rotate3D {
+  0% { transform: rotateY(0deg); }
+  100% { transform: rotateY(360deg); }
+}
+
+.base {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: white;
+  position: absolute;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.left-base {
+  background: var(--magenta);
+  left: calc(50% - 120px);
+  animation: moveLeft 6s ease-in-out infinite;
+}
+
+.right-base {
+  background: var(--blue);
+  right: calc(50% - 120px);
+  animation: moveRight 6s ease-in-out infinite;
+}
+
+.base-connector {
+  width: 200px;
+  height: 3px;
+  background: linear-gradient(90deg, var(--magenta), var(--blue));
+  position: absolute;
+  animation: stretch 6s ease-in-out infinite;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+@keyframes moveLeft {
+  0%, 100% { transform: translateX(-12px); }
+  50% { transform: translateX(12px); }
+}
+
+@keyframes moveRight {
+  0%, 100% { transform: translateX(12px); }
+  50% { transform: translateX(-12px); }
+}
+
+@keyframes stretch {
+  0%, 100% { width: 200px; }
+  50% { width: 220px; }
+}
+
+/* Section styling */
+.section {
+  padding: var(--space-xxl) 0;
+  position: relative;
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: var(--space-xxl);
+}
+
+.section-title h2 {
+  margin-bottom: var(--space-md);
+}
+
+.section-title p {
+  max-width: 700px;
+  margin: 0 auto;
+  font-size: 1.1rem;
+}
+
+.section-bg-dark {
+  background-color: var(--dark-blue);
+}
+
+.section-bg-gradient {
+  background: linear-gradient(135deg, rgba(5, 30, 62, 0.7), rgba(0, 20, 39, 0.7));
+}
+
+/* Cards */
+.card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  transition: all var(--transition-normal);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: var(--shadow-md);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.card-title {
+  font-size: 1.3rem;
+  margin-bottom: var(--space-md);
+}
+
+.card-icon {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, var(--magenta), var(--blue));
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  color: var(--white);
+  margin-bottom: var(--space-md);
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--space-xl);
+}
+
+/* Feature cards */
+.feature-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-lg);
+  padding: var(--space-xl);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-normal);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  margin-bottom: var(--space-xl);
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: var(--shadow-md);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.feature-icon {
+  min-width: 60px;
+  height: 60px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+}
+
+.feature-icon-blue {
+  background: rgba(0, 164, 239, 0.15);
+  color: var(--blue);
+  border: 1px solid rgba(0, 164, 239, 0.3);
+}
+
+.feature-icon-magenta {
+  background: rgba(255, 0, 102, 0.15);
+  color: var(--magenta);
+  border: 1px solid rgba(255, 0, 102, 0.3);
+}
+
+.feature-icon-orange {
+  background: rgba(244, 128, 34, 0.15);
+  color: var(--orange);
+  border: 1px solid rgba(244, 128, 34, 0.3);
+}
+
+.feature-content h3 {
+  margin-bottom: var(--space-sm);
+}
+
+/* Stats */
+.stats-section {
+  padding: var(--space-xxl) 0;
+  text-align: center;
+  position: relative;
+  background: linear-gradient(135deg, rgba(5, 30, 62, 0.7), rgba(0, 20, 39, 0.7));
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-xl);
+  text-align: center;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.stat-item {
+  padding: var(--space-md);
+}
+
+.stat-number {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: var(--space-xs);
+  background: linear-gradient(135deg, var(--magenta), var(--blue));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.stat-label {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+/* Steps */
+.steps-container {
+  counter-reset: step;
+  position: relative;
+}
+
+.step-item {
+  position: relative;
+  padding-left: 70px;
+  margin-bottom: var(--space-xl);
+}
+
+.step-item::before {
+  counter-increment: step;
+  content: counter(step);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, var(--magenta), var(--blue));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--white);
+}
+
+.step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 25px;
+  top: 50px;
+  bottom: -40px;
+  width: 2px;
+  background: linear-gradient(to bottom, var(--blue), transparent);
+}
+
+.step-content h3 {
+  margin-bottom: var(--space-sm);
+}
+
+/* Footer */
+.footer {
+  background: var(--dark-blue);
+  padding: var(--space-xxl) 0 var(--space-md);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: var(--space-xl);
+}
+
+.footer-brand {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer-brand img {
+  height: 40px;
+  margin-bottom: var(--space-md);
+}
+
+.footer-brand p {
+  margin-bottom: var(--space-lg);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.footer-social {
+  display: flex;
+  gap: var(--space-md);
+}
+
+.social-link {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  transition: all var(--transition-fast);
+}
+
+.social-link:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+  color: var(--white);
+}
+
+.footer-nav h4 {
+  margin-bottom: var(--space-lg);
+  color: var(--white);
+  font-size: 1.1rem;
+}
+
+.footer-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-nav li {
+  margin-bottom: var(--space-sm);
+}
+
+.footer-nav a {
+  color: rgba(255, 255, 255, 0.7);
+  transition: color var(--transition-fast);
+}
+
+.footer-nav a:hover {
+  color: var(--white);
+}
+
+.footer-bottom {
+  margin-top: var(--space-xxl);
+  padding-top: var(--space-md);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+}
+
+.footer-copyright {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+}
+
+.footer-links {
+  display: flex;
+  gap: var(--space-lg);
+}
+
+.footer-links a {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+}
+
+.footer-links a:hover {
+  color: var(--white);
+}
+
+/* Background effects */
+.bg-gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: -1;
+}
+
+.bg-blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  opacity: 0.5;
+}
+
+.bg-blob-1 {
+  top: -200px;
+  right: -100px;
+  width: 600px;
+  height: 600px;
+  background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(0, 0, 0, 0));
+  animation: float 20s ease-in-out infinite alternate;
+}
+
+.bg-blob-2 {
+  bottom: -150px;
+  left: -100px;
+  width: 500px;
+  height: 500px;
+  background: linear-gradient(135deg, rgba(0, 164, 239, 0.2), rgba(0, 0, 0, 0));
+  animation: float 15s ease-in-out infinite alternate-reverse;
+}
+
+@keyframes float {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  100% { transform: translate(40px, 40px) rotate(15deg); }
+}
+
+/* Utilities */
+.text-center {
+  text-align: center;
+}
+
+.mb-sm {
+  margin-bottom: var(--space-sm);
+}
+
+.mb-md {
+  margin-bottom: var(--space-md);
+}
+
+.mb-lg {
+  margin-bottom: var(--space-lg);
+}
+
+.mb-xl {
+  margin-bottom: var(--space-xl);
+}
+
+.mt-sm {
+  margin-top: var(--space-sm);
+}
+
+.mt-md {
+  margin-top: var(--space-md);
+}
+
+.mt-lg {
+  margin-top: var(--space-lg);
+}
+
+.mt-xl {
+  margin-top: var(--space-xl);
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--magenta), var(--blue));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Responsive styles */
+@media screen and (max-width: 1024px) {
+  h1 {
+    font-size: 3rem;
+  }
+  
+  h2 {
+    font-size: 2.25rem;
+  }
+  
+  .hero-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+  
+  .hero-subtitle {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .hero-buttons {
+    justify-content: center;
+  }
+  
+  .hero-animation {
+    margin-top: var(--space-xl);
+  }
+  
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xl) var(--space-xxl);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+  
+  h2 {
+    font-size: 2rem;
+  }
+  
+  .navbar-container {
+    position: relative;
+  }
+  
+  .nav-links {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    background: var(--dark-bg);
+    padding: var(--space-lg);
+    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: all var(--transition-normal);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .nav-links.active {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  .nav-links li {
+    margin: var(--space-sm) 0;
+  }
+  
+  .mobile-toggle {
+    display: block;
+  }
+  
+  .hero-buttons {
+    flex-direction: column;
+    width: 100%;
+    max-width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .feature-card {
+    flex-direction: column;
+  }
+  
+  .footer-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-xl);
+  }
+  
+  .footer-bottom {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .container {
+    padding: 0 var(--space-md);
+  }
+  
+  h1 {
+    font-size: 2rem;
+  }
+  
+  h2 {
+    font-size: 1.75rem;
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .notification-banner {
+    padding: 0.5rem 2rem 0.5rem 0.5rem;
+    font-size: 0.9rem;
+  }
+  
+  .notification-banner span {
+    display: inline;
+  }
+  
+  .notification-banner .notification-link {
+    margin: 0 0.25rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .notification-banner {
+    padding: 0.5rem 2rem 0.5rem 0.5rem;
+    font-size: 0.8rem;
+    line-height: 1.4;
+  }
+  
+  .notification-banner span {
+    display: inline;
+  }
+  
+  .notification-banner .notification-link {
+    margin: 0.25rem;
+    padding: 0.15rem 0.35rem;
+  }
+}
+
+/* DNAnalyzer Disclaimer CSS Update */
+.disclaimer-section {
+padding: 1rem 0;
+background: transparent !important; /* Override any dark background */
+}
+
+.disclaimer-content {
+max-width: 90%;
+margin: 0 auto;
+background-color: rgba(30, 30, 40, 0.4); /* Subtle dark background */
+border-radius: 8px;
+padding: 1rem;
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.disclaimer-title {
+font-size: 0.85rem;
+margin-bottom: 0.75rem;
+opacity: 0.75;
+color: rgba(255, 255, 255, 0.8);
+font-weight: 500;
+text-transform: uppercase;
+letter-spacing: 0.5px;
+}
+
+.disclaimer-text {
+font-size: 0.7rem;
+ opacity: 0.65;
+ line-height: 1.4;
+ color: rgba(255, 255, 255, 0.7);
+}
+
+/* Futuristic Notification Effects */
+@keyframes notifPulse {
+  0% { box-shadow: 0 0 5px #FF9100; }
+  50% { box-shadow: 0 0 20px #FF9100; }
+  100% { box-shadow: 0 0 5px #FF9100; }
+}
+
+/* JavaScript will add this class when scrolling down */
+.hide-notification {
+  transform: translateY(-100%);
+}
+
+/* Scroll-based animations */
+.scroll-animate {
+opacity: 0;
+transform: translateY(30px);
+transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-animate.animate-in {
+opacity: 1;
+transform: translateY(0);
+}
+
+.scroll-animate-delay-1 {
+transition-delay: 0.2s;
+}
+
+.scroll-animate-delay-2 {
+transition-delay: 0.4s;
+}
+
+.scroll-animate-delay-3 {
+transition-delay: 0.6s;
+}
+
+.scroll-animate-right {
+opacity: 0;
+transform: translateX(50px);
+transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-animate-right.animate-in {
+opacity: 1;
+transform: translateX(0);
+}
+
+.scroll-animate-left {
+opacity: 0;
+transform: translateX(-50px);
+transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-animate-left.animate-in {
+opacity: 1;
+transform: translateX(0);
+}
+
+.scroll-animate-scale {
+opacity: 0;
+transform: scale(0.8);
+transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-animate-scale.animate-in {
+opacity: 1;
+transform: scale(1);
+}
+
+/* Interactive particles */
+.particles-container {
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+z-index: 0;
+overflow: hidden;
+pointer-events: none;
+}
+
+.floating-particle {
+position: absolute;
+background: rgba(255, 255, 255, 0.1);
+border-radius: 50%;
+pointer-events: none;
+transition: transform 0.3s ease;
+}
\ No newline at end of file