From fa26092ea41d49558b0a32692eb134d90423d0f0 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Fri, 3 Apr 2026 00:14:42 +0300
Subject: [PATCH] fix: mobile horizontal overflow and hero responsiveness

- Remove scrollbar-gutter: stable, add overflow-x: hidden on html
- Cap section-glow pseudo-element width to viewport on mobile
- Scale down hero logo, text, spacing, and button for small screens (iPhone SE)
---
 package.json                     |  2 +-
 src/app/globals.css              |  2 +-
 src/app/styles/theme.css         |  2 +-
 src/components/sections/Hero.tsx | 14 +++++++-------
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index cae5446..916e608 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -H 0.0.0.0",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
diff --git a/src/app/globals.css b/src/app/globals.css
index c178819..d321cfe 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -19,7 +19,7 @@
 
 html {
   scroll-behavior: smooth;
-  scrollbar-gutter: stable;
+  overflow-x: hidden;
 }
 
 body {
diff --git a/src/app/styles/theme.css b/src/app/styles/theme.css
index 07a723d..a61fdc5 100644
--- a/src/app/styles/theme.css
+++ b/src/app/styles/theme.css
@@ -71,7 +71,7 @@
   top: 0;
   left: 50%;
   transform: translateX(-50%);
-  width: 600px;
+  width: min(600px, 100%);
   height: 400px;
   background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05), transparent 70%);
   pointer-events: none;
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index 162e8f9..796cab5 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -164,28 +164,28 @@ export function Hero({ data: hero }: HeroProps) {
 
       {/* Content */}
       <div className="section-container relative z-10 text-center" style={{ textShadow: "0 1px 0 rgba(201,169,110,0.3), 0 2px 0 rgba(201,169,110,0.2), 0 4px 8px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.3)" }}>
-        <div className="hero-logo relative mx-auto mb-12 flex items-center justify-center" style={{ width: 220, height: 181 }}>
+        <div className="hero-logo relative mx-auto mb-6 sm:mb-12 flex items-center justify-center" style={{ width: 160, height: 132 }}>
           <div className="absolute -inset-10 rounded-full blur-[80px]" style={{ background: "radial-gradient(circle, rgba(201,169,110,0.25), transparent 70%)" }} />
           <div className="hero-logo-heartbeat relative">
             <HeroLogo
-              size={220}
-              className="drop-shadow-[0_0_10px_rgba(201,169,110,0.35)] drop-shadow-[0_0_40px_rgba(201,169,110,0.15)]"
+              size={160}
+              className="drop-shadow-[0_0_10px_rgba(201,169,110,0.35)] drop-shadow-[0_0_40px_rgba(201,169,110,0.15)] sm:scale-[1.375]"
             />
           </div>
         </div>
 
-        <h1 className="hero-title font-display text-5xl font-bold tracking-tight sm:text-6xl lg:text-8xl">
+        <h1 className="hero-title font-display text-4xl font-bold tracking-tight sm:text-6xl lg:text-8xl">
           <span className="gradient-text">{hero.headline}</span>
         </h1>
 
-        <p className="hero-subtitle mx-auto mt-8 max-w-xl text-xl text-gold/80 sm:text-2xl">
+        <p className="hero-subtitle mx-auto mt-5 max-w-xl text-lg text-gold/80 sm:mt-8 sm:text-2xl">
           {hero.subheadline}
         </p>
 
-        <div className="hero-cta mt-14">
+        <div className="hero-cta mt-8 sm:mt-14">
           <button
             onClick={openBooking}
-            className="group relative rounded-full border border-gold/60 bg-gold/15 px-10 py-5 text-lg font-semibold text-gold backdrop-blur-md transition-all duration-300 hover:bg-gold/25 hover:border-gold hover:shadow-[0_0_40px_rgba(201,169,110,0.35)] cursor-pointer"
+            className="group relative rounded-full border border-gold/60 bg-gold/15 px-8 py-4 text-base font-semibold text-gold backdrop-blur-md transition-all duration-300 hover:bg-gold/25 hover:border-gold hover:shadow-[0_0_40px_rgba(201,169,110,0.35)] cursor-pointer sm:px-10 sm:py-5 sm:text-lg"
           >
             <span className="relative z-10">{hero.ctaText}</span>
             {/* Pulse glow on hover */}