Update style.css

style.css

@@ -1,166 +1,268 @@
 :root {
-  --bg: #0b1020;
-  --panel: rgba(255, 255, 255, 0.06);
-  --panel2: rgba(255, 255, 255, 0.08);
-  --text: rgba(255, 255, 255, 0.92);
-  --muted: rgba(255, 255, 255, 0.72);
-  --muted2: rgba(255, 255, 255, 0.58);
-  --border: rgba(255, 255, 255, 0.10);
-  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
-  --radius: 18px;
-  --radius2: 14px;
-  --accent: #ff2a2a;
-  --accent2: #ff6b6b;
-}
-
-* { box-sizing: border-box; }
-
-html, body {
-  height: 100%;
+  --bg: #07101f;
+  --bg-soft: #0b1528;
+  --card: rgba(17, 27, 48, 0.88);
+  --card-border: rgba(132, 153, 196, 0.18);
+  --text: #eef3ff;
+  --muted: #a8b6d6;
+  --primary: #d24f68;
+  --primary-hover: #b84259;
+  --secondary: rgba(255, 255, 255, 0.08);
+  --secondary-hover: rgba(255, 255, 255, 0.14);
+  --shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
+  --radius-xl: 22px;
+  --radius-lg: 18px;
+  --radius-md: 12px;
+  --max-width: 1180px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
   margin: 0;
-  background: radial-gradient(1200px 600px at 20% -10%, rgba(255, 42, 42, 0.18), transparent 55%),
-              radial-gradient(900px 500px at 95% 10%, rgba(255, 107, 107, 0.12), transparent 60%),
-              var(--bg);
+  padding: 0;
+  background:
+    radial-gradient(circle at top center, rgba(61, 89, 160, 0.28), transparent 35%),
+    linear-gradient(180deg, #07101f 0%, #050b16 100%);
   color: var(--text);
-  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  min-height: 100%;
 }
 
-a { color: inherit; text-decoration: none; }
-a:hover { text-decoration: underline; }
+body {
+  padding: 28px 18px 40px;
+}
 
-.wrap {
-  max-width: 980px;
+.page {
+  max-width: var(--max-width);
   margin: 0 auto;
-  padding: 28px 18px 40px;
 }
 
-.hero {
-  padding: 26px 22px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: linear-gradient(180deg, var(--panel2), var(--panel));
+.card {
+  background: linear-gradient(180deg, rgba(20, 31, 56, 0.9), rgba(11, 20, 38, 0.92));
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-xl);
   box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+}
+
+.hero {
+  padding: 26px 24px 24px;
   margin-bottom: 18px;
+  background:
+    radial-gradient(circle at top right, rgba(144, 91, 255, 0.16), transparent 26%),
+    radial-gradient(circle at left center, rgba(78, 128, 255, 0.10), transparent 24%),
+    linear-gradient(180deg, rgba(24, 36, 63, 0.95), rgba(12, 21, 40, 0.96));
 }
 
-.badge {
+.eyebrow {
   display: inline-block;
-  padding: 7px 10px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  color: var(--muted);
   font-size: 12px;
-  letter-spacing: 0.2px;
-  background: rgba(0, 0, 0, 0.18);
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 7px 12px;
+  border-radius: 999px;
+  margin-bottom: 14px;
 }
 
 h1 {
-  margin: 12px 0 8px;
-  font-size: clamp(28px, 4vw, 42px);
-  letter-spacing: -0.6px;
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3.25rem);
+  line-height: 1.04;
+  letter-spacing: -0.03em;
 }
 
-.subtitle {
-  margin: 0 0 16px;
-  color: var(--muted);
-  font-size: 15.5px;
-  line-height: 1.45;
+.hero-subtitle {
+  margin: 14px 0 18px;
+  max-width: 900px;
+  color: #d8e3ff;
+  font-size: clamp(1rem, 2vw, 1.15rem);
+  line-height: 1.65;
 }
 
-.cta-row {
+.hero-actions {
   display: flex;
-  gap: 10px;
   flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 18px;
 }
 
 .btn {
-  padding: 10px 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0 18px;
   border-radius: 12px;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text);
+  text-decoration: none;
   font-weight: 600;
-  font-size: 14px;
+  transition: 0.2s ease;
+  border: 1px solid transparent;
 }
 
-.btn.primary {
-  border-color: rgba(255, 42, 42, 0.45);
-  background: linear-gradient(180deg, rgba(255, 42, 42, 0.22), rgba(255, 42, 42, 0.10));
+.btn-primary {
+  background: var(--primary);
+  color: white;
 }
 
-.card {
-  border: 1px solid var(--border);
-  border-radius: var(--radius2);
-  background: rgba(255, 255, 255, 0.05);
-  padding: 18px 18px;
-  margin: 14px 0;
+.btn-primary:hover {
+  background: var(--primary-hover);
 }
 
-h2 {
-  margin: 0 0 10px;
-  font-size: 18px;
-  letter-spacing: -0.2px;
+.btn-secondary {
+  background: var(--secondary);
+  color: var(--text);
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
-h3 {
-  margin: 8px 0 10px;
-  font-size: 15.5px;
-  color: var(--muted);
-  font-weight: 700;
+.btn-secondary:hover {
+  background: var(--secondary-hover);
 }
 
-ul {
-  margin: 10px 0 0 18px;
-  padding: 0;
-  color: var(--muted);
-  line-height: 1.55;
+.boundary-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
-.note {
-  margin: 12px 0 0;
-  color: var(--muted2);
-  font-size: 13.5px;
-  line-height: 1.5;
+.boundary-badges span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: #dce7ff;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 0.92rem;
 }
 
 .grid {
   display: grid;
-  gap: 14px;
-  grid-template-columns: 1fr;
+  gap: 18px;
+  margin-bottom: 18px;
+}
+
+.grid.two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid .card {
+  padding: 22px 22px 20px;
+}
+
+h2 {
+  margin: 0 0 14px;
+  font-size: 1.18rem;
+  line-height: 1.3;
+}
+
+.section-lead {
+  margin: 0 0 12px;
+  color: #e7eeff;
+}
+
+ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+li {
+  margin: 0 0 10px;
+  color: #d7e1fb;
+  line-height: 1.6;
 }
 
-@media (min-width: 820px) {
-  .grid { grid-template-columns: 1fr 1fr; }
+.muted {
+  color: var(--muted);
+  line-height: 1.65;
 }
 
-.pills {
+.strong-line {
+  margin-top: 14px;
+  color: #dce5fb;
+}
+
+.chips {
   display: flex;
-  gap: 8px;
   flex-wrap: wrap;
-  margin-top: 10px;
+  gap: 10px;
+  margin-bottom: 14px;
 }
 
-.pill {
-  padding: 7px 10px;
+.chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 12px;
   border-radius: 999px;
-  border: 1px solid var(--border);
-  background: rgba(0, 0, 0, 0.15);
-  color: var(--muted);
-  font-size: 12.5px;
-  font-weight: 600;
+  background: rgba(255, 255, 255, 0.05);
+  color: #e7eeff;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 0.92rem;
 }
 
-.footer {
+.footer-card {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 16px;
+  padding: 18px 20px;
+}
+
+.footer-brand {
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.footer-right {
+  display: flex;
   align-items: center;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  padding-top: 16px;
-  margin-top: 18px;
-  color: var(--muted2);
-  font-size: 13px;
+  gap: 10px;
+  color: var(--muted);
+  flex-wrap: wrap;
+}
+
+.footer-right a {
+  color: #dfe8ff;
+  text-decoration: none;
 }
 
-.footer-right { display: flex; gap: 10px; align-items: center; }
-.sep { opacity: 0.6; }
+.footer-right a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 860px) {
+  .grid.two {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-card {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 560px) {
+  body {
+    padding: 18px 12px 28px;
+  }
+
+  .hero,
+  .grid .card,
+  .footer-card {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1rem;
+  }
+}