* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
font-family:
Inter,
Arial,
Helvetica,
sans-serif;
background:
#020d08;
color:
#f7fff9;
}
/* ==========================================================
PAGE
========================================================== */
.premium-page {
min-height:
100vh;
display:
grid;
grid-template-columns:
minmax(440px, 48%)
minmax(540px, 52%);
background:
#03130d;
}
/* ==========================================================
HERO
========================================================== */
.premium-hero {
min-height:
100vh;
position:
relative;
overflow:
hidden;
display:
flex;
align-items:
center;
background:
radial-gradient(
circle at 85% 30%,
rgba(215,255,85,.16),
transparent 22%
),
radial-gradient(
circle at 72% 75%,
rgba(237,42,104,.16),
transparent 25%
),
linear-gradient(
115deg,
rgba(2,13,8,.99) 0%,
rgba(3,24,15,.98) 46%,
rgba(10,52,31,.91) 100%
);
border-right:
1px solid
rgba(230,189,85,.24);
}
/* dark veil behind text */
.premium-hero::after {
content:
"";
position:
absolute;
inset:
0;
background:
linear-gradient(
90deg,
rgba(0,9,5,.88) 0%,
rgba(0,9,5,.66) 43%,
rgba(0,9,5,.10) 72%,
transparent 100%
);
pointer-events:
none;
z-index:
2;
}
/* ==========================================================
CONSULTANT IMAGE
========================================================== */
.hero-person {
position:
absolute;
inset:
0 0 0 30%;
z-index:
1;
display:
flex;
justify-content:
flex-end;
align-items:
flex-end;
}
.hero-person img {
height:
100%;
width:
100%;
object-fit:
cover;
object-position:
center center;
filter:
saturate(.94)
contrast(1.04);
opacity:
.96;
}
/* ==========================================================
CONTENT
========================================================== */
.hero-content {
position:
relative;
z-index:
4;
width:
min(
540px,
calc(100% - 76px)
);
margin-left:
clamp(
34px,
5vw,
76px
);
padding:
42px 0;
}
/* ==========================================================
BRAND
========================================================== */
.brand {
margin-bottom:
28px;
}
.brand-script {
display:
flex;
align-items:
baseline;
gap:
5px;
font-family:
"Brush Script MT",
"Segoe Script",
cursive;
font-size:
clamp(
42px,
5vw,
70px
);
line-height:
.9;
white-space:
nowrap;
}
.brand-adry {
color:
#ef376b;
}
.brand-ribeiro {
color:
#e9bd54;
}
.brand-leaf {
color:
#dfff64;
font-family:
serif;
font-size:
.40em;
transform:
rotate(-20deg)
translateY(-14px);
}
.brand-lifestyle {
margin-top:
13px;
margin-left:
72px;
font-size:
17px;
letter-spacing:
.42em;
color:
#fff;
}
/* ==========================================================
CONSULTANT
========================================================== */
.consultant-label {
margin-top:
28px;
font-size:
14px;
font-weight:
800;
letter-spacing:
.22em;
color:
#fff;
}
.consultant-label small {
display:
block;
margin-top:
10px;
font-size:
9px;
letter-spacing:
.20em;
font-weight:
500;
color:
rgba(255,255,255,.78);
}
.hero-divider {
width:
220px;
height:
2px;
margin:
25px 0 29px;
background:
linear-gradient(
90deg,
#e6bd55,
rgba(230,189,85,.10)
);
}
/* ==========================================================
TITLE
========================================================== */
.method-label {
color:
#efd76c;
letter-spacing:
.24em;
font-size:
13px;
font-weight:
800;
margin-bottom:
12px;
}
.hero-content h1 {
max-width:
460px;
margin:
0;
font-size:
clamp(
42px,
4.7vw,
68px
);
line-height:
1.01;
letter-spacing:
-.045em;
font-weight:
900;
color:
#fff;
}
.hero-content h1 span {
color:
#dfff64;
}
.hero-description {
max-width:
410px;
margin:
22px 0 29px;
font-size:
18px;
line-height:
1.55;
color:
rgba(255,255,255,.90);
}
/* ==========================================================
BENEFITS
========================================================== */
.benefits {
display:
grid;
grid-template-columns:
repeat(4, 1fr);
gap:
0;
max-width:
500px;
margin:
26px 0;
}
.benefit {
padding:
0 11px;
text-align:
center;
border-right:
1px solid
rgba(230,189,85,.28);
}
.benefit:first-child {
padding-left:
0;
}
.benefit:last-child {
border-right:
0;
}
.benefit-icon {
width:
52px;
height:
52px;
margin:
0 auto 9px;
display:
grid;
place-items:
center;
border:
2px solid #e6bd55;
border-radius:
50%;
color:
#dfff64;
font-size:
24px;
}
.benefit span {
display:
block;
font-size:
13px;
line-height:
1.25;
color:
#fff;
}
.benefit strong {
display:
block;
}
/* ==========================================================
CTA
========================================================== */
.hero-cta {
width:
min(100%, 430px);
min-height:
66px;
margin-top:
11px;
border:
0;
border-radius:
34px;
display:
flex;
align-items:
center;
justify-content:
center;
gap:
28px;
cursor:
pointer;
background:
linear-gradient(
135deg,
#e5ff75,
#c9f743
);
color:
#061009;
font-size:
21px;
font-weight:
900;
box-shadow:
0 18px 45px
rgba(216,255,88,.18);
transition:
.22s ease;
}
.hero-cta:hover {
transform:
translateY(-3px);
box-shadow:
0 22px 55px
rgba(216,255,88,.28);
}
.hero-cta span {
font-size:
31px;
font-weight:
400;
}
.secure-label {
width:
min(100%,430px);
margin-top:
14px;
text-align:
center;
font-size:
13px;
color:
rgba(255,255,255,.80);
}
/* ==========================================================
DECORATION
========================================================== */
.hero-glow {
position:
absolute;
z-index:
3;
border-radius:
50%;
pointer-events:
none;
}
.hero-glow-one {
width:
500px;
height:
500px;
right:
-320px;
bottom:
-190px;
border:
2px solid
rgba(230,189,85,.64);
box-shadow:
0 0 25px
rgba(230,189,85,.30),
inset 0 0 28px
rgba(239,55,107,.16);
}
.hero-glow-two {
width:
380px;
height:
380px;
right:
-250px;
bottom:
-130px;
border:
2px solid
rgba(239,55,107,.70);
}
.hero-signature {
position:
absolute;
left:
45px;
bottom:
34px;
z-index:
5;
font-family:
"Brush Script MT",
"Segoe Script",
cursive;
font-size:
27px;
line-height:
1.1;
transform:
rotate(-7deg);
color:
#e6bd55;
}
.hero-result {
position:
absolute;
right:
25px;
bottom:
36px;
z-index:
5;
max-width:
130px;
line-height:
1.6;
letter-spacing:
.15em;
color:
#fff;
}
.hero-result small {
display:
block;
font-size:
8px;
}
.hero-result strong {
display:
block;
color:
#dfff64;
font-size:
11px;
}
/* ==========================================================
CHAT SIDE
========================================================== */
.premium-chat-area {
min-height:
100vh;
padding:
clamp(
18px,
2.5vw,
36px
);
display:
flex;
align-items:
center;
justify-content:
center;
background:
radial-gradient(
circle at 100% 50%,
rgba(49,108,62,.18),
transparent 35%
),
linear-gradient(
145deg,
#03120c,
#061b12
);
}
.chat-frame {
width:
100%;
height:
calc(100vh - 52px);
max-height:
980px;
min-height:
680px;
display:
flex;
flex-direction:
column;
overflow:
hidden;
border:
1px solid
rgba(216,255,88,.20);
border-radius:
30px;
background:
rgba(3,18,12,.92);
box-shadow:
0 35px 90px
rgba(0,0,0,.42);
}
/* ==========================================================
CHAT HEADER
========================================================== */
.premium-chat-header {
min-height:
108px;
padding:
20px 28px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
border-bottom:
1px solid
rgba(216,255,88,.16);
background:
linear-gradient(
135deg,
#071c12,
#0a2618
);
}
.consultant-profile {
display:
flex;
align-items:
center;
gap:
14px;
}
.avatar-wrap {
position:
relative;
}
.avatar-wrap img {
width:
62px;
height:
62px;
object-fit:
cover;
border-radius:
50%;
border:
2px solid
#e6bd55;
}
.online-dot {
position:
absolute;
right:
1px;
bottom:
3px;
width:
16px;
height:
16px;
border:
3px solid
#082016;
border-radius:
50%;
background:
#36ef78;
}
.consultant-profile strong {
display:
block;
margin-bottom:
6px;
font-size:
20px;
color:
#dfff64;
}
.consultant-profile span {
font-size:
13px;
color:
rgba(255,255,255,.77);
}
.security-chip {
padding:
11px 17px;
border:
1px solid
rgba(216,255,88,.24);
border-radius:
24px;
color:
rgba(255,255,255,.86);
font-size:
12px;
line-height:
1.35;
}
/* ==========================================================
IFRAME CHAT
========================================================== */
.chat-body {
flex:
1;
min-height:
0;
background:
#05180f;
}
.chat-body iframe {
width:
100%;
height:
100%;
border:
0;
display:
block;
background:
transparent;
}
/* ==========================================================
FOOTER
========================================================== */
.premium-chat-footer {
min-height:
56px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
padding:
10px 28px;
background:
#061a11;
border-top:
1px solid
rgba(216,255,88,.12);
color:
rgba(255,255,255,.60);
font-size:
11px;
}
/* ==========================================================
TABLET
========================================================== */
@media (
max-width: 1180px
) {
.premium-page {
grid-template-columns:
43% 57%;
}
.hero-content {
width:
calc(100% - 48px);
margin-left:
30px;
}
.hero-content h1 {
font-size:
48px;
}
.benefits {
grid-template-columns:
repeat(2,1fr);
gap:
15px;
}
.benefit {
border:
0;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (
max-width: 860px
) {
.premium-page {
display:
block;
}
.premium-hero {
min-height:
760px;
}
.hero-person {
inset:
0 0 0 12%;
opacity:
.72;
}
.premium-hero::after {
background:
linear-gradient(
90deg,
rgba(0,9,5,.96),
rgba(0,9,5,.67) 64%,
rgba(0,9,5,.25)
);
}
.hero-content {
width:
calc(100% - 42px);
margin:
0 21px;
padding:
40px 0 110px;
}
.brand-script {
font-size:
51px;
}
.brand-lifestyle {
margin-left:
40px;
font-size:
13px;
}
.hero-content h1 {
max-width:
390px;
font-size:
45px;
}
.hero-description {
max-width:
360px;
font-size:
16px;
}
.benefits {
max-width:
390px;
}
.hero-result {
display:
none;
}
.hero-signature {
bottom:
18px;
left:
24px;
}
.premium-chat-area {
min-height:
auto;
padding:
12px;
}
.chat-frame {
min-height:
760px;
height:
calc(100vh - 24px);
border-radius:
22px;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (
max-width: 540px
) {
.premium-hero {
min-height:
800px;
}
.hero-content h1 {
font-size:
39px;
}
.benefits {
grid-template-columns:
repeat(2,1fr);
}
.premium-chat-header {
padding:
15px;
}
.security-chip {
display:
none;
}
.premium-chat-footer {
padding:
9px 15px;
justify-content:
center;
}
.premium-chat-footer div:last-child {
display:
none;
}
}