html,
body {
margin: 0;
padding: 0;
background: #09000d;
color: #fff;
font-family: Inter, sans-serif;
}
.hero {
position: relative;
min-height: 100svh;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
background:
linear-gradient(
180deg,
rgba(5,0,8,.08) 0%,
rgba(5,0,8,.04) 20%,
rgba(5,0,8,.12) 100%
),
linear-gradient(
90deg,
rgba(5,0,8,.28) 0%,
rgba(5,0,8,.10) 45%,
rgba(5,0,8,0) 100%
);
}
@media (max-width:768px) {
.hero-overlay {
background:
linear-gradient(
180deg,
rgba(5,0,8,.04),
rgba(5,0,8,.10)
),
linear-gradient(
90deg,
rgba(5,0,8,.18),
rgba(5,0,8,0)
);
}
}
.hero-content {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 100svh;
padding:
max(22px, env(safe-area-inset-top))
22px
34px
22px;
box-sizing: border-box;
}
.logo {
display: block;
width: 210px;
max-width: 72vw;
margin:
8px auto 34px auto;
}
h1 {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: clamp(2.2rem, 7vw, 4.4rem);
line-height: .95;
font-weight: 600;
letter-spacing: -.03em;
max-width: 320px;
text-shadow:
0 2px 18px rgba(0,0,0,.45);
}
.subtitle {
margin-top: 18px;
font-size: 1.05rem;
line-height: 1.45;
color: rgba(255,255,255,.88);
max-width: 280px;
text-shadow:
0 2px 12px rgba(0,0,0,.45);
}
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 50px;
padding: 0 22px;
border-radius: 999px;
background:
linear-gradient(
135deg,
#b4547e,
#d56d97
);
color: #fff;
text-decoration: none;
font-size: .96rem;
font-weight: 600;
letter-spacing: .01em;
box-shadow:
0 8px 24px rgba(213,109,151,.28);
}
.cta:active {
transform: scale(.98);
}
.cta-row {
display: flex;
align-items: flex-end;
gap: 18px;
margin-top: 42px;
}
.hero-qr {
width: 78px;
height: 78px;
opacity: .92;
filter:
drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
@media (max-width:768px) {
.hero-qr {
display: none;
}
}
/* =========================
DESKTOP
========================= */
@media (min-width: 769px) {
.hero-content {
justify-content: center;
padding-left: 7vw;
max-width: 620px;
}
.logo {
width: 210px;
}
@media (min-width: 769px) {
.logo {
width: 260px;
}
}
h1 {
font-size:
clamp(4rem, 5vw, 5.8rem);
max-width: 600px;
}
.subtitle {
font-size: 1.2rem;
max-width: 420px;
margin-top: 24px;
}
}
.callbox {
display: inline-flex;
margin-top: 44px;
flex-direction: column;
width: 200px;
max-width: 82vw;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
box-shadow:
0 10px 28px rgba(0,0,0,.30);
}
.callbox-top {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background:
linear-gradient(
180deg,
#b81d88,
#9a126f
);
color: #fff;
font-size: .82rem;
font-weight: 700;
border-radius:
16px 16px 0 0;
overflow: hidden;
}
.callbox-bottom {
background:
rgba(34,8,38,.78);
padding:
10px 12px 12px 12px;
text-align: center;
color:
rgba(255,255,255,.82);
font-size: .72rem;
line-height: 1.45;
}
.callbox-bottom div + div {
margin-top: 2px;
opacity: .82;
}
.phone-icon {
width: 15px;
height: 15px;
opacity: .95;
flex: 0 0 auto;
}
.callbox-number {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
.callbox-active {
transform:
scale(.985);
transition:
transform .12s ease;
}
.click-glow {
transform:
scale(.985);
transition:
transform .12s ease;
filter:
brightness(1.04);
}
/*---------- */
.intro-section {
position: relative;
padding:
80px 22px;
background:
linear-gradient(
180deg,
#120014,
#190018
);
}
.intro-grid {
display: grid;
gap: 44px;
max-width: 1200px;
margin: 0 auto;
}
.intro-card {
overflow: hidden;
border-radius: 24px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.05);
box-shadow:
0 12px 34px rgba(0,0,0,.22);
}
.intro-image {
display: block;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.intro-content {
padding:
22px;
}
.intro-content h2 {
margin: 0 0 12px 0;
font-family:
"Cormorant Garamond", serif;
font-size:
clamp(1.8rem, 4vw, 2.6rem);
line-height: 1;
color:
#fff;
}
.intro-content p {
margin: 0;
color:
rgba(255,255,255,.78);
line-height: 1.7;
font-size:
1rem;
}
@media (min-width: 900px) {
.intro-grid {
grid-template-columns:
repeat(3,1fr);
}
.intro-card:nth-child(2) {
margin-top: 36px;
}
.intro-card:nth-child(3) {
margin-top: 72px;
}
}
.intro-content {
padding:
26px 24px 20px 24px;
}
.intro-image {
margin-top: 6px;
display: block;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius:
0 0 22px 22px;
}
.intro-card {
position: relative;
display: block;
text-decoration: none;
color: inherit;
}
.card-call-overlay {
position: absolute;
right: 16px;
bottom: 16px;
width: 40px;
height: 40px;
border-radius: 999px;
background:
rgba(154,18,111,.82);
backdrop-filter:
blur(8px);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 6px 18px rgba(0,0,0,.28);
}
.card-phone-icon {
width: 18px;
height: 18px;
color: #fff;
}
.seo-section {
padding:
90px 22px 42px 22px;
background:
linear-gradient(
180deg,
#190018,
#120014
);
overflow: hidden;
}
.seo-container {
max-width:
860px;
margin:
0 auto;
}
.seo-section h2 {
margin:
0 0 28px 0;
font-family:
"Cormorant Garamond", serif;
font-size:
clamp(2.4rem, 5vw, 4rem);
line-height:
.98;
}
.seo-section h3 {
margin:
48px 0 18px 0;
font-family:
"Cormorant Garamond", serif;
font-size:
clamp(1.7rem, 3vw, 2.4rem);
line-height:
1.05;
}
.seo-section p {
margin:
0 0 22px 0;
color:
rgba(255,255,255,.82);
font-size:
1.05rem;
line-height:
1.9;
}
.seo-image {
display: block;
width: 100%;
max-width: 720px;
border-radius:
28px;
box-shadow:
0 18px 48px rgba(0,0,0,.28);
}
.seo-image-wrap {
position: relative;
display: block;
width: fit-content;
margin:
14px auto 10px auto;
text-decoration: none;
}
.seo-cta-row {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 18px;
margin:
32px 0 0 0;
}
.faq-section {
padding:
90px 22px 110px 22px;
background:
linear-gradient(
180deg,
#120014,
#09000d
);
}
.faq-container {
max-width:
860px;
margin:
0 auto;
}
.faq-section h2 {
margin:
0 0 46px 0;
font-family:
"Cormorant Garamond", serif;
font-size:
clamp(2.4rem, 5vw, 4rem);
line-height:
.98;
}
.faq-item {
padding:
0 0 34px 0;
margin:
0 0 34px 0;
border-bottom:
1px solid rgba(255,255,255,.08);
}
.faq-item h3 {
margin:
0 0 14px 0;
font-size:
1.18rem;
font-weight:
600;
line-height:
1.35;
}
.faq-item p {
margin:
0;
color:
rgba(255,255,255,.78);
line-height:
1.8;
}
.seo-link {
display: inline-block;
margin-top: 18px;
color:
#d98bb7;
text-decoration: none;
font-weight: 600;
}
.seo-link:hover {
color:
#fff;
}
.back-home-section {
padding:
0 22px 90px 22px;
text-align:
center;
background:
#09000d;
}
.back-home-link {
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
10px;
min-height:
52px;
padding:
0 26px;
border-radius:
999px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
color:
rgba(255,255,255,.88);
text-decoration:
none;
font-size:
.96rem;
font-weight:
500;
backdrop-filter:
blur(10px);
transition:
all .18s ease;
}
.back-home-link:hover {
background:
rgba(255,255,255,.08);
border-color:
rgba(255,255,255,.16);
color:
#fff;
transform:
translateY(-1px);
}
.faq-item a {
color:
#d98bb7;
text-decoration:
none;
border-bottom:
1px solid rgba(217,139,183,.28);
transition:
all .18s ease;
}
.faq-item a:hover {
color:
#fff;
border-bottom-color:
rgba(255,255,255,.55);
}
.back-home-section {
padding:
10px 22px 90px 22px;
text-align:
center;
background:
#09000d;
}
.back-home-link {
display:
inline-flex;
align-items:
center;
gap:
12px;
color:
rgba(255,255,255,.72);
text-decoration:
none;
font-size:
1rem;
letter-spacing:
.01em;
transition:
all .18s ease;
}
.back-home-arrow {
display:
inline-flex;
align-items:
center;
justify-content:
center;
width:
34px;
height:
34px;
border-radius:
999px;
background:
rgba(255,255,255,.05);
color:
#d98bb7;
font-size:
1rem;
transition:
all .18s ease;
}
.back-home-link:hover {
color:
#fff;
}
.back-home-link:hover .back-home-arrow {
background:
rgba(217,139,183,.14);
transform:
translateX(-2px);
}
.seo-links-grid {
display: grid;
gap: 18px;
margin-top: 42px;
}
@media (min-width: 820px) {
.seo-links-grid {
grid-template-columns:
repeat(2,1fr);
}
}
.seo-nav-card {
position: relative;
display: block;
padding:
22px 24px;
border-radius:
22px;
background:
rgba(255,255,255,.035);
border:
1px solid rgba(255,255,255,.06);
text-decoration:
none;
overflow:
hidden;
transition:
all .18s ease;
}
.seo-nav-card:hover {
transform:
translateY(-2px);
background:
rgba(255,255,255,.05);
border-color:
rgba(217,139,183,.24);
}
.seo-nav-label {
font-size:
.72rem;
text-transform:
uppercase;
letter-spacing:
.08em;
color:
rgba(217,139,183,.78);
margin-bottom:
10px;
}
.seo-nav-title {
font-family:
"Cormorant Garamond", serif;
font-size:
1.7rem;
line-height:
1;
color:
#fff;
max-width:
220px;
}
.seo-nav-arrow {
position:
absolute;
right:
22px;
bottom:
18px;
font-size:
1.4rem;
color:
rgba(255,255,255,.38);
transition:
transform .18s ease;
}
.seo-nav-card:hover .seo-nav-arrow {
transform:
translateX(3px);
color:
#fff;
}
.related-section {
padding:
40px 22px 20px 22px;
background:
#120014;
}
.related-container {
max-width:
1080px;
margin:
0 auto;
}
.related-section h2 {
margin:
0 0 26px 0;
font-family:
"Cormorant Garamond", serif;
font-size:
clamp(2rem,4vw,3rem);
font-weight:
600;
line-height:
.95;
letter-spacing:
-.03em;
color:
#fff;
}
.related-grid {
display:
grid;
gap:
18px;
}
@media (min-width: 820px) {
.related-grid {
grid-template-columns:
repeat(2,1fr);
}
}
.related-card {
position:
relative;
display:
block;
padding:
24px;
border-radius:
24px;
background:
rgba(255,255,255,.035);
border:
1px solid rgba(255,255,255,.06);
text-decoration:
none;
overflow:
hidden;
transition:
all .18s ease;
}
.related-card:hover {
transform:
translateY(-2px);
border-color:
rgba(217,139,183,.28);
background:
rgba(255,255,255,.05);
}
.related-label {
font-size:
.72rem;
text-transform:
uppercase;
letter-spacing:
.08em;
color:
rgba(217,139,183,.78);
margin-bottom:
10px;
}
.related-title {
font-family:
"Cormorant Garamond", serif;
font-size:
1.7rem;
line-height:
1.02;
color:
#fff;
max-width:
240px;
}
.related-arrow {
position:
absolute;
right:
22px;
bottom:
20px;
font-size:
1.5rem;
color:
rgba(255,255,255,.34);
transition:
all .18s ease;
}
.related-card:hover .related-arrow {
transform:
translateX(4px);
color:
#fff;
}
.site-footer {
padding:
34px 22px 46px 22px;
background:
#0d000f;
border-top:
1px solid rgba(255,255,255,.05);
}
.footer-container {
max-width:
1080px;
margin:
0 auto;
display:
flex;
flex-direction:
column;
gap:
14px;
align-items:
center;
text-align:
center;
}
.footer-copy {
font-size:
.92rem;
color:
rgba(255,255,255,.55);
line-height:
1.5;
}
.footer-links {
display:
flex;
flex-wrap:
wrap;
justify-content:
center;
gap:
10px;
font-size:
.92rem;
}
.footer-links a {
color:
rgba(255,255,255,.72);
text-decoration:
none;
transition:
color .18s ease;
}
.footer-links a:hover {
color:
#fff;
}
.footer-links span {
color:
rgba(255,255,255,.28);
}
.legal-page {
padding:
90px 22px 70px 22px;
background:
linear-gradient(
180deg,
#190018,
#120014
);
min-height:
100vh;
}
.legal-container {
max-width:
860px;
margin:
0 auto;
}
.legal-page h1 {
margin:
42px 0 28px 0;
font-family:
"Cormorant Garamond", serif;
font-size:
clamp(3rem,7vw,5rem);
font-weight:
600;
line-height:
.92;
letter-spacing:
-.04em;
color:
#fff;
}
.legal-page h2 {
margin:
52px 0 18px 0;
font-family:
"Cormorant Garamond", serif;
font-size:
clamp(1.8rem,4vw,2.6rem);
font-weight:
600;
line-height:
.98;
letter-spacing:
-.03em;
color:
#fff;
}
.legal-page p {
margin:
0 0 22px 0;
font-size:
1.05rem;
line-height:
1.85;
color:
rgba(255,255,255,.82);
}