.hero-section {
min-height: calc(100vh - 8rem);
background: var(--color-background);
display: flex;
flex-direction: column;
h1 {
font-size: clamp(3.8rem, 7.65vw, 6.1rem);
font-weight: 800;
line-height: 0.9;
color: var(--color-text);
.highlight {
color: var(--color-primary);
}
@media (max-width: 768px) {
font-size: 4rem;
}
}
@media (max-width: 768px) {
min-height: auto;
}
}
.hero-inner {
flex: 1;
padding: var(--space-md) var(--space-lg);
@media (max-width: 768px) {
flex-direction: column;
padding: var(--space-lg) 1.5rem 10rem 1.5rem;
text-align: left;
}
}
.hero-content {
padding-right: var(--space-lg);
@media (max-width: 768px) {
padding-right: 0;
order: 1;
gap: 1.5rem;
}
}
.hero-pill {
display: inline-block;
width: fit-content;
background: var(--color-primary);
color: var(--color-white);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 500;
}
.hero-description {
font-size: 1.125rem;
color: var(--color-text-light);
line-height: 1.7;
max-width: 500px;
@media (max-width: 768px) {
max-width: 100%;
}
}
.hero-cta-group {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.75rem 2rem;
background: var(--color-primary);
color: var(--color-white);
border-radius: var(--radius-md);
font-weight: 600;
font-size: 1rem;
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
&:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
}
.hero-cta--secondary {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
&:hover {
background: var(--color-primary);
color: var(--color-white);
}
}
.hero-visual {
position: relative;
height: 420px;
display: flex;
align-items: center;
justify-content: center;
@media (max-width: 768px) {
order: 2;
margin-top: 10rem;
margin-bottom: 1rem;
overflow: visible;
}
} .mockup-wrapper {
position: absolute;
width: 280px;
@media (max-width: 768px) {
width: 180px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
}
.floating-mockup {
background: var(--color-white);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
&:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
animation-play-state: paused;
}
@media (max-width: 768px) {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
}
.mockup-browser {
background: var(--color-background);
padding: 0.4rem 0.6rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.browser-dots {
display: flex;
gap: 4px;
span {
width: 6px;
height: 6px;
border-radius: 50%;
&:first-child { background: #FF6058; }
&:nth-child(2) { background: #FFBD2E; }
&:last-child { background: #28CA42; }
}
}
.browser-url {
font-size: 0.6rem;
color: var(--color-text-light);
font-weight: 500;
background: var(--color-white);
padding: 0.15rem 0.5rem;
border-radius: var(--radius-sm);
flex: 1;
text-align: center;
}
.mockup-screenshot {
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--color-background) 0%, #E8E4DE 100%);
position: relative;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.screenshot-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
color: var(--color-text-light);
opacity: 0.3;
.material-symbols-outlined {
font-size: 28px;
}
span:last-child {
font-size: 0.65rem;
font-weight: 500;
}
}
.mockup-label {
padding: 0.6rem 0.8rem;
background: var(--color-text);
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
span {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.6rem;
font-weight: 600;
color: var(--color-white);
background: rgba(255, 255, 255, 0.1);
padding: 0.2rem 0.5rem;
border-radius: var(--radius-full);
white-space: nowrap;
}
.material-symbols-outlined {
font-size: 12px;
color: var(--color-primary-light);
}
} .mockup-1 {
top: 15%;
left: -5%;
z-index: 2;
.floating-mockup {
animation: floatLeft 6s ease-in-out infinite;
}
.floating-mockup:hover {
transform: rotate(-4deg) translateY(-8px) scale(1.03);
}
@media (max-width: 768px) {
z-index: 1;
transform: translate(-50%, -50%) rotate(-6deg) translateX(-20px);
.floating-mockup {
animation: none;
}
}
}
.mockup-2 {
top: 0;
left: 50%;
margin-left: -140px;
z-index: 3;
.floating-mockup {
animation: floatCenter 7s ease-in-out infinite;
}
.floating-mockup:hover {
transform: translateY(-10px) scale(1.03);
}
@media (max-width: 768px) {
z-index: 3;
margin-left: 0;
transform: translate(-50%, -50%) rotate(0deg);
.floating-mockup {
animation: none;
}
}
}
.mockup-3 {
top: 15%;
right: -5%;
z-index: 2;
.floating-mockup {
animation: floatRight 5.5s ease-in-out infinite;
}
.floating-mockup:hover {
transform: rotate(4deg) translateY(-6px) scale(1.03);
}
@media (max-width: 768px) {
z-index: 2;
transform: translate(-50%, -50%) rotate(6deg) translateX(20px);
.floating-mockup {
animation: none;
}
}
} @media (max-width: 768px) {
.mockup-wrapper {
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), z-index 0s 0.15s;
}
.mockup-wrapper.is-center {
z-index: 3 !important;
transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
}
.mockup-wrapper.is-left {
z-index: 1 !important;
transform: translate(-50%, -50%) rotate(-10deg) translateX(-25px) scale(0.92) !important;
}
.mockup-wrapper.is-right {
z-index: 2 !important;
transform: translate(-50%, -50%) rotate(10deg) translateX(25px) scale(0.92) !important;
} .mockup-wrapper.is-leaving-left {
z-index: 4 !important;
transform: translate(-50%, -50%) translateX(-80px) rotate(-8deg) !important;
transition: transform 0.2s ease-out, z-index 0s !important;
} .mockup-wrapper.is-leaving-right {
z-index: 4 !important;
transform: translate(-50%, -50%) translateX(80px) rotate(8deg) !important;
transition: transform 0.2s ease-out, z-index 0s !important;
}
}
@keyframes floatLeft {
0%, 100% { transform: rotate(-4deg) translateY(0); }
50% { transform: rotate(-4deg) translateY(-8px); }
}
@keyframes floatCenter {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes floatRight {
0%, 100% { transform: rotate(4deg) translateY(0); }
50% { transform: rotate(4deg) translateY(-6px); }
}