Update script.css

script.css

@@ -1,465 +1,647 @@
-/* COLOR SYSTEM */
-:root {
-  --color-primary: #3bb0d1;
-  --color-secondary-pink: #ff6170;
-  --color-secondary-green: #3dde99;
-  --color-secondary-deepblue: #243b53; /* custom deep blue for text */
-  --color-secondary-yellow: #ffc261;
+/* Reset & Base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 
-  --color-bg: #f8fafc;
-  --color-bg-elevated: #ffffff;
-  --color-border: #e2e8f0;
-  --color-text: #1f2933;
-  --color-text-soft: #6b7b93;
+:root {
+    /* Colors - Orange/Navy Theme */
+    --background: #F6F6F8;
+    --foreground: #333333;
+    --surface: #ffffff;
+    --muted: #E8E8E8;
+    --muted-foreground: #86868B;
+    --primary: #FF9D00;
+    --primary-hover: #FFB333;
+    --primary-soft: rgba(255, 157, 0, 0.1);
+    --navy: #2E4787;
+    --navy-soft: rgba(46, 71, 135, 0.1);
+    --accent-green: #3DDE99;
+    --accent-green-soft: rgba(61, 222, 153, 0.1);
+    --border: #E0E0E0;
+    --yellow: #FFC261;
+    --yellow-soft: rgba(255, 194, 97, 0.1);
+    
+    /* Spacing */
+    --container-max: 1200px;
+    --section-padding: 5rem 2rem;
+    
+    /* Shadows */
+    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.05);
+    --shadow-soft-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --shadow-primary: 0 6px 20px rgba(255, 157, 0, 0.3);
+}
 
-  --radius-lg: 18px;
-  --shadow-soft: 0 14px 35px rgba(15, 23, 42, 0.12);
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--background);
+    color: var(--foreground);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
 }
 
-/* GLOBAL RESET */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+/* Hero Section */
+.hero {
+    position: relative;
+    min-height: 70vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background: linear-gradient(to bottom, var(--background), var(--muted));
 }
 
-html,
-body {
-  margin: 0;
-  padding: 0;
+.hero-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.4;
 }
 
-body {
-  font-family: "Asap", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-  font-size: 17px;
-  line-height: 1.6;
-  background: var(--color-bg);
-  color: var(--color-text);
+.hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, 
+        rgba(250, 250, 250, 0.8), 
+        rgba(250, 250, 250, 0.6), 
+        rgba(250, 250, 250, 0.9));
 }
 
-/* TYPOGRAPHY */
-.heading-1 {
-  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-weight: 400;
-  font-size: 50px;
-  letter-spacing: -0.03em;
-  margin: 0 0 0.4em;
+.hero-content {
+    position: relative;
+    z-index: 10;
+    text-align: center;
+    padding: 6rem 2rem;
+    max-width: 900px;
 }
 
-.heading-2 {
-  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-weight: 400;
-  font-size: 35px;
-  letter-spacing: -0.02em;
-  margin: 0 0 0.4em;
+.hero h1 {
+    font-size: clamp(2.5rem, 8vw, 4.5rem);
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: var(--foreground);
 }
 
-.heading-3 {
-  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-weight: 400;
-  font-size: 30px;
-  letter-spacing: -0.01em;
-  margin: 0 0 0.4em;
+.hero-subtitle {
+    font-size: clamp(1.25rem, 3vw, 1.75rem);
+    font-weight: 500;
+    color: var(--muted-foreground);
+    margin-bottom: 1rem;
 }
 
-.heading-4 {
-  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-weight: 400;
-  font-size: 25px;
-  margin: 0 0 0.4em;
+.hero-description {
+    font-size: clamp(1rem, 2vw, 1.125rem);
+    color: var(--muted-foreground);
+    max-width: 42rem;
+    margin: 0 auto 2.5rem;
 }
 
-.heading-5 {
-  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-weight: 400;
-  font-size: 20px;
-  margin: 0 0 0.4em;
+.hero-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+    margin-top: 2rem;
 }
 
-.title-1 {
-  font-family: "Asap", system-ui, sans-serif;
-  font-size: 22px;
+/* Container */
+.container {
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding: 0 2rem;
 }
 
-.title-2 {
-  font-family: "Asap", system-ui, sans-serif;
-  font-size: 20px;
+/* Section */
+.section {
+    padding: var(--section-padding);
 }
 
-.body {
-  font-family: "Asap", system-ui, sans-serif;
-  font-size: 17px;
-  color: var(--color-text-soft);
-  margin: 0 0 1em;
+.section-muted {
+    background: rgba(232, 232, 232, 0.3);
 }
 
-.body-bold {
-  font-weight: 700;
+.section-title {
+    font-size: clamp(1.875rem, 4vw, 2.5rem);
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: var(--foreground);
 }
 
-.caption {
-  font-family: "Asap", system-ui, sans-serif;
-  font-size: 13px;
-  color: var(--color-text-soft);
+.section-description {
+    font-size: 1.125rem;
+    color: var(--muted-foreground);
+    max-width: 48rem;
+    margin-bottom: 4rem;
 }
 
-/* LAYOUT HELPERS */
-.container {
-  width: 100%;
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 20px;
+/* Subsection */
+.subsection {
+    margin-bottom: 5rem;
 }
 
-.section {
-  padding: 72px 0;
+.image-title-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 3rem;
 }
 
-.section-intro {
-  max-width: 640px;
+.section-image {
+    height: 5rem;
+    width: auto;
+    max-width: 200px;
 }
 
+.section-image-lg {
+    height: 7rem;
+    max-width: 280px;
+}
 
-/* GRID */
-.grid-4 {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 24px;
-  margin-top: 32px;
+@media (min-width: 768px) {
+    .section-image {
+        height: 7rem;
+        max-width: 280px;
+    }
+    
+    .section-image-lg {
+        height: 10rem;
+        max-width: 400px;
+    }
 }
 
+/* Grid */
 .grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 24px;
-  margin-top: 32px;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
 }
 
-/* HERO */
-.hero {
-  position: relative;
-  min-height: 70vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
+.grid-3 {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
 }
 
-.hero-video {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+@media (min-width: 768px) {
+    .grid-2 {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 
-.hero-overlay {
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(
-      circle at top,
-      rgba(255, 255, 255, 0.9),
-      rgba(255, 255, 255, 0.4)
-    ),
-    linear-gradient(to bottom, rgba(36, 59, 83, 0.5), rgba(36, 59, 83, 0.85));
-  mix-blend-mode: multiply;
+@media (min-width: 1024px) {
+    .grid-3 {
+        grid-template-columns: repeat(3, 1fr);
+    }
 }
 
-.hero-content {
-  position: relative;
-  text-align: left;
-  color: #ffffff;
-  padding: 80px 20px 96px;
+.build-grid {
+    max-width: 56rem;
+    margin: 0 auto;
 }
 
-.hero-subtitle {
-  font-family: "Asap", system-ui, sans-serif;
-  font-size: 20px;
-  margin: 0 0 0.6em;
-  color: #e5f4fb;
+.pricing-grid {
+    max-width: 80rem;
+    margin: 0 auto;
 }
 
-.hero .body {
-  color: #e0ecf7;
-  max-width: 620px;
+/* Cards */
+.card {
+    background: white;
+    border-radius: 1.5rem;
+    padding: 2rem;
+    box-shadow: var(--shadow-soft-lg);
+    transition: all 0.2s ease;
+}
+
+.card:hover {
+    box-shadow: var(--shadow-soft-lg);
+}
+
+.card-flex {
+    display: flex;
+    flex-direction: column;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin-bottom: 1.5rem;
+    color: var(--foreground);
+}
+
+.card-text {
+    color: var(--muted-foreground);
+    margin-bottom: 1.5rem;
+    flex-grow: 1;
+}
+
+.card-text-small {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    margin-bottom: 1rem;
 }
 
-.hero-actions {
-  margin-top: 24px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
+/* Badges */
+.badge {
+    display: inline-block;
+    padding: 0.375rem 0.75rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 1.5rem;
+}
+
+.badge-primary {
+    background: var(--primary-soft);
+    color: var(--primary);
+}
+
+.badge-success {
+    background: var(--accent-green-soft);
+    color: var(--accent-green);
+}
+
+.badge-muted {
+    background: var(--yellow-soft);
+    color: var(--yellow);
 }
 
-/* BUTTONS */
+/* Buttons */
 .btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 11px 20px;
-  border-radius: 999px;
-  border: 1px solid transparent;
-  font-family: "Asap", system-ui, sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  text-decoration: none;
-  cursor: pointer;
-  transition: transform 0.08s ease-out, box-shadow 0.12s ease-out,
-    background-color 0.12s ease-out, border-color 0.12s ease-out;
-  white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border: 2px solid transparent;
 }
 
 .btn-primary {
-  background-color: var(--color-primary);
-  color: #0b1f2a;
-  box-shadow: 0 10px 25px rgba(59, 176, 209, 0.45);
+    background: transparent;
+    color: var(--primary);
+    border-color: var(--primary);
 }
 
 .btn-primary:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 16px 35px rgba(59, 176, 209, 0.5);
+    background: var(--primary);
+    color: white;
 }
 
-.btn-secondary {
-  background-color: #ffffff;
-  border-color: var(--color-border);
-  color: var(--color-secondary-deepblue);
+.btn-outline {
+    background: transparent;
+    color: var(--muted-foreground);
+    border-color: var(--muted-foreground);
 }
 
-.btn-secondary:hover {
-  border-color: var(--color-primary);
+.btn-outline:hover {
+    border-color: var(--primary);
+    color: var(--primary);
 }
 
-.btn-ghost {
-  background: transparent;
-  border-color: rgba(255, 255, 255, 0.7);
-  color: #ffffff;
+.btn-full {
+    width: 100%;
+    justify-content: center;
 }
 
-.btn-ghost:hover {
-  background: rgba(15, 23, 42, 0.18);
+.icon {
+    width: 1rem;
+    height: 1rem;
 }
 
-.full-width {
-  width: 100%;
+.mb-4 {
+    margin-bottom: 1rem;
 }
 
-/* CARDS */
-.card {
-  background-color: var(--color-bg-elevated);
-  border-radius: var(--radius-lg);
-  padding: 24px 22px 26px;
-  border: 1px solid var(--color-border);
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start; /* aligne tout le contenu à gauche */
-  justify-content: flex-start; /* place tout le contenu en haut */
-  text-align: left; /* garantit un alignement texte à gauche */
+.mt-auto {
+    margin-top: auto;
 }
 
-.card > *:last-child {
-  margin-top: auto; /* pousse le bouton vers le bas */
+/* Link Tertiary (like a link but bigger) */
+.link-tertiary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--primary);
+    font-size: 1rem;
+    font-weight: 500;
+    text-decoration: none;
+    transition: all 0.2s ease;
 }
 
-.card-pricing {
-  position: relative;
-  overflow: hidden;
+.link-tertiary:hover {
+    text-decoration: underline;
 }
 
-.card-pricing::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(
-      circle at top left,
-      rgba(59, 176, 209, 0.18),
-      transparent 55%
-    ),
-    radial-gradient(
-      circle at bottom right,
-      rgba(255, 194, 97, 0.22),
-      transparent 60%
-    );
-  opacity: 0.8;
-  pointer-events: none;
+.link-centered {
+    justify-content: center;
+    width: 100%;
+    margin-top: auto;
 }
 
-.card-pricing > * {
-  position: relative;
-  z-index: 1;
+/* Video Wrapper */
+.video-wrapper {
+    aspect-ratio: 16 / 9;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-soft);
 }
 
-.card h3 {
-  margin-bottom: 12px; /* espace régulier entre le titre et le texte */
+.video-wrapper iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
 }
 
-/* Discord CTA Section */
-.discord-cta-section {
-  margin-top: 4rem;
-  text-align: center;
+/* GIF Wrapper */
+.gif-wrapper {
+    aspect-ratio: 16 / 9;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-soft);
 }
 
-.discord-cta-container {
-  background: linear-gradient(to bottom right, rgba(59, 176, 209, 0.1), rgba(61, 222, 153, 0.1));
-  border-radius: 0px;
-  width: 100%;
-  padding: 3rem;
-  border: 1px solid var(--color-border);
+.gif-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
-.discord-cta-description {
-  font-size: 1.125rem;
-  margin-bottom: 2rem;
-  color: rgba(36, 59, 83, 0.8);
-  max-width: 42rem;
-  margin-left: auto;
-  margin-right: auto;
+/* Dashboard Image Wrapper */
+.dashboard-image-wrapper {
+    border-radius: 1.25rem;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    box-shadow: var(--shadow-soft);
 }
 
-.discord-icon {
-  width: 1.25rem;
-  height: 1.25rem;
+.dashboard-image-wrapper img {
+    width: 100%;
+    height: auto;
 }
 
+/* Placeholder */
+.placeholder {
+    aspect-ratio: 16 / 9;
+    border-radius: 1.25rem;
+    background: var(--muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: var(--muted-foreground);
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    box-shadow: var(--shadow-soft);
+}
 
-/* PRICING */
-.pricing-header {
-  margin-bottom: 18px;
+/* Beta Link Text */
+.beta-link-text {
+    text-align: center;
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+    margin-top: 1.5rem;
 }
 
-.price {
-  font-family: "Segoe UI", system-ui, sans-serif;
-  font-size: 32px;
-  font-weight: 400;
-  color: var(--color-secondary-deepblue);
-  margin: 8px 0 0;
+.beta-link-text a {
+    color: var(--primary);
+    text-decoration: none;
 }
 
-.feature-list {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 24px;
-  font-size: 15px;
-  color: var(--color-text-soft);
+.beta-link-text a:hover {
+    text-decoration: underline;
 }
 
-.feature-list li {
-  position: relative;
-  padding-left: 20px;
-  margin-bottom: 6px;
+/* Accordion */
+.accordion {
+    width: 100%;
+    flex-grow: 1;
 }
 
-.feature-list li::before {
-  content: "•";
-  position: absolute;
-  left: 5px;
-  top: 0;
-  color: var(--color-secondary-green);
+.accordion-trigger {
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    padding: 0.75rem 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-/* BADGES */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+.accordion-trigger::-webkit-details-marker {
+    display: none;
 }
 
-.badge-lite {
-  background-color: rgba(255, 194, 97, 0.16);
-  color: #8b5a00;
+.accordion-trigger::after {
+    content: '+';
+    font-size: 1.25rem;
+    transition: transform 0.2s ease;
 }
 
-.badge-wireless {
-  background-color: rgba(61, 222, 153, 0.16);
-  color: #03553a;
+details[open] .accordion-trigger::after {
+    content: '−';
 }
 
-/* BUY SECTION */
-.section-buy {
-  background: radial-gradient(
-      circle at top left,
-      rgba(59, 176, 209, 0.08),
-      transparent 60%
-    ),
-    radial-gradient(
-      circle at bottom right,
-      rgba(255, 97, 112, 0.06),
-      transparent 60%
-    );
+.accordion-content {
+    padding: 1rem 0;
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
 }
 
-/* FOOTER */
-.footer {
-  padding: 32px 0 40px;
-  border-top: 1px solid var(--color-border);
-  background-color: #ffffff;
+.accordion-content ol {
+    list-style-position: inside;
+    margin-bottom: 1rem;
+}
+
+.accordion-content li {
+    margin-bottom: 0.5rem;
+}
+
+.accordion-content code {
+    background: var(--muted);
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+}
+
+/* QR Code */
+.qr-code-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 0.5rem 0;
+    margin-bottom: 1rem;
+}
+
+.qr-code {
+    width: 8rem;
+    height: 8rem;
+}
+
+/* Discord CTA */
+.discord-cta {
+    margin-top: 4rem;
+    padding: 2.5rem;
+    background: transparent;
+    border-radius: 1.5rem;
+    border: 1px solid var(--border);
+    text-align: center;
+}
+
+.discord-cta h3 {
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.discord-cta p {
+    font-size: 1.125rem;
+    color: var(--muted-foreground);
+    max-width: 42rem;
+    margin: 0 auto 2rem;
+}
+
+/* Pricing */
+.pricing-card {
+    display: flex;
+    flex-direction: column;
+}
+
+.pricing-header {
+    margin-bottom: 2rem;
+}
+
+.pricing-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
 }
 
-.footer-content {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.pricing-price {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--foreground);
 }
 
-.footer a {
-  color: var(--color-primary);
-  text-decoration: none;
+/* Feature List */
+.feature-list {
+    list-style: none;
+    margin-bottom: 2rem;
+    flex-grow: 1;
+}
+
+.feature-list li {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+    color: var(--muted-foreground);
 }
 
-.footer a:hover {
-  text-decoration: underline;
+.check-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: 0.125rem;
+    flex-shrink: 0;
+    stroke: var(--accent-green);
 }
 
 /* LINKS */
 a {
-  color: var(--color-primary);
+    color: var(--primary);
 }
 
-/* RESPONSIVE */
-@media (max-width: 1024px) {
-  .grid-4 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .hero {
-    border-radius: 0 0 24px 24px;
-  }
+/* Documentation Button */
+.doc-button {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 9999px;
+    text-decoration: none;
+    box-shadow: var(--shadow-soft-lg);
+    transition: all 0.3s ease;
+    overflow: hidden;
 }
 
-@media (max-width: 768px) {
-  .heading-1 {
-    font-size: 38px;
-  }
+.doc-button:hover {
+    box-shadow: 0 6px 20px rgba(59, 176, 209, 0.4);
+    padding-right: 1.5rem;
+}
 
-  .heading-2 {
-    font-size: 32px;
-  }
+.doc-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+}
 
-  .grid-4,
-  .grid-2 {
-    grid-template-columns: 1fr;
-  }
+.doc-text {
+    max-width: 0;
+    opacity: 0;
+    white-space: nowrap;
+    transition: all 0.3s ease;
+}
 
-  .hero {
-    min-height: 70vh;
-  }
+.doc-button:hover .doc-text {
+    max-width: 200px;
+    opacity: 1;
+}
 
-  .hero-content {
-    padding-top: 64px;
-    padding-bottom: 72px;
-  }
+/* Footer */
+.footer {
+    background: var(--background);
+    border-top: 1px solid var(--border);
+    padding: 3rem 0;
+}
 
-  .hero-actions {
+.footer-content-centered {
+    display: flex;
     flex-direction: column;
-    align-items: flex-start;
-  }
+    align-items: center;
+    gap: 0.75rem;
+    text-align: center;
+}
+
+.footer-content-centered p {
+    color: var(--muted-foreground);
+}
+
+.footer-content-centered a {
+    color: var(--primary);
+    font-weight: 500;
+    text-decoration: none;
+    transition: text-decoration 0.2s ease;
+}
+
+.footer-content-centered a:hover {
+    text-decoration: underline;
 }
+
+.footer-credits {
+    font-size: 0.875rem;
+}
+
+/* Smooth Scrolling */
+html {
+    scroll-behavior: smooth;
+}