* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "Vazirmatn", sans-serif;
color: #f8fafc;
background:
radial-gradient(
circle at 85% 10%,
rgba(34, 197, 94, .18),
transparent 28%
),
radial-gradient(
circle at 10% 80%,
rgba(22, 163, 74, .12),
transparent 32%
),
linear-gradient(
135deg,
#06140c,
#081b11 48%,
#031009
);
min-height: 100vh;
overflow-x: hidden;
}
/* =========================
BACKGROUND
========================= */
.bg-grid {
position: fixed;
inset: 0;
pointer-events: none;
opacity: .13;
background-image:
linear-gradient(
rgba(255,255,255,.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.04) 1px,
transparent 1px
);
background-size: 60px 60px;
}
.orb {
position: fixed;
border-radius: 50%;
filter: blur(85px);
pointer-events: none;
z-index: -1;
}
.orb-a {
width: 320px;
height: 320px;
background: rgba(34,197,94,.13);
top: 3%;
right: -120px;
}
.orb-b {
width: 280px;
height: 280px;
background: rgba(74,222,128,.08);
bottom: 4%;
left: -120px;
}
/* =========================
TOPBAR
========================= */
.topbar {
position: relative;
background: rgba(3,16,9,.52);
backdrop-filter: blur(20px);
border-bottom:
1px solid rgba(255,255,255,.06);
z-index: 5;
}
.topbar-inner {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
/* BRAND */
.brand {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
text-decoration: none;
font-weight: 800;
}
.brand-logo {
width: 46px;
height: 46px;
border-radius: 14px;
background:
rgba(255,255,255,.07);
border:
1px solid rgba(255,255,255,.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.brand-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* DATE */
.top-info {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.datetime {
padding: 9px 13px;
border-radius: 12px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.07);
color: #a9baaf;
font-size: 12px;
}
.datetime i {
color: #4ade80;
margin-left: 6px;
}
/* CALL */
.call-btn {
color: #fff;
text-decoration: none;
border:
1px solid rgba(255,255,255,.1);
background:
rgba(255,255,255,.04);
padding: 10px 15px;
border-radius: 12px;
font-size: 13px;
transition: .3s;
}
.call-btn:hover {
color: #fff;
background:
rgba(255,255,255,.08);
}
/* =========================
HERO
========================= */
.hero {
padding:
85px 0 80px;
}
.hero-content {
max-width: 980px;
margin: auto;
}
/* STATUS */
.status-pill {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 18px;
border-radius: 50px;
color: #86efac;
background:
rgba(34,197,94,.08);
border:
1px solid rgba(74,222,128,.2);
font-size: 13px;
}
.pulse {
width: 8px;
height: 8px;
background: #4ade80;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
70% {
box-shadow:
0 0 0 10px
rgba(74,222,128,0);
}
}
/* TITLE */
h1 {
font-size:
clamp(44px, 7vw, 86px);
font-weight: 900;
line-height: 1.08;
letter-spacing: -2px;
margin:
27px 0 20px;
}
h1 span {
background:
linear-gradient(
90deg,
#86efac,
#22c55e,
#15803d
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* LEAD */
.lead {
max-width: 760px;
margin: auto;
color: #b5c4ba;
line-height: 2;
font-size: 18px;
}
.slogan {
color: #86efac;
font-weight: 700;
margin-top: 18px;
}
.slogan b {
color: #5b7164;
margin:
0 7px;
}
/* BUTTONS */
.action-row {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 28px;
}
.btn-main,
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 9px;
text-decoration: none;
padding: 14px 24px;
border-radius: 14px;
font-weight: 700;
transition: .3s;
}
.btn-main {
color: #fff;
background:
linear-gradient(
135deg,
#22c55e,
#15803d
);
box-shadow:
0 15px 35px
rgba(34,197,94,.18);
}
.btn-main:hover {
color: #fff;
transform:
translateY(-3px);
}
.btn-ghost {
color: #fff;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.1);
}
.btn-ghost:hover {
color: #fff;
background:
rgba(255,255,255,.08);
transform:
translateY(-3px);
}
/* =========================
COUNTDOWN
========================= */
.countdown-section {
margin-top: 50px;
}
.mini-title {
color: #84968b;
font-size: 13px;
margin-bottom: 15px;
}
.countdown {
display: flex;
direction: ltr;
align-items: center;
justify-content: center;
gap: 10px;
}
.count-box {
width: 108px;
padding: 19px 10px;
border-radius: 20px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.025)
);
border:
1px solid rgba(255,255,255,.08);
backdrop-filter: blur(20px);
}
.count-box strong {
display: block;
font-size: 36px;
line-height: 1;
color: #86efac;
font-weight: 900;
}
.count-box small {
display: block;
color: #718279;
font-size: 11px;
margin-top: 9px;
}
.colon {
font-size: 28px;
color: #426050;
font-weight: 700;
}
.launch-message {
margin-top: 13px;
color: #718279;
font-size: 12px;
}
/* =========================
STATISTICS
========================= */
.stats-row {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 38px;
}
.stat-card {
min-width: 190px;
display: flex;
align-items: center;
gap: 13px;
text-align: right;
padding: 16px 20px;
border-radius: 20px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.07),
rgba(255,255,255,.025)
);
border:
1px solid rgba(255,255,255,.08);
backdrop-filter: blur(20px);
}
.stat-icon {
width: 45px;
height: 45px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #86efac;
background:
rgba(34,197,94,.1);
}
.stat-card small {
display: block;
color: #718279;
font-size: 11px;
}
.stat-card strong {
display: block;
font-size: 22px;
margin-top: 3px;
}
/* =========================
NOTIFICATION
========================= */
.notify-card {
max-width: 850px;
margin:
38px auto 0;
padding: 25px;
border-radius: 25px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.075),
rgba(255,255,255,.025)
);
border:
1px solid rgba(255,255,255,.08);
backdrop-filter: blur(25px);
text-align: right;
}
.notify-copy h3 {
font-size: 19px;
font-weight: 800;
}
.notify-copy h3 i {
color: #4ade80;
margin-left: 7px;
}
.notify-copy p {
color: #788a80;
font-size: 13px;
}
.notify-form {
display: flex;
gap: 8px;
}
.notify-form input {
height: 53px;
flex: 1;
min-width: 0;
background:
rgba(0,0,0,.2);
border:
1px solid rgba(255,255,255,.08);
border-radius: 13px;
color: #fff;
padding:
0 16px;
font-family: inherit;
}
.notify-form input::placeholder {
color: #64746c;
}
.notify-form input:focus {
outline: none;
border-color:
rgba(74,222,128,.45);
box-shadow:
0 0 0 4px
rgba(34,197,94,.08);
}
.notify-form button {
height: 53px;
border: 0;
border-radius: 13px;
padding:
0 22px;
color: #fff;
font-family: inherit;
font-weight: 700;
background:
linear-gradient(
135deg,
#22c55e,
#15803d
);
cursor: pointer;
}
#formMessage {
min-height: 20px;
margin-top: 10px;
font-size: 12px;
}
/* =========================
FEATURES
========================= */
.features {
padding:
80px 0;
}
.section-head {
margin-bottom: 40px;
}
.section-head > span {
font-size: 11px;
color: #4ade80;
letter-spacing: 2px;
}
.section-head h2 {
font-size: 36px;
font-weight: 900;
margin:
10px 0;
}
.section-head p {
color: #718279;
}
.feature {
height: 100%;
padding: 27px;
border-radius: 22px;
background:
rgba(255,255,255,.035);
border:
1px solid rgba(255,255,255,.07);
transition: .3s;
}
.feature:hover {
transform:
translateY(-7px);
border-color:
rgba(74,222,128,.2);
background:
rgba(255,255,255,.055);
}
.feature-icon {
width: 55px;
height: 55px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #86efac;
background:
rgba(34,197,94,.1);
font-size: 21px;
margin-bottom: 18px;
}
.feature h4 {
font-size: 18px;
font-weight: 800;
}
.feature p {
color: #718279;
font-size: 13px;
line-height: 1.9;
margin: 0;
}
/* =========================
FOOTER
========================= */
footer {
border-top:
1px solid rgba(255,255,255,.06);
padding:
28px 0;
color: #687a70;
font-size: 12px;
}
.footer-grid {
display: grid;
grid-template-columns:
1fr 1fr 1fr;
align-items: center;
gap: 20px;
}
.footer-grid b {
color: #fff;
}
.footer-grid p {
margin:
6px 0 0;
}
.contacts {
display: flex;
justify-content: center;
gap: 15px;
}
.contacts a {
color: #8da096;
text-decoration: none;
}
.socials {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.socials a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: #8da096;
background:
rgba(255,255,255,.04);
text-decoration: none;
}
.socials a:hover {
color: #fff;
background:
rgba(34,197,94,.13);
}
.copyright {
text-align: center;
border-top:
1px solid rgba(255,255,255,.05);
margin-top: 20px;
padding-top: 18px;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 800px) {
.topbar-inner {
padding:
12px 0;
flex-wrap: wrap;
}
.top-info {
order: 3;
width: 100%;
}
.hero {
padding-top: 55px;
}
h1 {
letter-spacing: -1px;
}
.lead {
font-size: 15px;
}
.count-box {
width: 76px;
padding:
15px 6px;
}
.count-box strong {
font-size: 27px;
}
.colon {
font-size: 20px;
}
.stat-card {
min-width: 165px;
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.socials,
.contacts {
justify-content: center;
}
}
@media (max-width: 520px) {
.brand span:last-child {
font-size: 14px;
}
.call-btn span {
display: none;
}
.datetime {
font-size: 10px;
}
.countdown {
gap: 5px;
}
.count-box {
width: 66px;
}
.count-box strong {
font-size: 23px;
}
.notify-form {
flex-direction: column;
}
.notify-form button {
width: 100%;
}
}