From 748482424688448c3977a5bfe0e689537d54627f Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 3 Jun 2025 18:45:33 +0200
Subject: [PATCH] Update favicon and logo from SVG to WebP format

Replace puffin-logo.svg with puffinOffset.webp in both the favicon link and JSON-LD structured data to use WebP image format instead of SVG.
---
 src/App.tsx                       | 147 +++++++++++-----
 src/components/Home.tsx           | 279 ++++++++++++++++++++----------
 src/components/TripCalculator.tsx |  24 ++-
 src/index.css                     | 184 ++++++++++++++++++++
 4 files changed, 495 insertions(+), 139 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0dfe55d..5f1d2fb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -115,21 +115,33 @@ function App() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-green-50">
-      <header className="bg-white shadow-sm relative">
-        <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-cyan-50 wave-pattern">
+      <header className="glass-nav shadow-luxury relative z-50 sticky top-0">
+        <div className="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between">
-            <div 
-              className="flex items-center space-x-3 cursor-pointer" 
+            <motion.div 
+              className="flex items-center space-x-3 cursor-pointer group" 
               onClick={() => handleNavigate('home')}
+              whileHover={{ scale: 1.02 }}
+              transition={{ type: "spring", stiffness: 400, damping: 17 }}
             >
-              <img 
+              <motion.img 
                 src="/puffinOffset.webp" 
                 alt="Puffin Offset Logo" 
-                className="h-8 w-auto"
+                className="h-10 w-auto transition-transform duration-300 group-hover:scale-110"
+                initial={{ opacity: 0, rotate: -10 }}
+                animate={{ opacity: 1, rotate: 0 }}
+                transition={{ duration: 0.6, delay: 0.2 }}
               />
-              <h1 className="text-xl font-bold text-gray-900">Puffin Offset</h1>
-            </div>
+              <motion.h1 
+                className="text-xl font-bold heading-luxury"
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+              >
+                Puffin Offset
+              </motion.h1>
+            </motion.div>
             
             {/* Mobile menu button */}
             <button
@@ -140,31 +152,26 @@ function App() {
             </button>
 
             {/* Desktop navigation */}
-            <nav className="hidden sm:flex space-x-4">
-              <button 
-                onClick={() => handleNavigate('calculator')}
-                className={`text-gray-600 hover:text-gray-900 ${currentPage === 'calculator' ? 'font-semibold' : ''}`}
-              >
-                Calculator
-              </button>
-              <button 
-                onClick={() => handleNavigate('how-it-works')}
-                className={`text-gray-600 hover:text-gray-900 ${currentPage === 'how-it-works' ? 'font-semibold' : ''}`}
-              >
-                How it Works
-              </button>
-              <button 
-                onClick={() => handleNavigate('about')}
-                className={`text-gray-600 hover:text-gray-900 ${currentPage === 'about' ? 'font-semibold' : ''}`}
-              >
-                About
-              </button>
-              <button 
-                onClick={() => handleNavigate('contact')}
-                className={`text-gray-600 hover:text-gray-900 ${currentPage === 'contact' ? 'font-semibold' : ''}`}
-              >
-                Contact
-              </button>
+            <nav className="hidden sm:flex space-x-2">
+              {['calculator', 'how-it-works', 'about', 'contact'].map((page, index) => (
+                <motion.button
+                  key={page}
+                  onClick={() => handleNavigate(page as any)}
+                  className={`px-4 py-2 rounded-xl font-medium transition-all duration-300 ${
+                    currentPage === page
+                      ? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg'
+                      : 'text-slate-600 hover:text-slate-900 hover:bg-white/60'
+                  }`}
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.4, delay: 0.6 + index * 0.1 }}
+                >
+                  {page === 'how-it-works' ? 'How it Works' : 
+                   page.charAt(0).toUpperCase() + page.slice(1)}
+                </motion.button>
+              ))}
             </nav>
           </div>
 
@@ -233,11 +240,73 @@ function App() {
         </AnimatePresence>
       </main>
 
-      <footer className="bg-white mt-16">
-        <div className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
-          <p className="text-center text-gray-500">
-            Powered by Wren Carbon Offset Projects
-          </p>
+      <footer className="bg-gradient-to-r from-slate-900 via-blue-900 to-slate-900 mt-16 relative overflow-hidden">
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23ffffff' fill-opacity='0.03'%3e%3cpath d='m36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e')] opacity-20"></div>
+        <div className="relative max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+              viewport={{ once: true }}
+            >
+              <div className="flex items-center space-x-3 mb-4">
+                <img 
+                  src="/puffinOffset.webp" 
+                  alt="Puffin Offset Logo" 
+                  className="h-8 w-auto"
+                />
+                <h3 className="text-xl font-bold text-white">Puffin Offset</h3>
+              </div>
+              <p className="text-slate-300 leading-relaxed">
+                The world's most exclusive carbon offsetting platform for superyacht owners and operators.
+              </p>
+            </motion.div>
+            
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              viewport={{ once: true }}
+              className="text-center md:text-left"
+            >
+              <h4 className="text-lg font-semibold text-white mb-4">Services</h4>
+              <ul className="space-y-2 text-slate-300">
+                <li className="hover:text-yellow-400 transition-colors cursor-pointer">Carbon Calculator</li>
+                <li className="hover:text-yellow-400 transition-colors cursor-pointer">Offset Portfolio</li>
+                <li className="hover:text-yellow-400 transition-colors cursor-pointer">Fleet Management</li>
+                <li className="hover:text-yellow-400 transition-colors cursor-pointer">Custom Solutions</li>
+              </ul>
+            </motion.div>
+            
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+              viewport={{ once: true }}
+              className="text-center md:text-left"
+            >
+              <h4 className="text-lg font-semibold text-white mb-4">Sustainability Partners</h4>
+              <p className="text-slate-300 mb-4">
+                Powered by verified carbon offset projects through Wren Climate
+              </p>
+              <div className="text-xs text-slate-400">
+                All projects are verified to international standards
+              </div>
+            </motion.div>
+          </div>
+          
+          <motion.div 
+            className="border-t border-slate-700 pt-8 text-center"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 0.6, delay: 0.6 }}
+            viewport={{ once: true }}
+          >
+            <p className="text-slate-400">
+              © 2024 Puffin Offset. Luxury meets sustainability.
+            </p>
+          </motion.div>
         </div>
       </footer>
     </div>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index d52f643..12caeec 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -1,12 +1,31 @@
-import React, { useEffect, useRef } from 'react';
-import { Anchor, Globe, BarChart } from 'lucide-react';
-import { motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
+import { Anchor, Globe, BarChart, Waves, Shield, Award, ArrowRight, Compass, Ship, Leaf } from 'lucide-react';
+import { motion, useScroll, useTransform } from 'framer-motion';
 
 interface Props {
   onNavigate: (page: 'home' | 'calculator' | 'how-it-works' | 'about' | 'contact') => void;
 }
 
 export function Home({ onNavigate }: Props) {
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const heroRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: heroRef,
+    offset: ["start start", "end start"]
+  });
+
+  const y = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);
+  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
   const handleCalculateClick = () => {
     onNavigate('calculator');
     setTimeout(() => {
@@ -58,118 +77,194 @@ export function Home({ onNavigate }: Props) {
   };
 
   return (
-    <div className="max-w-7xl mx-auto">
+    <div className="relative">
+      {/* Luxury Hero Section */}
       <motion.div 
-        className="relative mb-16"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.8 }}
+        ref={heroRef}
+        className="relative h-[90vh] overflow-hidden parallax-container"
+        style={{ y, opacity }}
       >
-        <div className="relative h-[500px]">
-          <motion.img
-            initial={{ scale: 1.1, opacity: 0.8 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 2.5, ease: "easeOut" }}
-            src="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&q=80"
-            alt="Luxury yacht on calm waters"
-            className="absolute inset-0 w-full h-full object-cover"
-          />
-          <motion.div 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1.5, delay: 0.5 }}
-            className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-transparent to-green-500/20" 
-          />
-        </div>
-        <div className="absolute inset-0 flex items-end pb-16">
-          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <motion.h1 
+        {/* Background Image with Parallax */}
+        <motion.div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: "url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80&w=2070')",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            backgroundAttachment: "fixed"
+          }}
+          initial={{ scale: 1.1 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 3, ease: "easeOut" }}
+        />
+        
+        {/* Elegant Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-br from-slate-900/70 via-blue-900/50 to-transparent" />
+        
+        {/* Floating Elements */}
+        <motion.div
+          className="absolute top-20 right-20 w-2 h-2 bg-yellow-400 rounded-full opacity-60"
+          animate={{
+            x: mousePosition.x * 0.02,
+            y: mousePosition.y * 0.02,
+          }}
+          transition={{ type: "spring", stiffness: 50, damping: 20 }}
+        />
+        
+        {/* Hero Content */}
+        <div className="relative h-full flex items-center justify-center">
+          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <motion.div
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1, delay: 0.5 }}
+              className="mb-8"
+            >
+              <motion.h1 
+                className="text-6xl sm:text-7xl lg:text-8xl font-bold mb-6"
+                style={{
+                  background: "linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #fcd34d 100%)",
+                  backgroundClip: "text",
+                  WebkitBackgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                  textShadow: "0 4px 8px rgba(0,0,0,0.3)"
+                }}
+              >
+                Luxury Meets
+                <br />
+                <span className="text-gradient-gold">Sustainability</span>
+              </motion.h1>
+              
+              <motion.p 
+                className="text-xl sm:text-2xl text-slate-200 max-w-4xl mx-auto leading-relaxed mb-12"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 1, delay: 1 }}
+              >
+                The world's most exclusive carbon offsetting platform for superyacht owners and operators
+              </motion.p>
+            </motion.div>
+
+            <motion.div 
+              className="flex flex-col sm:flex-row gap-6 justify-center items-center"
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ 
-                duration: 0.8, 
-                delay: 0.2,
-                ease: [0.22, 1, 0.36, 1]
-              }}
-              className="text-5xl font-bold text-white mb-8 drop-shadow-lg"
+              transition={{ duration: 0.8, delay: 1.3 }}
             >
-              Set Sail Sustainably with Carbon Offsetting for Superyachts
-            </motion.h1>
-            <motion.p 
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ 
-                duration: 0.6, 
-                delay: 0.6,
-                ease: [0.22, 1, 0.36, 1]
-              }}
-              className="text-xl text-white max-w-3xl mx-auto leading-relaxed drop-shadow-lg"
-            >
-              Luxury and environmental responsibility can go hand in hand when you choose to offset the carbon footprint of your superyacht adventures.
-            </motion.p>
+              <motion.button
+                onClick={handleCalculateClick}
+                className="btn-premium text-lg px-8 py-4"
+                whileHover={{ scale: 1.05, boxShadow: "0 10px 30px rgba(30, 64, 175, 0.4)" }}
+                whileTap={{ scale: 0.95 }}
+              >
+                Calculate Your Impact
+                <ArrowRight className="ml-2 inline" size={20} />
+              </motion.button>
+              
+              <motion.button
+                onClick={handleLearnMoreClick}
+                className="btn-secondary text-lg px-8 py-4"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                Discover More
+              </motion.button>
+            </motion.div>
           </div>
         </div>
       </motion.div>
 
-      <motion.div 
-        className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16"
-        variants={staggerContainer}
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, amount: 0.3 }}
-      >
+      {/* Features Section with Luxury Styling */}
+      <div className="py-16 relative">
         <motion.div 
-          className="bg-white rounded-xl shadow-lg p-8"
-          variants={fadeInUp}
-          initial="rest"
-          whileInView="rest"
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          whileHover="hover"
         >
-          <motion.div variants={scaleOnHover} className="h-full">
-            <div className="flex items-center space-x-4 mb-6">
-              <motion.div
-                initial={{ rotate: -10, opacity: 0 }}
-                whileInView={{ rotate: 0, opacity: 1 }}
-                transition={{ duration: 0.5, delay: 0.2 }}
-                viewport={{ once: true }}
-              >
-                <Globe className="text-blue-600" size={32} />
-              </motion.div>
-              <h2 className="text-2xl font-bold text-gray-900">Flexible Offsetting Solutions</h2>
-            </div>
-            <p className="text-gray-600 leading-relaxed text-justify">
-              With Puffin's carbon offsetting program, it's simple to mitigate the environmental impact of a yacht's use by supporting impactful international projects. Whether you want to offset a portion of a single trip, a season, or a yacht's full annual emissions, Puffin gives you the flexibility to offset as much or as little as you like.
-            </p>
-          </motion.div>
+          <h2 className="text-5xl font-bold heading-luxury mb-6">
+            Exclusive Maritime Solutions
+          </h2>
+          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
+            Experience the pinnacle of sustainable luxury with our premium carbon offsetting services
+          </p>
         </motion.div>
 
         <motion.div 
-          className="bg-white rounded-xl shadow-lg p-8"
-          variants={fadeInUp}
-          initial="rest"
-          whileInView="rest"
-          viewport={{ once: true }}
-          whileHover="hover"
+          className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16"
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.2 }}
         >
-          <motion.div variants={scaleOnHover} className="h-full">
-            <div className="flex items-center space-x-4 mb-6">
+          <motion.div 
+            className="luxury-card p-8"
+            variants={fadeInUp}
+            whileHover="hover"
+          >
+            <motion.div variants={scaleOnHover} className="h-full text-center">
               <motion.div
-                initial={{ rotate: 10, opacity: 0 }}
+                className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-6"
+                initial={{ rotate: -10, opacity: 0 }}
                 whileInView={{ rotate: 0, opacity: 1 }}
-                transition={{ duration: 0.5, delay: 0.3 }}
+                transition={{ duration: 0.6, delay: 0.2 }}
                 viewport={{ once: true }}
               >
-                <BarChart className="text-green-600" size={32} />
+                <Waves className="text-white" size={28} />
               </motion.div>
-              <h2 className="text-2xl font-bold text-gray-900">Your Values, Your Choice</h2>
-            </div>
-            <p className="text-gray-600 leading-relaxed text-justify">
-              Our portfolios are designed to resonate with the values of our most environmentally-conscious clients, ensuring contributions align with their passion for a better planet. Our science-based, verified carbon offsetting projects have a real and ongoing impact in the fight against climate change.
-            </p>
+              <h3 className="text-2xl font-bold heading-luxury mb-4">Flexible Solutions</h3>
+              <p className="text-slate-600 leading-relaxed">
+                Tailor your offsetting to match your yachting lifestyle - from single trips to full annual emissions coverage.
+              </p>
+            </motion.div>
+          </motion.div>
+
+          <motion.div 
+            className="luxury-card p-8"
+            variants={fadeInUp}
+            whileHover="hover"
+          >
+            <motion.div variants={scaleOnHover} className="h-full text-center">
+              <motion.div
+                className="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6"
+                initial={{ rotate: 10, opacity: 0 }}
+                whileInView={{ rotate: 0, opacity: 1 }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+                viewport={{ once: true }}
+              >
+                <Shield className="text-slate-800" size={28} />
+              </motion.div>
+              <h3 className="text-2xl font-bold heading-luxury mb-4">Verified Impact</h3>
+              <p className="text-slate-600 leading-relaxed">
+                Science-based projects with transparent reporting ensure your investment creates real environmental change.
+              </p>
+            </motion.div>
+          </motion.div>
+
+          <motion.div 
+            className="luxury-card p-8"
+            variants={fadeInUp}
+            whileHover="hover"
+          >
+            <motion.div variants={scaleOnHover} className="h-full text-center">
+              <motion.div
+                className="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-6"
+                initial={{ rotate: -5, opacity: 0 }}
+                whileInView={{ rotate: 0, opacity: 1 }}
+                transition={{ duration: 0.6, delay: 0.6 }}
+                viewport={{ once: true }}
+              >
+                <Award className="text-white" size={28} />
+              </motion.div>
+              <h3 className="text-2xl font-bold heading-luxury mb-4">Premium Service</h3>
+              <p className="text-slate-600 leading-relaxed">
+                White-glove service designed for discerning yacht owners who demand excellence in sustainability.
+              </p>
+            </motion.div>
           </motion.div>
         </motion.div>
-      </motion.div>
+      </div>
 
       <motion.div 
         className="bg-white rounded-xl shadow-lg p-12 mb-16 text-center"
diff --git a/src/components/TripCalculator.tsx b/src/components/TripCalculator.tsx
index 3ee6fba..2aebf61 100644
--- a/src/components/TripCalculator.tsx
+++ b/src/components/TripCalculator.tsx
@@ -94,7 +94,7 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
   
   return (
     <motion.div 
-      className="bg-white rounded-lg shadow-xl p-6 max-w-2xl w-full mt-8"
+      className="luxury-card p-8 max-w-4xl w-full mt-8"
       initial={{ opacity: 0, y: 30 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ 
@@ -102,14 +102,22 @@ export function TripCalculator({ vesselData, onOffsetClick }: Props) {
         ease: [0.22, 1, 0.36, 1]
       }}
     >
-      <div className="flex items-center justify-between mb-6">
-        <h2 className="text-2xl font-bold text-gray-800">Carbon Offset Calculator</h2>
-        <motion.div
-          initial={{ rotate: -10, opacity: 0 }}
-          animate={{ rotate: 0, opacity: 1 }}
-          transition={{ duration: 0.5, delay: 0.2 }}
+      <div className="flex items-center justify-between mb-8">
+        <motion.h2 
+          className="text-3xl font-bold heading-luxury"
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
         >
-          <Route className="text-blue-500" size={24} />
+          Premium Carbon Calculator
+        </motion.h2>
+        <motion.div
+          className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center"
+          initial={{ rotate: -10, opacity: 0, scale: 0.8 }}
+          animate={{ rotate: 0, opacity: 1, scale: 1 }}
+          transition={{ duration: 0.6, delay: 0.3, type: "spring", stiffness: 300 }}
+        >
+          <Route className="text-white" size={20} />
         </motion.div>
       </div>
 
diff --git a/src/index.css b/src/index.css
index b5c61c9..e8fbcc2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,187 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Custom CSS Variables for Luxury Yacht Club Theme */
+:root {
+  --navy-deep: #0F172A;
+  --ocean-blue: #1E40AF;
+  --ocean-light: #3B82F6;
+  --gold-accent: #F59E0B;
+  --gold-light: #FCD34D;
+  --gray-sophisticated: #64748B;
+  --gray-light: #E2E8F0;
+  --white-tinted: #F8FAFC;
+}
+
+/* Global Styles */
+* {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: linear-gradient(135deg, var(--white-tinted) 0%, #E0F2FE 100%);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+/* Custom Glassmorphism Classes */
+.glass-card {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+.glass-nav {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Premium Button Styles */
+.btn-premium {
+  background: linear-gradient(135deg, var(--ocean-blue) 0%, var(--ocean-light) 100%);
+  color: white;
+  padding: 12px 32px;
+  border-radius: 12px;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 15px 0 rgba(30, 64, 175, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-premium::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
+}
+
+.btn-premium:hover::before {
+  left: 100%;
+}
+
+.btn-premium:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px 0 rgba(30, 64, 175, 0.4);
+}
+
+.btn-secondary {
+  background: linear-gradient(135deg, var(--gold-accent) 0%, var(--gold-light) 100%);
+  color: var(--navy-deep);
+  padding: 12px 32px;
+  border-radius: 12px;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 15px 0 rgba(245, 158, 11, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-secondary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px 0 rgba(245, 158, 11, 0.4);
+}
+
+/* Custom Shadow Classes */
+.shadow-luxury {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.shadow-premium {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+/* Wave Pattern Background */
+.wave-pattern {
+  background-image: url("data:image/svg+xml,%3csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m0 10c20-10 20 10 40 0s20 10 40 0 20-10 20 0v10h-100z' fill='%23ffffff' fill-opacity='0.03'/%3e%3c/svg%3e");
+  background-repeat: repeat-x;
+  background-position: bottom;
+}
+
+/* Premium Card Styles */
+.luxury-card {
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  border-radius: 20px;
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.luxury-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.luxury-card:hover::before {
+  opacity: 1;
+}
+
+.luxury-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15);
+  border-color: rgba(30, 64, 175, 0.2);
+}
+
+/* Typography Enhancements */
+.heading-luxury {
+  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--ocean-blue) 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.text-gradient-gold {
+  background: linear-gradient(135deg, var(--gold-accent) 0%, var(--gold-light) 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 600;
+}
+
+/* Parallax Container */
+.parallax-container {
+  position: relative;
+  overflow: hidden;
+  transform-style: preserve-3d;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--gray-light);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-light));
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, var(--navy-deep), var(--ocean-blue));
+}