Update style.css

style.css

@@ -1,28 +1,172 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');
+
+:root {
+    --bg: #0f0f14;
+    --card: #181822;
+    --border: rgba(255,255,255,0.08);
+    --text: #f3f3f3;
+    --muted: #b8b8c0;
+    --accent1: #d9465f;
+    --accent2: #7c3aed;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'Inter', sans-serif;
+    line-height: 1.7;
+}
+
+.container {
+    width: min(1100px, 92%);
+    margin: auto;
+}
+
+.hero {
+    padding: 110px 0 80px;
+    text-align: center;
+    background:
+        radial-gradient(circle at top left,
+        rgba(217,70,95,.2),
+        transparent 40%),
+        radial-gradient(circle at top right,
+        rgba(124,58,237,.2),
+        transparent 40%);
+}
+
+.badge {
+    display: inline-block;
+    padding: 8px 16px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    margin-bottom: 25px;
+    color: var(--muted);
+    background: rgba(255,255,255,0.03);
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+    font-family: 'Playfair Display', serif;
+    font-size: clamp(3rem, 7vw, 5rem);
+    margin-bottom: 18px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.subtitle {
+    max-width: 700px;
+    margin: auto;
+    color: var(--muted);
+    font-size: 1.15rem;
+}
+
+.flags {
+    margin-top: 25px;
+    color: #d5d5d5;
+}
+
+.section {
+    padding: 70px 0;
+}
+
+.section h2 {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.2rem;
+    margin-bottom: 35px;
+    text-align: center;
+}
+
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
+    gap: 24px;
 }
 
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 18px;
+    padding: 28px;
+    transition: .3s;
+}
+
+.card:hover {
+    transform: translateY(-6px);
+    border-color: rgba(217,70,95,.4);
+}
+
+.card h3 {
+    margin-bottom: 15px;
+    font-size: 1.4rem;
+}
+
+.card p {
+    color: var(--muted);
+    margin-bottom: 12px;
+}
+
+.card a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.status {
+    display: inline-block;
+    margin-top: 10px;
+    color: #ffb347;
+}
+
+.features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
+    gap: 20px;
+}
+
+.feature {
+    text-align: center;
+    padding: 30px;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--card);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.feature span {
+    font-size: 2rem;
+    display: block;
+    margin-bottom: 12px;
 }
+
+.feature p {
+    color: var(--muted);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    overflow: hidden;
+    border-radius: 16px;
+    border: 1px solid var(--border);
+}
+
+td {
+    padding: 18px 20px;
+    border-bottom: 1px solid var(--border);
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+tr:nth-child(even) {
+    background: rgba(255,255,255,0.02);
+}
+
+footer {
+    text-align: center;
+    padding: 50px 20px;
+    color: var(--muted);
+    border-top: 1px solid var(--border);
+}