chg: usr: improve the gfx on homepage - implement login/register and activation for authentication - and add the first version of profile page #4

assets/css/homepage/_cta.scss

@@ -0,0 +1,75 @@
+.hero-cta {
+    position: relative;
+    display: inline-block;
+    font: 800 28px 'Rajdhani', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 6px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 22px 100px 20px;
+    border-radius: 4px;
+    border: 1px solid rgba(246, 125, 82, 0.25);
+
+    background: linear-gradient(to bottom, #b30c06 0%, #d63d15 50%, #f67d52 100%);
+
+    box-shadow:
+        0 0  0   1px rgba(173, 10, 5, 0.2),
+        0 0  30px    rgba(173, 10, 5, 0.35),
+        0 6px 24px   rgba(0, 0, 0, 0.5),
+        inset 0 1px 0 rgba(255, 255, 255, 0.12);
+
+    transition: transform 220ms ease, box-shadow 220ms ease, letter-spacing 220ms ease;
+    animation: rise 0.8s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+// Outer glow layer (blurred duplicate, always visible)
+.hero-cta::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border-radius: 7px;
+    background: linear-gradient(to bottom, #ad0a05, #f67d52);
+    filter: blur(18px);
+    opacity: 0.3;
+    z-index: -1;
+    transition: opacity 220ms ease;
+}
+
+.hero-cta:hover {
+    transform: translateY(-4px);
+    letter-spacing: 8px;
+    box-shadow:
+        0 0  0   1px rgba(246, 125, 82, 0.3),
+        0 0  50px    rgba(173, 10, 5, 0.65),
+        0 10px 32px  rgba(0, 0, 0, 0.45),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.hero-cta:hover::before {
+    opacity: 0.55;
+}
+
+.hero-cta:active {
+    transform: translateY(-1px);
+}
+
+// Version / copyright line
+.hero-meta {
+    position: relative;
+    z-index: 1;
+    font: 400 12px 'Rajdhani', sans-serif;
+    color: rgba(255, 255, 255, 0.5);
+    letter-spacing: 0.5px;
+    margin-top: 58px;
+    animation: rise 0.8s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.hero-meta a {
+    color: rgba(149, 207, 245, 0.65);
+    text-decoration: none;
+    transition: color 180ms;
+}
+
+.hero-meta a:hover {
+    color: #95cff5;
+}