/* Hero Section */ .hero { padding: var(--spacing-xl) 0; display: grid; gap: var(--spacing-md); position: relative; overflow: hidden; /* Default for mobile: stack content */ grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .hero { grid-template-columns: 1.2fr 0.8fr; gap: var(--spacing-lg); } } .hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 800px; height: 800px; border-radius: 50%; z-index: -1; } .hero-content { max-width: 900px; position: relative; z-index: 1; } .hero-image { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; } .hero-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); object-fit: cover; max-height: 500px; /* Limit height on large screens */ } /* Mobile adjustments for hero image */ @media (max-width: 899px) { .hero-image { order: -1; /* Show image above text on mobile */ max-width: 300px; margin-left: auto; margin-right: auto; /* Option 2: Hide it if preferred, uncomment next line */ /* display: none; */ } .hero{ padding-top:var(--spacing-md); } .hero-image img { max-height: 300px; } } .hero h1 { margin-bottom: var(--spacing-md); line-height: 1.1; letter-spacing: -0.02em; } .hero .lead { margin-bottom: var(--spacing-lg); font-size: clamp(1.2rem, 2.5vw, 1.5rem); color: #333; } .hero-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } /* Feature/Services Teaser */ .services-teaser { } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); } .service-card-sm { padding: var(--spacing-md); border: 1px solid var(--color-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #fff; border-radius: var(--radius-sm); height: 100%; } .service-card-sm:hover { border-color: var(--color-text); transform: translateY(-5px); box-shadow: var(--shadow-md); } .service-card-sm h3 { font-size: 1.3rem; margin-bottom: 1rem; } /* Products Teaser */ .latest-products { padding: var(--spacing-lg) 0; } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-md); } .product-card { border: 1px solid var(--color-border); padding: var(--spacing-md); display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #fff; border-radius: var(--radius-sm); position: relative; } .product-card:hover { border-color: var(--color-text); transform: translateY(-5px); box-shadow: var(--shadow-lg); } .product-meta { font-family: var(--font-mono); font-size: 0.8rem; color: #666; margin-bottom: 0.75rem; display: inline-block; background: #f4f4f4; padding: 2px 8px; border-radius: 4px; } .product-card h3 { font-size: 1.5rem; margin-bottom: var(--spacing-sm); } .price-tag { font-size: 1.5rem; font-weight: 700; display: block; margin-top: auto; padding-top: var(--spacing-sm); color: var(--color-text); } /* Tools Teaser */ .tools-teaser { position: relative; margin-top: var(--spacing-lg); } /* Featured Content Section (Replaces Social Proof) */ .featured-content { margin-bottom: var(--spacing-lg); } .featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-md); } .featured-card { border: 1px solid var(--color-border); background: #fff; border-radius: var(--radius-sm); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .featured-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-text); } .featured-image { width: 100%; height: 200px; background: #f4f4f4; border-bottom: 1px solid var(--color-border); position: relative; } .featured-image img, .featured-image div { width: 100%; height: 100%; object-fit: cover; } .featured-info { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .featured-info h3 { font-size: 1.25rem; margin-bottom: 0.75rem; } .featured-info p { font-size: 0.95rem; color: #555; margin-bottom: 1.5rem; flex-grow: 1; } .featured-info .btn { align-self: flex-start; margin-top: auto; } /* Newsletter */ .newsletter { padding: var(--spacing-lg) 0; border-top: var(--border-width-thick) solid var(--color-text); margin-top: var(--spacing-xl); } .newsletter-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); } @media (min-width: 992px) { .newsletter-wrapper { grid-template-columns: 1fr 1fr; align-items: center; } } .newsletter-form { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; } .newsletter-form input { flex: 1; min-width: 240px; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: 1rem; background: #fff; transition: border-color 0.2s; } .newsletter-form input:focus { outline: none; border-color: var(--color-text); }