Button style changes, created secondary class

src/app/globals.css

@@ -144,7 +144,39 @@ body {
   justify-content: center;
   gap: 8px;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: background-color 0.1s, color 0.1s;
+
+  &:hover {
+    background-color: var(--color-text-light);
+  }
+
+  &:active {
+    background-color: var(--color-primary);
+  }
+}
+
+@utility btn-secondary-lg {
+  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+  color: var(--color-text-light);
+  box-shadow: inset 0 0 0 4px var(--color-primary);
+  padding: 16px;
+  min-width: 56px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: var(--color-primary);
+    color: var(--color-bg-dark);
+  }
+
+  &:active {
+    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+    color: var(--color-text-light);
+  }
 }
 
 /* ===== Scrollbar hidden utility ===== */

src/components/teaser/EndSection.tsx

@@ -104,7 +104,7 @@ export default function EndSection() {
               <h2 className="text-h1 text-text-light text-center text-shadow-teaser">
                 {t("teaser.sponsors.cta")}
               </h2>
-              <a href="mailto:tipilan@ituk.ee" className="btn-primary-lg text-btn-lg hover:opacity-80" style={{ backgroundColor: "#FFAB00", color: "#1a1a1a" }}>
+              <a href="mailto:tipilan@ituk.ee" className="btn-secondary-lg text-btn-lg">
                 {t("teaser.sponsors.contactButton")}
               </a>
             </div>

src/components/teaser/HeroSection.tsx

@@ -37,7 +37,7 @@ export default function HeroSection({ onScrollDown }: HeroSectionProps) {
       </div>
 
       {/* Center content */}
-      <div className="relative z-[1] flex flex-col items-center justify-center h-full gap-8 lg:gap-16 px-6">
+      <div className="relative z-1 flex flex-col items-center justify-center h-full gap-8 lg:gap-16 px-6">
         {/* Logo */}
         <Image
           src="/tipilan-logo.svg"
@@ -94,8 +94,7 @@ export default function HeroSection({ onScrollDown }: HeroSectionProps) {
           </a>
           <a
             href="mailto:tipilan@ituk.ee"
-            className="btn-primary-lg text-btn-lg hover:opacity-80 text-center"
+            className="btn-secondary-lg text-btn-lg text-center"
-            style={{ backgroundColor: "#FFAB00", color: "#1a1a1a" }}
           >
             {t("teaser.sponsors.contactButton")}
           </a>