udpate for coming soon

app/globals.css

@@ -61,6 +61,7 @@ body {
     var(--bg);
   font-family: "Space Grotesk", "IBM Plex Sans Arabic", "Cairo", sans-serif;
   line-height: 1.6;
+  text-rendering: optimizeLegibility;
 }
 
 a {
@@ -96,12 +97,55 @@ a {
   padding: 0.9rem 0;
 }
 
+.brand-block {
+  display: grid;
+  gap: 0.18rem;
+}
+
 .brand {
   font-size: 1.05rem;
   font-weight: 800;
   letter-spacing: 0.04em;
 }
 
+.brand-tagline {
+  font-size: 0.86rem;
+  color: var(--muted);
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem;
+  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
+}
+
+.header-nav a {
+  padding: 0.45rem 0.9rem;
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 600;
+  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
+}
+
+.header-nav a:hover,
+.header-nav a:focus-visible {
+  color: var(--text);
+  background: color-mix(in srgb, var(--surface-3) 86%, transparent);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .theme-toggle {
   border: 1px solid var(--line);
   background: color-mix(in srgb, var(--surface-2) 88%, transparent);
@@ -164,6 +208,24 @@ a {
   padding: clamp(1.3rem, 2vw, 2rem);
 }
 
+.section-stack {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.availability-badge {
+  margin: 0 0 0.7rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--brand-2) 28%, var(--line));
+  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
 .hero h1,
 .panel h1 {
   font-size: clamp(1.8rem, 5vw, 3.3rem);
@@ -194,8 +256,7 @@ a {
 }
 
 .cta-btn,
-.ghost-btn,
-.pending-btn {
+.ghost-btn {
   border-radius: 12px;
   border: 1px solid transparent;
   padding: 0.74rem 1rem;
@@ -213,12 +274,10 @@ a {
   background: var(--button-secondary);
 }
 
-.pending-btn {
-  margin-top: 0.6rem;
-  border-color: var(--line);
-  color: var(--muted);
-  background: var(--button-disabled);
+.cta-btn.is-disabled {
+  opacity: 0.7;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
 .cta-btn:hover,
@@ -279,6 +338,61 @@ a {
   color: var(--muted);
 }
 
+.section-heading h2,
+.availability-card h2,
+.contact-channel-card h3 {
+  margin: 0 0 0.45rem;
+}
+
+.contact-grid {
+  align-items: stretch;
+}
+
+.contact-channel-card {
+  display: grid;
+  gap: 1rem;
+}
+
+.channel-meta {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.contact-value {
+  margin: 0;
+  font-size: 0.94rem;
+  color: var(--text);
+  word-break: break-word;
+}
+
+.card-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  padding: 0.74rem 1rem;
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: white;
+  background: linear-gradient(115deg, var(--brand), var(--brand-2));
+  transition: transform 180ms ease, opacity 180ms ease;
+}
+
+.card-link:hover,
+.card-link:focus-visible {
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.card-link.is-disabled {
+  color: var(--muted);
+  background: var(--button-disabled);
+  border-color: var(--line);
+  cursor: not-allowed;
+}
+
 .list {
   margin: 0;
   padding-inline-start: 1.1rem;
@@ -300,6 +414,15 @@ a {
   font-size: 0.9rem;
 }
 
+.footer-copy {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.footer-copy p {
+  margin: 0;
+}
+
 .locale-badge {
   display: inline-flex;
   align-items: center;
@@ -379,9 +502,10 @@ a {
   opacity: 0.9;
 }
 
-.lang-toggle {
-  margin-inline-start: 0.18rem;
-  border-color: var(--line) !important;
+@media (min-width: 861px) {
+  .bottom-nav {
+    display: none;
+  }
 }
 
 @keyframes fade-up {
@@ -396,6 +520,16 @@ a {
 }
 
 @media (max-width: 860px) {
+  .bar {
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
   .split-grid,
   .stat-grid {
     grid-template-columns: 1fr;