Add 2 files

index.html

@@ -14,6 +14,7 @@
             background-color: #f8f5f0;
             color: #333;
             scroll-behavior: smooth;
+            overflow-x: hidden;
         }
         
         .serif {
@@ -28,12 +29,22 @@
             border-color: #9c8c5a;
         }
         
+        /* Enhanced background patterns */
         .bg-ivory {
             background-color: #f8f5f0;
+            background-image: 
+                linear-gradient(rgba(156,140,90,0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(156,140,90,0.03) 1px, transparent 1px);
+            background-size: 30px 30px;
         }
         
         .bg-parchment {
             background-color: #f0e8d5;
+            background-image: 
+                radial-gradient(circle, rgba(156,140,90,0.05) 1px, transparent 1px),
+                radial-gradient(circle, rgba(156,140,90,0.05) 1px, transparent 1px);
+            background-size: 40px 40px;
+            background-position: 0 0, 20px 20px;
         }
         
         .bg-velvet {
@@ -52,13 +63,13 @@
         .book-container {
             perspective: 2000px;
             position: relative;
-            height: 500px;
+            height: 400px;
         }
         
         .leather-book {
             position: absolute;
-            width: 320px;
-            height: 480px;
+            width: 280px;
+            height: 420px;
             background: linear-gradient(145deg, #3a2e1a 0%, #2a2418 100%);
             border-radius: 4px 16px 16px 4px;
             box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2),
@@ -78,10 +89,10 @@
             position: absolute;
             left: 0;
             top: 0;
-            width: 30px;
+            width: 25px;
             height: 100%;
             background: linear-gradient(90deg, #2a2418 0%, #3a2e1a 100%);
-            transform: rotateY(90deg) translateX(-15px);
+            transform: rotateY(90deg) translateX(-12.5px);
             border-radius: 4px 0 0 4px;
             box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.3);
         }
@@ -92,14 +103,14 @@
             left: 50%;
             transform: translate(-50%, -50%) rotate(90deg);
             font-family: 'EB Garamond', serif;
-            font-size: 1.8rem;
+            font-size: 1.5rem;
             font-weight: 600;
             color: #9c8c5a;
             letter-spacing: 2px;
             text-transform: uppercase;
             writing-mode: vertical-rl;
             text-orientation: mixed;
-            height: 300px;
+            height: 250px;
             display: flex;
             align-items: center;
         }
@@ -113,7 +124,7 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            padding: 2rem;
+            padding: 1.5rem;
             box-sizing: border-box;
         }
         
@@ -121,33 +132,38 @@
             position: absolute;
             width: 100%;
             height: 100%;
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="rgba(156,140,90,0.03)" stroke-width="2"/></svg>');
-            background-size: 100px 100px;
-            opacity: 0.5;
+            background-image: 
+                linear-gradient(45deg, rgba(156,140,90,0.05) 25%, transparent 25%),
+                linear-gradient(-45deg, rgba(156,140,90,0.05) 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, rgba(156,140,90,0.05) 75%),
+                linear-gradient(-45deg, transparent 75%, rgba(156,140,90,0.05) 75%);
+            background-size: 20px 20px;
+            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+            opacity: 0.8;
         }
         
         .book-crest {
-            width: 120px;
-            height: 120px;
+            width: 100px;
+            height: 100px;
             background: radial-gradient(circle, rgba(156,140,90,0.1) 0%, transparent 70%);
             border: 1px solid rgba(156,140,90,0.2);
             border-radius: 50%;
             display: flex;
             justify-content: center;
             align-items: center;
-            margin-bottom: 2rem;
+            margin-bottom: 1.5rem;
         }
         
         .book-crest-inner {
-            width: 100px;
-            height: 100px;
+            width: 80px;
+            height: 80px;
             border: 1px solid rgba(156,140,90,0.3);
             border-radius: 50%;
             display: flex;
             justify-content: center;
             align-items: center;
             font-family: 'EB Garamond', serif;
-            font-size: 3rem;
+            font-size: 2.5rem;
             color: rgba(156,140,90,0.5);
         }
         
@@ -158,8 +174,8 @@
         }
         
         .feature-icon {
-            width: 60px;
-            height: 60px;
+            width: 50px;
+            height: 50px;
             border: 1px solid #9c8c5a;
             display: flex;
             align-items: center;
@@ -170,13 +186,16 @@
         
         .old-paper {
             background-color: #f5f0e6;
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(0,0,0,0.05)" stroke-width="1"/></svg>');
+            background-image: 
+                linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
+            background-size: 20px 20px;
             color: #333;
         }
         
         @keyframes float {
             0% { transform: translateY(0px); }
-            50% { transform: translateY(-15px); }
+            50% { transform: translateY(-10px); }
             100% { transform: translateY(0px); }
         }
         
@@ -192,6 +211,8 @@
             background: #f8f5f0;
             border: 1px solid rgba(156, 140, 90, 0.3);
             transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
         }
         
         .pricing-card:hover {
@@ -214,16 +235,16 @@
             width: 0;
             height: 0;
             border-style: solid;
-            border-width: 0 60px 60px 0;
+            border-width: 0 50px 50px 0;
             border-color: transparent #9c8c5a transparent transparent;
         }
         
         .pricing-card-featured::after {
             content: "Premium";
             position: absolute;
-            top: 8px;
-            right: 8px;
-            font-size: 10px;
+            top: 6px;
+            right: 6px;
+            font-size: 9px;
             font-weight: bold;
             color: #f8f5f0;
             transform: rotate(45deg);
@@ -261,6 +282,151 @@
         .text-muted {
             color: #7a7a7a;
         }
+        
+        /* Enhanced decorative elements */
+        .geometric-pattern {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(circle, rgba(156,140,90,0.05) 1px, transparent 1px),
+                radial-gradient(circle, rgba(156,140,90,0.05) 1px, transparent 1px);
+            background-size: 30px 30px;
+            background-position: 0 0, 15px 15px;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+        
+        .ancient-schematic {
+            position: absolute;
+            width: 150px;
+            height: 150px;
+            background-image: url('data:image/svg+xml;utf8,<svg width="150" height="150" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><rect x="30" y="30" width="90" height="90" fill="none" stroke="rgba(156,140,90,0.15)" stroke-width="1"/><line x1="30" y1="30" x2="120" y2="120" stroke="rgba(156,140,90,0.15)" stroke-width="1"/><line x1="120" y1="30" x2="30" y2="120" stroke="rgba(156,140,90,0.15)" stroke-width="1"/><circle cx="75" cy="75" r="30" fill="none" stroke="rgba(156,140,90,0.15)" stroke-width="1"/></svg>');
+            pointer-events: none;
+        }
+        
+        .philosophy-diagram {
+            position: absolute;
+            width: 120px;
+            height: 120px;
+            background-image: url('data:image/svg+xml;utf8,<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><path d="M60,20 L100,100 L20,100 Z" fill="none" stroke="rgba(156,140,90,0.15)" stroke-width="1"/><circle cx="60" cy="60" r="25" fill="none" stroke="rgba(156,140,90,0.15)" stroke-width="1"/></svg>');
+            pointer-events: none;
+        }
+        
+        .parallax-element {
+            position: absolute;
+            will-change: transform;
+        }
+        
+        /* Section decorative backgrounds */
+        .hero-decoration {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            overflow: hidden;
+            z-index: 0;
+        }
+        
+        .section-decoration {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            overflow: hidden;
+            z-index: 0;
+        }
+        
+        .content-wrapper {
+            position: relative;
+            z-index: 10;
+        }
+        
+        /* Fancy underline for headings */
+        .fancy-underline {
+            position: relative;
+            display: inline-block;
+        }
+        
+        .fancy-underline::after {
+            content: '';
+            position: absolute;
+            bottom: -6px;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background: linear-gradient(90deg, rgba(156,140,90,0) 0%, #9c8c5a 50%, rgba(156,140,90,0) 100%);
+        }
+        
+        /* Pricing card embellishments */
+        .pricing-ornament {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-image: url('data:image/svg+xml;utf8,<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M15,0 Q22.5,7.5 15,15 Q7.5,22.5 15,30 Q22.5,22.5 15,15 Q7.5,7.5 15,0" fill="none" stroke="rgba(156,140,90,0.2)" stroke-width="0.8"/></svg>');
+            opacity: 0.6;
+        }
+        
+        /* Mobile responsiveness improvements */
+        @media (max-width: 768px) {
+            .book-container {
+                height: 300px;
+                margin-top: 2rem;
+            }
+            
+            .leather-book {
+                width: 200px;
+                height: 300px;
+            }
+            
+            .book-title {
+                font-size: 1.2rem;
+                height: 180px;
+            }
+            
+            .book-crest {
+                width: 70px;
+                height: 70px;
+                margin-bottom: 1rem;
+            }
+            
+            .book-crest-inner {
+                width: 60px;
+                height: 60px;
+                font-size: 2rem;
+            }
+            
+            .hero-decoration, .section-decoration {
+                display: none;
+            }
+            
+            .content-wrapper {
+                padding-top: 2rem;
+                padding-bottom: 2rem;
+            }
+            
+            .section-divider {
+                margin: 1rem auto;
+            }
+            
+            .pricing-card, .pricing-card-featured {
+                padding: 1.5rem;
+            }
+            
+            .pricing-card-featured::before {
+                border-width: 0 40px 40px 0;
+            }
+            
+            .pricing-card-featured::after {
+                top: 5px;
+                right: 5px;
+                font-size: 8px;
+            }
+        }
     </style>
 </head>
 <body class="antialiased">
@@ -294,28 +460,34 @@
     </nav>
 
     <!-- Hero Section -->
-    <section class="min-h-screen flex items-center justify-center pt-20 pb-16 px-6 bg-parchment">
-        <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
-            <div class="space-y-8">
+    <section class="min-h-screen flex items-center justify-center pt-20 pb-16 px-6 bg-parchment relative overflow-hidden">
+        <div class="hero-decoration">
+            <div class="parallax-element ancient-schematic" style="top: 10%; left: 5%;" data-speed="0.1"></div>
+            <div class="parallax-element geometric-pattern" style="top: 60%; right: 8%;" data-speed="0.15"></div>
+            <div class="parallax-element philosophy-diagram" style="bottom: 15%; left: 10%;" data-speed="0.2"></div>
+        </div>
+        
+        <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-8 md:gap-16 items-center content-wrapper">
+            <div class="space-y-6 md:space-y-8 order-2 md:order-1">
                 <span class="text-xs uppercase tracking-widest text-muted letter-spacing-2">A Limited Edition</span>
-                <h1 class="serif text-5xl md:text-6xl font-medium leading-tight tracking-tight">
-                    <span class="gold-text">The Art of</span><br>
-                    <span class="text-gray-800">Sustained Attention</span>
+                <h1 class="serif text-4xl md:text-6xl font-medium leading-tight tracking-tight">
+                    <span class="gold-text fancy-underline">The Art of</span><br>
+                    <span class="text-gray-800 fancy-underline">Sustained Attention</span>
                 </h1>
-                <p class="text-lg text-gray-700 max-w-lg leading-relaxed">
+                <p class="text-base md:text-lg text-gray-700 max-w-lg leading-relaxed">
                     An evidence-based handbook for discerning gentlemen who refuse to let distraction dilute their potential. 
                     Limited to 500 numbered copies worldwide.
                 </p>
-                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6 pt-4">
-                    <a href="#purchase" class="btn-gold px-8 py-3 text-center transition duration-300 font-medium tracking-wider">
+                <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 pt-2">
+                    <a href="#purchase" class="btn-gold px-6 py-2 md:px-8 md:py-3 text-center transition duration-300 font-medium tracking-wider text-sm md:text-base">
                         RESERVE YOUR COPY
                     </a>
-                    <a href="#about" class="bg-transparent border border-gray-300 text-gray-700 hover:border-gold-500 hover:text-gold-500 px-8 py-3 text-center transition duration-300 font-medium tracking-wider">
+                    <a href="#about" class="bg-transparent border border-gray-300 text-gray-700 hover:border-gold-500 hover:text-gold-500 px-6 py-2 md:px-8 md:py-3 text-center transition duration-300 font-medium tracking-wider text-sm md:text-base">
                         EXPLORE THE MANUSCRIPT
                     </a>
                 </div>
             </div>
-            <div class="flex justify-center">
+            <div class="flex justify-center order-1 md:order-2">
                 <div class="book-container floating">
                     <div class="leather-book">
                         <div class="book-spine">
@@ -326,9 +498,9 @@
                             <div class="book-crest">
                                 <div class="book-crest-inner">F</div>
                             </div>
-                            <h2 class="serif text-2xl gold-text text-center mb-2 tracking-wider">FOCVS</h2>
-                            <div class="h-px w-16 bg-gradient-to-r from-transparent via-gold-500 to-transparent my-2"></div>
-                            <p class="text-center text-gray-300 text-sm tracking-wider">THE ART OF SUSTAINED ATTENTION</p>
+                            <h2 class="serif text-xl md:text-2xl gold-text text-center mb-2 tracking-wider">FOCVS</h2>
+                            <div class="h-px w-12 md:w-16 bg-gradient-to-r from-transparent via-gold-500 to-transparent my-2"></div>
+                            <p class="text-center text-gray-300 text-xs md:text-sm tracking-wider">THE ART OF SUSTAINED ATTENTION</p>
                         </div>
                     </div>
                 </div>
@@ -337,43 +509,51 @@
     </section>
 
     <!-- About Section -->
-    <section id="about" class="py-24 px-6 bg-ivory">
-        <div class="max-w-5xl mx-auto">
-            <div class="text-center mb-16">
+    <section id="about" class="py-16 md:py-24 px-6 bg-ivory relative overflow-hidden">
+        <div class="section-decoration">
+            <div class="parallax-element ancient-schematic" style="top: 15%; right: 5%; transform: rotate(15deg);" data-speed="0.12"></div>
+            <div class="parallax-element geometric-pattern" style="bottom: 20%; left: 8%;" data-speed="0.18"></div>
+        </div>
+        
+        <div class="max-w-5xl mx-auto content-wrapper">
+            <div class="text-center mb-12 md:mb-16">
                 <span class="text-xs uppercase tracking-widest text-muted">The Manuscript</span>
-                <h2 class="serif text-4xl md:text-5xl font-medium mt-4 mb-6">Philosophy Meets <span class="gold-text">Practicality</span></h2>
-                <div class="section-divider w-32 mx-auto my-6"></div>
-                <p class="text-gray-700 max-w-3xl mx-auto leading-relaxed">
+                <h2 class="serif text-3xl md:text-5xl font-medium mt-3 md:mt-4 mb-4 md:mb-6">Philosophy Meets <span class="gold-text fancy-underline">Practicality</span></h2>
+                <div class="section-divider w-24 md:w-32 mx-auto my-4 md:my-6"></div>
+                <p class="text-gray-700 max-w-3xl mx-auto leading-relaxed text-sm md:text-base">
                     In an age of endless distraction, true focus has become the ultimate competitive advantage. 
                     This handbook distills two millennia of wisdom with modern neuroscience into a practical system for mastering your attention.
                 </p>
             </div>
             
-            <div class="grid md:grid-cols-3 gap-12 mt-16">
-                <div class="space-y-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 mt-12 md:mt-16">
+                <div class="space-y-3 md:space-y-4 relative">
+                    <div class="pricing-ornament" style="top: -10px; right: -10px;"></div>
                     <div class="feature-icon mx-auto">
-                        <i class="fas fa-brain gold-text text-xl"></i>
+                        <i class="fas fa-brain gold-text text-lg md:text-xl"></i>
                     </div>
-                    <h3 class="serif text-xl text-center mt-4 tracking-wider">NEUROSCIENTIFIC FOUNDATIONS</h3>
-                    <p class="text-gray-600 text-center leading-relaxed">
+                    <h3 class="serif text-lg md:text-xl text-center mt-2 md:mt-4 tracking-wider">NEUROSCIENTIFIC FOUNDATIONS</h3>
+                    <p class="text-gray-600 text-center leading-relaxed text-sm md:text-base">
                         Evidence-based techniques that work with your biology, not against it.
                     </p>
                 </div>
-                <div class="space-y-4">
+                <div class="space-y-3 md:space-y-4 relative">
+                    <div class="pricing-ornament" style="top: -10px; left: -10px;"></div>
                     <div class="feature-icon mx-auto">
-                        <i class="fas fa-history gold-text text-xl"></i>
+                        <i class="fas fa-history gold-text text-lg md:text-xl"></i>
                     </div>
-                    <h3 class="serif text-xl text-center mt-4 tracking-wider">TIMELESS WISDOM</h3>
-                    <p class="text-gray-600 text-center leading-relaxed">
+                    <h3 class="serif text-lg md:text-xl text-center mt-2 md:mt-4 tracking-wider">TIMELESS WISDOM</h3>
+                    <p class="text-gray-600 text-center leading-relaxed text-sm md:text-base">
                         Lessons from Stoic philosophers, Renaissance scholars, and monastic traditions.
                     </p>
                 </div>
-                <div class="space-y-4">
+                <div class="space-y-3 md:space-y-4 relative">
+                    <div class="pricing-ornament" style="bottom: -10px; right: -10px;"></div>
                     <div class="feature-icon mx-auto">
-                        <i class="fas fa-tools gold-text text-xl"></i>
+                        <i class="fas fa-tools gold-text text-lg md:text-xl"></i>
                     </div>
-                    <h3 class="serif text-xl text-center mt-4 tracking-wider">PRACTICAL FRAMEWORKS</h3>
-                    <p class="text-gray-600 text-center leading-relaxed">
+                    <h3 class="serif text-lg md:text-xl text-center mt-2 md:mt-4 tracking-wider">PRACTICAL FRAMEWORKS</h3>
+                    <p class="text-gray-600 text-center leading-relaxed text-sm md:text-base">
                         Immediately applicable systems for deep work and creative flow.
                     </p>
                 </div>
@@ -382,68 +562,73 @@
     </section>
 
     <!-- Contents Section -->
-    <section id="contents" class="py-24 px-6 bg-parchment">
-        <div class="max-w-5xl mx-auto">
-            <div class="text-center mb-16">
+    <section id="contents" class="py-16 md:py-24 px-6 bg-parchment relative overflow-hidden">
+        <div class="section-decoration">
+            <div class="parallax-element philosophy-diagram" style="top: 10%; left: 5%; transform: rotate(-10deg);" data-speed="0.15"></div>
+            <div class="parallax-element geometric-pattern" style="bottom: 15%; right: 5%;" data-speed="0.1"></div>
+        </div>
+        
+        <div class="max-w-5xl mx-auto content-wrapper">
+            <div class="text-center mb-12 md:mb-16">
                 <span class="text-xs uppercase tracking-widest text-muted">Contents</span>
-                <h2 class="serif text-4xl md:text-5xl font-medium mt-4 mb-6">A <span class="gold-text">Systematic</span> Approach</h2>
-                <div class="section-divider w-32 mx-auto my-6"></div>
+                <h2 class="serif text-3xl md:text-5xl font-medium mt-3 md:mt-4 mb-4 md:mb-6">A <span class="gold-text fancy-underline">Systematic</span> Approach</h2>
+                <div class="section-divider w-24 md:w-32 mx-auto my-4 md:my-6"></div>
             </div>
             
-            <div class="grid md:grid-cols-2 gap-12 mt-12">
-                <div class="space-y-8">
-                    <div class="flex items-start space-x-4">
-                        <span class="gold-text serif text-xl">I.</span>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 mt-8 md:mt-12">
+                <div class="space-y-6 md:space-y-8">
+                    <div class="flex items-start space-x-3 md:space-x-4">
+                        <span class="gold-text serif text-lg md:text-xl">I.</span>
                         <div>
-                            <h3 class="serif text-xl mb-2 tracking-wider">THE ANATOMY OF ATTENTION</h3>
-                            <p class="text-gray-600 leading-relaxed">
+                            <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE ANATOMY OF ATTENTION</h3>
+                            <p class="text-gray-600 leading-relaxed text-sm md:text-base">
                                 Understanding the cognitive mechanisms behind focus and distraction.
                             </p>
                         </div>
                     </div>
-                    <div class="flex items-start space-x-4">
-                        <span class="gold-text serif text-xl">II.</span>
+                    <div class="flex items-start space-x-3 md:space-x-4">
+                        <span class="gold-text serif text-lg md:text-xl">II.</span>
                         <div>
-                            <h3 class="serif text-xl mb-2 tracking-wider">THE MONASTIC METHOD</h3>
-                            <p class="text-gray-600 leading-relaxed">
+                            <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE MONASTIC METHOD</h3>
+                            <p class="text-gray-600 leading-relaxed text-sm md:text-base">
                                 How medieval scholars achieved unparalleled concentration without modern technology.
                             </p>
                         </div>
                     </div>
-                    <div class="flex items-start space-x-4">
-                        <span class="gold-text serif text-xl">III.</span>
+                    <div class="flex items-start space-x-3 md:space-x-4">
+                        <span class="gold-text serif text-lg md:text-xl">III.</span>
                         <div>
-                            <h3 class="serif text-xl mb-2 tracking-wider">THE WARRIOR'S FOCUS</h3>
-                            <p class="text-gray-600 leading-relaxed">
+                            <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE WARRIOR'S FOCUS</h3>
+                            <p class="text-gray-600 leading-relaxed text-sm md:text-base">
                                 Combat-tested techniques for maintaining clarity under pressure.
                             </p>
                         </div>
                     </div>
                 </div>
-                <div class="space-y-8">
-                    <div class="flex items-start space-x-4">
-                        <span class="gold-text serif text-xl">IV.</span>
+                <div class="space-y-6 md:space-y-8">
+                    <div class="flex items-start space-x-3 md:space-x-4">
+                        <span class="gold-text serif text-lg md:text-xl">IV.</span>
                         <div>
-                            <h3 class="serif text-xl mb-2 tracking-wider">DIGITAL ASCETICISM</h3>
-                            <p class="text-gray-600 leading-relaxed">
+                            <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">DIGITAL ASCETICISM</h3>
+                            <p class="text-gray-600 leading-relaxed text-sm md:text-base">
                                 Reclaiming your attention from the attention economy.
                             </p>
                         </div>
                     </div>
-                    <div class="flex items-start space-x-4">
-                        <span class="gold-text serif text-xl">V.</span>
+                    <div class="flex items-start space-x-3 md:space-x-4">
+                        <span class="gold-text serif text-lg md:text-xl">V.</span>
                         <div>
-                            <h3 class="serif text-xl mb-2 tracking-wider">THE FLOW STATE PROTOCOL</h3>
-                            <p class="text-gray-600 leading-relaxed">
+                            <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE FLOW STATE PROTOCOL</h3>
+                            <p class="text-gray-600 leading-relaxed text-sm md:text-base">
                                 Engineering optimal conditions for creative and intellectual work.
                             </p>
                         </div>
                     </div>
-                    <div class="flex items-start space-x-4">
-                        <span class="gold-text serif text-xl">VI.</span>
+                    <div class="flex items-start space-x-3 md:space-x-4">
+                        <span class="gold-text serif text-lg md:text-xl">VI.</span>
                         <div>
-                            <h3 class="serif text-xl mb-2 tracking-wider">THE 30-DAY CRUCIBLE</h3>
-                            <p class="text-gray-600 leading-relaxed">
+                            <h3 class="serif text-lg md:text-xl mb-1 md:mb-2 tracking-wider">THE 30-DAY CRUCIBLE</h3>
+                            <p class="text-gray-600 leading-relaxed text-sm md:text-base">
                                 A transformative practice regimen to rebuild your attention span.
                             </p>
                         </div>
@@ -454,68 +639,77 @@
     </section>
 
     <!-- Testimonials -->
-    <section id="testimonials" class="py-24 px-6 bg-ivory">
-        <div class="max-w-5xl mx-auto">
-            <div class="text-center mb-16">
+    <section id="testimonials" class="py-16 md:py-24 px-6 bg-ivory relative overflow-hidden">
+        <div class="section-decoration">
+            <div class="parallax-element ancient-schematic" style="top: 20%; right: 10%; transform: rotate(25deg);" data-speed="0.1"></div>
+            <div class="parallax-element philosophy-diagram" style="bottom: 15%; left: 10%;" data-speed="0.15"></div>
+        </div>
+        
+        <div class="max-w-5xl mx-auto content-wrapper">
+            <div class="text-center mb-12 md:mb-16">
                 <span class="text-xs uppercase tracking-widest text-muted">Endorsements</span>
-                <h2 class="serif text-4xl md:text-5xl font-medium mt-4 mb-6">Praised by <span class="gold-text">Peers</span></h2>
-                <div class="section-divider w-32 mx-auto my-6"></div>
+                <h2 class="serif text-3xl md:text-5xl font-medium mt-3 md:mt-4 mb-4 md:mb-6">Praised by <span class="gold-text fancy-underline">Peers</span></h2>
+                <div class="section-divider w-24 md:w-32 mx-auto my-4 md:my-6"></div>
             </div>
             
-            <div class="grid md:grid-cols-2 gap-8">
-                <div class="testimonial-card p-8 rounded-lg">
-                    <div class="flex items-center mb-6">
-                        <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 flex items-center justify-center gold-text">
-                            <span class="serif text-xl">MV</span>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+                <div class="testimonial-card p-6 md:p-8 rounded-lg relative">
+                    <div class="pricing-ornament" style="top: 8px; right: 8px;"></div>
+                    <div class="flex items-center mb-4 md:mb-6">
+                        <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-200 mr-3 md:mr-4 flex items-center justify-center gold-text">
+                            <span class="serif text-lg md:text-xl">MV</span>
                         </div>
                         <div>
-                            <h4 class="font-medium tracking-wider">DR. MARCUS VAIL</h4>
-                            <p class="text-sm text-gray-500 tracking-wider">Cognitive Neuroscientist, Stanford</p>
+                            <h4 class="font-medium tracking-wider text-sm md:text-base">DR. MARCUS VAIL</h4>
+                            <p class="text-xs md:text-sm text-gray-500 tracking-wider">Cognitive Neuroscientist, Stanford</p>
                         </div>
                     </div>
-                    <p class="text-gray-700 italic leading-relaxed">
+                    <p class="text-gray-700 italic leading-relaxed text-sm md:text-base">
                         "The most comprehensive synthesis of ancient wisdom and modern science on attention I've encountered. Indispensable for anyone serious about cognitive mastery."
                     </p>
                 </div>
-                <div class="testimonial-card p-8 rounded-lg">
-                    <div class="flex items-center mb-6">
-                        <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 flex items-center justify-center gold-text">
-                            <span class="serif text-xl">JH</span>
+                <div class="testimonial-card p-6 md:p-8 rounded-lg relative">
+                    <div class="pricing-ornament" style="bottom: 8px; left: 8px;"></div>
+                    <div class="flex items-center mb-4 md:mb-6">
+                        <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-200 mr-3 md:mr-4 flex items-center justify-center gold-text">
+                            <span class="serif text-lg md:text-xl">JH</span>
                         </div>
                         <div>
-                            <h4 class="font-medium tracking-wider">JAMES HOLLOWAY</h4>
-                            <p class="text-sm text-gray-500 tracking-wider">CEO, Blackthorn Capital</p>
+                            <h4 class="font-medium tracking-wider text-sm md:text-base">JAMES HOLLOWAY</h4>
+                            <p class="text-xs md:text-sm text-gray-500 tracking-wider">CEO, Blackthorn Capital</p>
                         </div>
                     </div>
-                    <p class="text-gray-700 italic leading-relaxed">
+                    <p class="text-gray-700 italic leading-relaxed text-sm md:text-base">
                         "This handbook transformed how I work. My productivity has increased by at least 300% since implementing its protocols. Worth every penny."
                     </p>
                 </div>
-                <div class="testimonial-card p-8 rounded-lg">
-                    <div class="flex items-center mb-6">
-                        <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 flex items-center justify-center gold-text">
-                            <span class="serif text-xl">ES</span>
+                <div class="testimonial-card p-6 md:p-8 rounded-lg relative">
+                    <div class="pricing-ornament" style="top: 8px; left: 8px;"></div>
+                    <div class="flex items-center mb-4 md:mb-6">
+                        <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-200 mr-3 md:mr-4 flex items-center justify-center gold-text">
+                            <span class="serif text-lg md:text-xl">ES</span>
                         </div>
                         <div>
-                            <h4 class="font-medium tracking-wider">PROF. ELENA SOKOLOV</h4>
-                            <p class="text-sm text-gray-500 tracking-wider">Philosophy Chair, Cambridge</p>
+                            <h4 class="font-medium tracking-wider text-sm md:text-base">PROF. ELENA SOKOLOV</h4>
+                            <p class="text-xs md:text-sm text-gray-500 tracking-wider">Philosophy Chair, Cambridge</p>
                         </div>
                     </div>
-                    <p class="text-gray-700 italic leading-relaxed">
+                    <p class="text-gray-700 italic leading-relaxed text-sm md:text-base">
                         "A rare work that bridges the gap between theoretical depth and practical application. The Stoics would have approved."
                     </p>
                 </div>
-                <div class="testimonial-card p-8 rounded-lg">
-                    <div class="flex items-center mb-6">
-                        <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 flex items-center justify-center gold-text">
-                            <span class="serif text-xl">DM</span>
+                <div class="testimonial-card p-6 md:p-8 rounded-lg relative">
+                    <div class="pricing-ornament" style="bottom: 8px; right: 8px;"></div>
+                    <div class="flex items-center mb-4 md:mb-6">
+                        <div class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-gray-200 mr-3 md:mr-4 flex items-center justify-center gold-text">
+                            <span class="serif text-lg md:text-xl">DM</span>
                         </div>
                         <div>
-                            <h4 class="font-medium tracking-wider">DAVID MERCER</h4>
-                            <p class="text-sm text-gray-500 tracking-wider">Author, "Deep Work Warrior"</p>
+                            <h4 class="font-medium tracking-wider text-sm md:text-base">DAVID MERCER</h4>
+                            <p class="text-xs md:text-sm text-gray-500 tracking-wider">Author, "Deep Work Warrior"</p>
                         </div>
                     </div>
-                    <p class="text-gray-700 italic leading-relaxed">
+                    <p class="text-gray-700 italic leading-relaxed text-sm md:text-base">
                         "I thought I knew everything about focus until I read this. The 30-Day Crucible alone is worth the investment."
                     </p>
                 </div>
@@ -524,124 +718,133 @@
     </section>
 
     <!-- Purchase Section -->
-    <section id="purchase" class="py-24 px-6 bg-parchment">
-        <div class="max-w-5xl mx-auto">
-            <div class="text-center mb-16">
+    <section id="purchase" class="py-16 md:py-24 px-6 bg-parchment relative overflow-hidden">
+        <div class="section-decoration">
+            <div class="parallax-element geometric-pattern" style="top: 10%; left: 5%;" data-speed="0.1"></div>
+            <div class="parallax-element ancient-schematic" style="bottom: 15%; right: 5%; transform: rotate(-15deg);" data-speed="0.15"></div>
+        </div>
+        
+        <div class="max-w-5xl mx-auto content-wrapper">
+            <div class="text-center mb-12 md:mb-16">
                 <span class="text-xs uppercase tracking-widest text-muted">Acquire</span>
-                <h2 class="serif text-4xl md:text-5xl font-medium mt-4 mb-6">Own This <span class="gold-text">Limited Edition</span></h2>
-                <div class="section-divider w-32 mx-auto my-6"></div>
-                <p class="text-gray-700 max-w-3xl mx-auto leading-relaxed">
+                <h2 class="serif text-3xl md:text-5xl font-medium mt-3 md:mt-4 mb-4 md:mb-6">Own This <span class="gold-text fancy-underline">Limited Edition</span></h2>
+                <div class="section-divider w-24 md:w-32 mx-auto my-4 md:my-6"></div>
+                <p class="text-gray-700 max-w-3xl mx-auto leading-relaxed text-sm md:text-base">
                     Only 500 hand-numbered copies will ever be printed. Each volume is bound in premium materials and includes exclusive content not available in digital formats.
                 </p>
             </div>
             
-            <div class="grid md:grid-cols-3 gap-8 mt-12">
-                <div class="pricing-card p-8 rounded-lg">
-                    <h3 class="serif text-2xl mb-4 tracking-wider">STANDARD EDITION</h3>
-                    <p class="gold-text serif text-3xl mb-6">$195</p>
-                    <ul class="space-y-3 text-gray-600 mb-8">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mt-8 md:mt-12">
+                <div class="pricing-card p-6 md:p-8 rounded-lg relative">
+                    <div class="pricing-ornament" style="top: 8px; right: 8px;"></div>
+                    <h3 class="serif text-xl md:text-2xl mb-3 md:mb-4 tracking-wider">STANDARD EDITION</h3>
+                    <p class="gold-text serif text-2xl md:text-3xl mb-4 md:mb-6">$195</p>
+                    <ul class="space-y-2 md:space-y-3 text-gray-600 mb-6 md:mb-8 text-sm md:text-base">
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Hand-numbered copy</span>
                         </li>
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Premium clothbound cover</span>
                         </li>
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Exclusive companion PDF</span>
                         </li>
                     </ul>
-                    <a href="#" class="block text-center btn-gold px-6 py-3 transition duration-300 tracking-wider">
+                    <a href="#" class="block text-center btn-gold px-4 py-2 md:px-6 md:py-3 transition duration-300 tracking-wider text-sm md:text-base">
                         PURCHASE
                     </a>
                 </div>
-                <div class="pricing-card-featured p-8 rounded-lg">
-                    <h3 class="serif text-2xl mb-4 tracking-wider">COLLECTOR'S EDITION</h3>
-                    <p class="gold-text serif text-3xl mb-6">$495</p>
-                    <ul class="space-y-3 text-gray-600 mb-8">
+                <div class="pricing-card-featured p-6 md:p-8 rounded-lg relative">
+                    <div class="pricing-ornament" style="top: 8px; left: 8px;"></div>
+                    <div class="pricing-ornament" style="bottom: 8px; right: 8px;"></div>
+                    <h3 class="serif text-xl md:text-2xl mb-3 md:mb-4 tracking-wider">COLLECTOR'S EDITION</h3>
+                    <p class="gold-text serif text-2xl md:text-3xl mb-4 md:mb-6">$495</p>
+                    <ul class="space-y-2 md:space-y-3 text-gray-600 mb-6 md:mb-8 text-sm md:text-base">
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Hand-numbered copy (1-100)</span>
                         </li>
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Full leather binding</span>
                         </li>
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Signed by the author</span>
                         </li>
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Private 1-hour consultation</span>
                         </li>
                     </ul>
-                    <a href="#" class="block text-center btn-gold-solid px-6 py-3 transition duration-300 tracking-wider">
+                    <a href="#" class="block text-center btn-gold-solid px-4 py-2 md:px-6 md:py-3 transition duration-300 tracking-wider text-sm md:text-base">
                         PURCHASE
                     </a>
                 </div>
-                <div class="pricing-card p-8 rounded-lg">
-                    <h3 class="serif text-2xl mb-4 tracking-wider">EXECUTIVE BUNDLE</h3>
-                    <p class="gold-text serif text-3xl mb-6">$995</p>
-                    <ul class="space-y-3 text-gray-600 mb-8">
+                <div class="pricing-card p-6 md:p-8 rounded-lg relative">
+                    <div class="pricing-ornament" style="bottom: 8px; left: 8px;"></div>
+                    <h3 class="serif text-xl md:text-2xl mb-3 md:mb-4 tracking-wider">EXECUTIVE BUNDLE</h3>
+                    <p class="gold-text serif text-2xl md:text-3xl mb-4 md:mb-6">$995</p>
+                    <ul class="space-y-2 md:space-y-3 text-gray-600 mb-6 md:mb-8 text-sm md:text-base">
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Two Collector's Editions</span>
                         </li>
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Custom embossed case</span>
                         </li>
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Annual membership updates</span>
                         </li>
                         <li class="flex items-start">
-                            <i class="fas fa-check gold-text mr-2 mt-1"></i>
+                            <i class="fas fa-check gold-text mr-2 mt-0.5 md:mt-1 text-xs md:text-sm"></i>
                             <span>Quarterly strategy sessions</span>
                         </li>
                     </ul>
-                    <a href="#" class="block text-center btn-gold px-6 py-3 transition duration-300 tracking-wider">
+                    <a href="#" class="block text-center btn-gold px-4 py-2 md:px-6 md:py-3 transition duration-300 tracking-wider text-sm md:text-base">
                         PURCHASE
                     </a>
                 </div>
             </div>
             
-            <div class="text-center mt-16 text-muted text-sm tracking-wider">
+            <div class="text-center mt-12 md:mt-16 text-muted text-xs md:text-sm tracking-wider">
                 <p>All purchases include a 30-day satisfaction guarantee. Digital companion materials delivered immediately.</p>
-                <p class="mt-2">Remaining copies: 127/500</p>
+                <p class="mt-1 md:mt-2">Remaining copies: 127/500</p>
             </div>
         </div>
     </section>
 
     <!-- Footer -->
-    <footer class="bg-ivory py-16 px-6 footer-border">
+    <footer class="bg-ivory py-12 md:py-16 px-6 footer-border">
         <div class="max-w-5xl mx-auto">
             <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="mb-8 md:mb-0">
+                <div class="mb-6 md:mb-0">
                     <span class="serif text-2xl gold-text tracking-wider">FOCVS</span>
-                    <p class="text-muted mt-2 tracking-wider">THE ART OF SUSTAINED ATTENTION</p>
+                    <p class="text-muted mt-1 md:mt-2 tracking-wider text-sm">THE ART OF SUSTAINED ATTENTION</p>
                 </div>
-                <div class="flex space-x-6">
+                <div class="flex space-x-4 md:space-x-6">
                     <a href="#" class="text-muted hover-gold transition duration-300">
-                        <i class="fab fa-twitter"></i>
+                        <i class="fab fa-twitter text-lg"></i>
                     </a>
                     <a href="#" class="text-muted hover-gold transition duration-300">
-                        <i class="fab fa-instagram"></i>
+                        <i class="fab fa-instagram text-lg"></i>
                     </a>
                     <a href="#" class="text-muted hover-gold transition duration-300">
-                        <i class="fas fa-envelope"></i>
+                        <i class="fas fa-envelope text-lg"></i>
                     </a>
                 </div>
             </div>
-            <div class="footer-border mt-12 pt-8 flex flex-col md:flex-row justify-between">
-                <p class="text-muted text-sm mb-4 md:mb-0 tracking-wider">© 2023 FOCVS PRESS. ALL RIGHTS RESERVED.</p>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-muted hover-gold text-sm transition duration-300 tracking-wider">PRIVACY</a>
-                    <a href="#" class="text-muted hover-gold text-sm transition duration-300 tracking-wider">TERMS</a>
-                    <a href="#" class="text-muted hover-gold text-sm transition duration-300 tracking-wider">CONTACT</a>
+            <div class="footer-border mt-8 md:mt-12 pt-6 md:pt-8 flex flex-col md:flex-row justify-between">
+                <p class="text-muted text-xs md:text-sm mb-3 md:mb-0 tracking-wider">© 2023 FOCVS PRESS. ALL RIGHTS RESERVED.</p>
+                <div class="flex space-x-4 md:space-x-6">
+                    <a href="#" class="text-muted hover-gold text-xs md:text-sm transition duration-300 tracking-wider">PRIVACY</a>
+                    <a href="#" class="text-muted hover-gold text-xs md:text-sm transition duration-300 tracking-wider">TERMS</a>
+                    <a href="#" class="text-muted hover-gold text-xs md:text-sm transition duration-300 tracking-wider">CONTACT</a>
                 </div>
             </div>
         </div>
@@ -692,6 +895,44 @@
         
         // Update every 30 seconds
         setInterval(updateRemainingCopies, 30000);
+        
+        // Parallax effect for decorative elements
+        document.addEventListener('mousemove', function(e) {
+            const parallaxElements = document.querySelectorAll('.parallax-element');
+            const x = e.clientX / window.innerWidth;
+            const y = e.clientY / window.innerHeight;
+            
+            parallaxElements.forEach(element => {
+                const speed = parseFloat(element.getAttribute('data-speed'));
+                const xMove = x * speed * 100;
+                const yMove = y * speed * 100;
+                
+                element.style.transform = `translate(${xMove}px, ${yMove}px)`;
+            });
+        });
+        
+        // Scroll-based animations
+        window.addEventListener('scroll', function() {
+            const scrollPosition = window.scrollY;
+            const heroBook = document.querySelector('.book-container');
+            
+            if (heroBook) {
+                const rotation = scrollPosition * 0.05;
+                heroBook.style.transform = `rotateY(${-20 + rotation}deg)`;
+            }
+            
+            // Animate decorative elements on scroll
+            const ancientSchematics = document.querySelectorAll('.ancient-schematic');
+            ancientSchematics.forEach(schematic => {
+                const schematicPosition = schematic.getBoundingClientRect().top;
+                const windowHeight = window.innerHeight;
+                
+                if (schematicPosition < windowHeight) {
+                    const rotation = (windowHeight - schematicPosition) / windowHeight * 10;
+                    schematic.style.transform = `rotate(${rotation}deg)`;
+                }
+            });
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ChimpDann/braindump" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt

@@ -1 +1,3 @@
-Everything looks good except the website aesthetics. You did not change it to old money, quiet luxury type of aesthetics. Like, change the UI look of this website to more reference old money and quiet luxury aesthetics.
+Everything looks good except the website aesthetics. You did not change it to old money, quiet luxury type of aesthetics. Like, change the UI look of this website to more reference old money and quiet luxury aesthetics.
+Can you add like subtle patterns or like drawing schematics that would look like ancient stoic or maybe just represent the same style, you know, the style of old money? But it subtly enhance the visuals like on the bright background there could be like textured pencil drawings or patterns, something like that point attention to a book, you know, like some circles or diagram, not diagrams, but something that could maybe all like your go, like a secret geometry or something. Can you add some textures to the background and then parallax?
+I don't see any patterns on the background. They are like too unclear for me. I would like a bit more geometric patterns, but looking aesthetically. And I need it to be more mobile responsive. So can you arrange everything? Can you make this into mobile responsive web?