* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #0a0a0a;
color: #fff;
line-height: 1.6;
}
a {
color: inherit;
}
.container {
width: min(92%, 1300px);
margin: 0 auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
gap: 24px;
}
.logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.logo img {
height: 72px;
width: auto;
filter: invert(1);
}
.main-nav {
display: flex;
align-items: center;
gap: 30px;
}
.main-nav a {
text-decoration: none;
color: rgba(255, 255, 255, 0.72);
font-weight: 800;
font-size: 14px;
}
.main-nav a:hover {
color: #fff;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 15px 25px;
text-decoration: none;
font-weight: 900;
transition: 0.25s ease;
}
.btn-white {
background: #fff;
color: #000;
}
.btn-white:hover {
background: #e8e8e8;
}
.btn-outline {
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
}
.btn-outline:hover {
background: #fff;
color: #000;
}
.hero {
position: relative;
overflow: hidden;
min-height: 88vh;
display: flex;
align-items: center;
background:
radial-gradient(circle at 70% 20%, rgba(255,255,255,0.18), transparent 26%),
linear-gradient(135deg, #111, #060606 55%, #000);
}
.hero:before {
content: "";
position: absolute;
inset: 0;
opacity: 0.07;
background-image:
linear-gradient(#fff 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px);
background-size: 54px 54px;
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 56px;
padding: 90px 0;
}
.badge {
display: inline-flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.78);
border-radius: 999px;
padding: 10px 18px;
margin-bottom: 28px;
font-size: 14px;
font-weight: 700;
}
.dot {
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
}
.hero h1 {
max-width: 820px;
font-size: clamp(48px, 7vw, 94px);
line-height: 0.95;
letter-spacing: -0.05em;
font-weight: 900;
}
.hero p {
max-width: 680px;
margin-top: 28px;
font-size: 19px;
color: rgba(255,255,255,0.68);
}
.hero-actions {
margin-top: 38px;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.hero-card {
position: relative;
overflow: hidden;
border-radius: 34px;
background: #fff;
color: #000;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 30px 90px rgba(0,0,0,0.45);
}
.hero-card-logo {
background: #f4f4f4;
padding: 32px;
}
.hero-card-logo img {
height: 88px;
width: auto;
}
.hero-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #ddd;
gap: 1px;
}
.step {
background: #fff;
padding: 24px;
}
.step strong {
font-size: 40px;
font-weight: 900;
}
.step span {
display: block;
margin-top: 4px;
color: #666;
font-weight: 700;
font-size: 14px;
}
.hero-img {
position: relative;
height: 350px;
overflow: hidden;
}
.hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1);
}
.hero-img-text {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
border-radius: 24px;
background: rgba(255,255,255,0.92);
color: #000;
padding: 22px;
}
.hero-img-text small {
display: block;
color: #777;
text-transform: uppercase;
letter-spacing: 0.22em;
font-weight: 900;
}
.hero-img-text strong {
display: block;
margin-top: 8px;
font-size: 25px;
line-height: 1.1;
font-weight: 900;
}
.section {
padding: 105px 0;
}
.section-light {
background: #f4f1ea;
color: #000;
}
.section-white {
background: #fff;
color: #000;
}
.section-head {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 30px;
align-items: end;
margin-bottom: 52px;
}
.eyebrow {
color: #777;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.28em;
margin-bottom: 12px;
}
.section-title {
font-size: clamp(40px, 5vw, 70px);
line-height: 1;
letter-spacing: -0.04em;
font-weight: 900;
}
.section-copy {
max-width: 720px;
color: #626262;
font-size: 18px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.service-card {
background: #fff;
border-radius: 30px;
padding: 28px;
min-height: 250px;
border: 1px solid rgba(0,0,0,0.08);
transition: 0.25s ease;
}
.service-card:hover {
transform: translateY(-7px);
background: #000;
color: #fff;
}
.service-number {
color: #999;
font-weight: 900;
margin-bottom: 34px;
}
.service-card h3 {
font-size: 22px;
line-height: 1.1;
margin-bottom: 14px;
font-weight: 900;
}
.service-card p {
color: #666;
font-size: 14px;
}
.service-card:hover p {
color: rgba(255,255,255,0.68);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.gallery-item {
overflow: hidden;
border-radius: 32px;
background: #f3f3f3;
}
.gallery-item.large {
grid-column: span 2;
}
.gallery-item img {
width: 100%;
height: 330px;
object-fit: cover;
filter: grayscale(1);
transition: 0.35s ease;
}
.gallery-item.large img {
height: 500px;
}
.gallery-item:hover img {
filter: grayscale(0);
transform: scale(1.04);
}
.gallery-caption {
padding: 24px;
}
.gallery-caption h3 {
font-size: 22px;
font-weight: 900;
}
.gallery-caption p {
color: #666;
font-weight: 700;
font-size: 14px;
}
.hange-box {
display: grid;
grid-template-columns: 1fr auto;
gap: 42px;
align-items: center;
border: 1px solid rgba(255,255,255,0.1);
background: linear-gradient(135deg, #171717, #050505);
border-radius: 38px;
padding: 58px;
}
.stars {
font-size: 24px;
letter-spacing: 4px;
margin-bottom: 18px;
}
.hange-box h2 {
font-size: clamp(38px, 5vw, 68px);
line-height: 1;
font-weight: 900;
letter-spacing: -0.04em;
}
.hange-box p {
max-width: 700px;
margin-top: 18px;
color: rgba(255,255,255,0.64);
font-size: 18px;
}
.contact-layout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 42px;
}
.contact-main p {
color: #666;
font-size: 18px;
margin-top: 18px;
}
.quick-contact {
margin-top: 28px;
color: #333;
font-weight: 800;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.contact-card {
background: #fff;
border-radius: 32px;
padding: 32px;
border: 1px solid rgba(0,0,0,0.08);
transition: 0.25s ease;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}
.initials {
width: 64px;
height: 64px;
background: #000;
color: #fff;
border-radius: 18px;
display: grid;
place-items: center;
font-weight: 900;
margin-bottom: 28px;
}
.contact-card h3 {
font-size: 21px;
font-weight: 900;
}
.contact-card a,
.contact-card span {
display: block;
margin-top: 8px;
color: #666;
text-decoration: none;
font-weight: 700;
font-size: 14px;
}
.role {
color: #777;
font-weight: 800;
margin-top: 12px;
font-size: 14px;
}
.site-footer {
border-top: 1px solid rgba(255,255,255,0.08);
background: #0a0a0a;
padding: 38px 0;
}
.footer-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
flex-wrap: wrap;
}
.footer-wrap img {
height: 64px;
filter: invert(1);
}
.footer-wrap p {
color: rgba(255,255,255,0.45);
font-size: 14px;
}
@media (max-width: 1050px) {
.hero-grid,
.section-head,
.contact-layout,
.hange-box {
grid-template-columns: 1fr;
}
.services-grid,
.gallery-grid,
.contact-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-item.large {
grid-column: span 1;
}
}
@media (max-width: 720px) {
.main-nav,
.header-cta {
display: none;
}
.logo img {
height: 54px;
}
.hero-grid {
padding: 62px 0;
}
.hero h1 {
font-size: 48px;
}
.services-grid,
.gallery-grid,
.contact-grid,
.hero-steps {
grid-template-columns: 1fr;
}
.hero-card-logo img,
.footer-wrap img {
height: 54px;
}
.section {
padding: 72px 0;
}
.hange-box {
padding: 34px;
}
.gallery-item img,
.gallery-item.large img {
height: 300px;
}
}