feat(theme): implement Falukant theme with updated styles and components

frontend/src/views/public/FalukantLandingView.vue

@@ -32,14 +32,17 @@
   max-width: 1100px;
   margin: 0 auto;
   padding: 48px 20px 72px;
-  color: #40261a;
+  color: var(--color-text-primary);
 }
 
 .hero {
+  min-width: 0;
   padding: 32px;
   border-radius: var(--radius-lg);
-  background: linear-gradient(135deg, #f7e0bb 0%, #f6c27d 45%, #e8924d 100%);
-  box-shadow: 0 20px 60px rgba(106, 56, 20, 0.18);
+  background: #fffdf7;
+  border: 1px solid rgba(154, 113, 54, 0.24);
+  border-left: 4px solid #b18445;
+  box-shadow: 0 16px 36px rgba(76, 61, 36, 0.08);
 }
 
 .eyebrow {
@@ -48,12 +51,16 @@
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
+  color: #80612f;
 }
 
 .hero h1 {
   margin: 0;
   font-size: clamp(2rem, 4vw, 3.6rem);
   line-height: 1.08;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  word-break: normal;
 }
 
 .lead {
@@ -67,13 +74,18 @@
   display: inline-block;
   margin-top: 24px;
   padding: 12px 20px;
-  border-radius: 999px;
-  background: #40261a;
-  color: #fff;
+  border-radius: var(--radius-md);
+  background: var(--color-primary);
+  color: var(--color-text-on-accent);
   text-decoration: none;
   font-weight: 700;
 }
 
+.cta:hover {
+  background: var(--color-primary-hover);
+  color: var(--color-text-on-accent);
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -84,8 +96,8 @@
 .grid article {
   padding: 24px;
   border-radius: var(--radius-lg);
-  background: #fff7ef;
-  border: 1px solid rgba(64, 38, 26, 0.08);
+  background: #fffefa;
+  border: 1px solid rgba(75, 91, 75, 0.16);
 }
 
 .grid h2 {
@@ -97,4 +109,20 @@
   margin: 0;
   line-height: 1.65;
 }
+
+@media (max-width: 480px) {
+  .marketing-page {
+    padding: 24px 12px 44px;
+  }
+
+  .hero,
+  .grid article {
+    padding: 22px 18px;
+  }
+
+  .hero h1 {
+    font-size: clamp(1.58rem, 8.2vw, 2.15rem);
+    line-height: 1.12;
+  }
+}
 </style>