@font-face {
font-family: "B Titr";
src: local("B Titr"), local("B-Titr"), local("BTitr"), local("B Titr Bold");
font-weight: bold;
font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "B Titr", "B-Titr", Tahoma, sans-serif;
background: radial-gradient(circle at top, #1e3a8a 0%, #0f172a 60%, #020617 100%);
background-size: 200% 200%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #0f172a;
animation: bgMove 12s ease-in-out infinite alternate;
}
@keyframes bgMove {
from { background-position: 50% 0%; }
to { background-position: 50% 100%; }
}
.page { width: 100%; max-width: 520px; text-align: center; }
.card {
background: #fff;
border-radius: 26px;
padding: 30px 28px 26px;
box-shadow: 0 25px 70px rgba(0,0,0,.35);
animation: up .7s ease;
}
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.illustration svg { width: 100%; height: auto; border-radius: 18px; }
.float { animation: float 4s ease-in-out infinite; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.domain {
display: inline-block;
direction: ltr;
font-family: Arial, sans-serif;
font-size: 46px;
font-weight: 900;
letter-spacing: 1px;
color: #1d4ed8;
margin: 18px 0 6px;
animation: glow 2.8s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { text-shadow: 0 0 0 rgba(29,78,216,0); transform: scale(1); }
50% { text-shadow: 0 0 22px rgba(37,99,235,.35); transform: scale(1.02); }
}
h1 {
font-family: "B Titr", Tahoma, sans-serif;
font-size: 30px;
color: #111827;
margin-bottom: 10px;
line-height: 1.6;
}
.desc {
font-family: "B Titr", Tahoma, sans-serif;
font-size: 19px;
line-height: 1.9;
color: #4b5563;
margin-bottom: 22px;
}
.phone-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
font-family: "B Titr", Tahoma, sans-serif;
font-size: 21px;
padding: 16px 20px;
border-radius: 16px;
transition: transform .25s;
box-shadow: 0 10px 25px rgba(37,99,235,.4);
position: relative;
}
.phone-btn:hover { transform: scale(1.03); }
.phone-btn .icon { font-size: 24px; animation: ring 2s infinite; display: inline-block; }
@keyframes ring {
0%, 100% { transform: rotate(0); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-12deg); }
30% { transform: rotate(8deg); }
40% { transform: rotate(0); }
}
.phone-btn .number {
direction: ltr;
unicode-bidi: embed;
font-family: Arial, sans-serif;
font-size: 23px;
font-weight: bold;
letter-spacing: 1px;
background: #fff;
color: #1d4ed8;
padding: 5px 16px;
border-radius: 12px;
}
.pulse { animation: pulse 2.2s infinite; }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
70% { box-shadow: 0 0 0 16px rgba(37,99,235,0); }
100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.hint { margin-top: 14px; font-size: 17px; color: #6b7280; }
footer { margin-top: 16px; color: #94a3b8; font-size: 16px; font-family: "B Titr", Tahoma, sans-serif; }
@media (max-width: 480px) {
.domain { font-size: 36px; }
h1 { font-size: 24px; }
.phone-btn { flex-wrap: wrap; font-size: 19px; }
}