:root {
--colorMain3RGB: 56, 189, 248; /* Light blue #38BDF8 */
--colorMain4RGB: 168, 85, 247; /* Purple #A855F7 */
--purple: #6d26e8;
--purple-light: #8b5cf6;
--orange: #FF7E33;
--orange-light: #FF9D2F;
}
/* Domain Search Section Styles */
.domain-search-section {
position: relative;
padding: 80px 5% 60px;
background: #f8f9fa;
margin-top: -100px;
z-index: 15;
}
.search-container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.search-form {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.search-input {
flex: 1;
padding: 15px 20px;
border: 1px solid #e0e0e0;
border-radius: 25px;
font-size: 16px;
color: #666;
}
.search-input::placeholder {
color: #aaa;
}
.search-button {
background: linear-gradient(to right, var(--orange), var(--orange-light));
color: white;
padding: 15px 35px;
border: none;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s;
}
.search-button:hover {
transform: translateY(-2px);
}
.domains-container {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.domain-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
}
.domain-item:hover {
transform: translateY(-3px);
}
.domain-name {
color: #333;
font-weight: 500;
margin-bottom: 5px;
}
.domain-price {
color: #888;
font-size: 14px;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
font-family: 'Arial', sans-serif;
overflow-x: hidden;
}
.hero-section {
background: linear-gradient(135deg, #170537 0%, #2b0c5a 40%, #3d1b6b 70%, #452079 100%);
position: relative;
min-height: 100vh;
padding: 0 5%;
overflow: hidden;
}
.hero-section:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 50%, rgba(76, 29, 149, 0.3) 0%, rgba(30, 10, 60, 0) 70%);
pointer-events: none;
}
.cloud-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 180px;
background: url('data:image/svg+xml;utf8,') repeat-x;
background-size: 1200px 200px;
z-index: 2;
}
.star-field {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
.falling-stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
}
.falling-star {
position: absolute;
top: -100px;
animation: fall linear infinite;
}
.star-body {
width: 4px;
height: 4px;
background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%);
border-radius: 50%;
position: relative;
box-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff, 0 0 24px rgba(255, 255, 255, 0.8);
}
.star-tail {
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 60px;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.8) 15%,
rgba(255, 255, 255, 0.6) 30%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.2) 70%,
rgba(255, 255, 255, 0.1) 85%,
rgba(255, 255, 255, 0) 100%);
transform: translate(-50%, -50%) rotate(135deg);
transform-origin: center;
border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
}
@keyframes fall {
0% {
transform: translateY(-100px) translateX(0px) rotate(0deg);
opacity: 0;
}
5% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
transform: translateY(calc(100vh + 100px)) translateX(300px) rotate(360deg);
opacity: 0;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.falling-star:nth-child(1) {
left: 5%;
animation-duration: 4s;
animation-delay: 0s;
}
.falling-star:nth-child(2) {
left: 25%;
animation-duration: 6s;
animation-delay: 1.5s;
}
.falling-star:nth-child(2) .star-body {
width: 3px;
height: 3px;
}
.falling-star:nth-child(2) .star-tail {
height: 45px;
width: 2px;
}
.falling-star:nth-child(3) {
left: 45%;
animation-duration: 5s;
animation-delay: 3s;
}
.falling-star:nth-child(3) .star-body {
width: 5px;
height: 5px;
}
.falling-star:nth-child(3) .star-tail {
height: 75px;
width: 4px;
}
.falling-star:nth-child(4) {
left: 65%;
animation-duration: 7s;
animation-delay: 2s;
}
.falling-star:nth-child(4) .star-body {
width: 3.5px;
height: 3.5px;
}
.falling-star:nth-child(4) .star-tail {
height: 55px;
width: 2.5px;
}
.falling-star:nth-child(5) {
left: 85%;
animation-duration: 5.5s;
animation-delay: 4s;
}
.falling-star:nth-child(5) .star-body {
width: 4.5px;
height: 4.5px;
}
.falling-star:nth-child(5) .star-tail {
height: 65px;
width: 3.5px;
}
.falling-star:nth-child(6) {
left: 15%;
animation-duration: 6.5s;
animation-delay: 5.5s;
}
.falling-star:nth-child(7) {
left: 75%;
animation-duration: 4.5s;
animation-delay: 6s;
}
.falling-star:nth-child(8) {
left: 35%;
animation-duration: 8s;
animation-delay: 7s;
}
.stars {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(1px 1px at 50px 60px, white, rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 120px 100px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
radial-gradient(2px 2px at 300px 50px, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 400px 150px, white, rgba(0, 0, 0, 0)),
radial-gradient(1.5px 1.5px at 180px 280px, white, rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 250px 320px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
radial-gradient(2px 2px at 520px 200px, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 600px 380px, white, rgba(0, 0, 0, 0)),
radial-gradient(1.5px 1.5px at 700px 80px, white, rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 800px 250px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
radial-gradient(2px 2px at 950px 150px, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 1050px 280px, white, rgba(0, 0, 0, 0)),
radial-gradient(1.5px 1.5px at 900px 350px, white, rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 1100px 100px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
radial-gradient(2px 2px at 1200px 250px, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0));
background-repeat: repeat;
background-size: 1200px 600px;
}
.stars-2 {
background-position: 50px 80px;
opacity: 0.6;
animation: twinkling 4s infinite alternate;
}
.big-star {
position: absolute;
background: radial-gradient(white 0%, rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
}
.big-star-1 {
width: 4px;
height: 4px;
top: 15%;
left: 20%;
animation: pulse 3s infinite alternate;
}
.big-star-2 {
width: 6px;
height: 6px;
top: 30%;
right: 25%;
animation: pulse 5s infinite alternate;
}
.big-star-3 {
width: 5px;
height: 5px;
bottom: 40%;
left: 30%;
animation: pulse 4s 1s infinite alternate;
}
.big-star-4 {
width: 4px;
height: 4px;
bottom: 25%;
right: 35%;
animation: pulse 6s 2s infinite alternate;
}
.space-elements svg {
position: absolute;
}
.planet-1 {
top: 15%;
right: 10%;
animation: float 20s infinite ease-in-out, rotate 60s infinite linear;
filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.3));
}
.planet-2 {
bottom: 20%;
left: 15%;
animation: float 25s infinite ease-in-out reverse, rotate 45s infinite linear reverse;
filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.3));
}
.asteroid-1 {
top: 35%;
left: 20%;
animation: spin 30s infinite linear;
}
.asteroid-2 {
bottom: 40%;
right: 25%;
animation: spin 20s infinite linear reverse;
}
.stars-1 {
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: twinkle 4s infinite alternate;
}
.meteor-1 {
top: 30%;
right: -100px;
animation: meteor 15s infinite linear;
}
.meteor-2 {
top: 60%;
right: -150px;
animation: meteor 20s 5s infinite linear;
}
.rings {
top: 60%;
left: 15%;
animation: pulse 10s infinite alternate;
}
.saturn {
top: 20%;
left: 70%;
animation: float 30s infinite ease-in-out;
}
.particles {
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: drift 40s infinite linear;
}
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 5%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
background: transparent;
}
body header.main-header.js-fixed {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
background: transparent !important;
backdrop-filter: none !important;
padding: 20px 5% !important;
z-index: 9999 !important;
transition: all 0.3s ease !important;
box-shadow: none !important;
}
body header.main-header.js-fixed.scrolled {
background: linear-gradient(135deg, #2a0a62 0%, #3d1b6b 50%, #452079 100%) !important;
backdrop-filter: blur(30px) !important;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
padding: 10px 5% !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.main-header.fixed::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(26, 5, 64, 0.95);
z-index: -1;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Стили для страницы о компании */
.about-company-section {
padding: 60px 0;
background-color: #fafafa;
position: relative;
overflow: hidden;
}
.about-company-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0) 70%);
border-radius: 50%;
z-index: 1;
}
.about-company-section::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 126, 51, 0.1) 0%, rgba(255, 126, 51, 0) 70%);
border-radius: 50%;
z-index: 1;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
/* Стили для шапки с навигацией */
.header-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
margin-bottom: 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.company-domain {
font-size: 18px;
font-weight: 700;
color: var(--purple);
transition: color 0.3s ease;
}
.company-domain:hover {
color: var(--orange);
}
.main-nav ul {
display: flex;
list-style: none;
gap: 20px;
}
.main-nav a {
color: #333;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
padding: 5px 0;
}
.main-nav a:hover {
color: var(--purple);
}
.main-nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--purple);
transition: width 0.3s ease;
}
.main-nav a:hover::after {
width: 100%;
}
.user-actions {
display: flex;
gap: 15px;
}
.login-btn, .support-btn {
padding: 8px 15px;
border-radius: 20px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.login-btn {
background-color: transparent;
color: var(--purple);
border: 1px solid var(--purple);
}
.login-btn:hover {
background-color: var(--purple);
color: white;
}
.support-btn {
background-color: var(--purple);
color: white;
border: 1px solid var(--purple);
}
.support-btn:hover {
background-color: var(--orange);
border-color: var(--orange);
transform: translateY(-2px);
}
/* Стили для контента о компании */
.about-content {
padding: 30px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border-left: 4px solid var(--purple);
}
.about-content:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--orange);
}
.about-content h2 {
font-size: 32px;
font-weight: 700;
color: #333;
margin-bottom: 25px;
position: relative;
display: inline-block;
}
.about-content h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: var(--purple);
border-radius: 3px;
transition: background 0.3s ease;
}
.about-content:hover h2::after {
background: var(--orange);
}
.about-content h3 {
font-size: 24px;
font-weight: 600;
color: var(--purple);
margin: 30px 0 20px;
transition: color 0.3s ease;
}
.about-content:hover h3 {
color: var(--orange);
}
.about-content p {
font-size: 16px;
line-height: 1.6;
color: #555;
margin-bottom: 15px;
position: relative;
padding-left: 20px;
}
.about-content p:before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--purple);
transition: background-color 0.3s ease;
}
.about-content:hover p:before {
background-color: var(--orange);
}
/* Адаптивные стили для страницы о компании */
@media (max-width: 992px) {
.about-content {
padding: 25px;
}
.about-content h2 {
display: block;
text-align: center;
}
.about-content h2::after {
left: 50%;
transform: translateX(-50%);
}
.about-content h3 {
text-align: center;
}
}
@media (max-width: 768px) {
.about-content {
padding: 20px;
}
.about-content h2 {
font-size: 28px;
}
.about-content h3 {
font-size: 22px;
}
.about-content p {
padding-left: 15px;
}
}
@media (max-width: 576px) {
.about-content {
padding: 15px;
}
.about-content h2 {
font-size: 24px;
margin-bottom: 20px;
}
.about-content h3 {
font-size: 20px;
margin: 25px 0 15px;
}
.about-content p {
font-size: 15px;
padding-left: 12px;
}
.about-content p:before {
top: 8px;
width: 5px;
height: 5px;
}
}
/* Стили для страницы контактов */
.contact-section {
padding: 60px 0;
background-color: #fafafa;
}
.contact-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.contact-header {
text-align: center;
margin-bottom: 50px;
}
.contact-title {
font-size: 36px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.contact-title:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--purple);
border-radius: 3px;
}
.contact-subtitle {
font-size: 18px;
color: #666;
max-width: 700px;
margin: 0 auto;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.contact-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
padding: 30px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border-top: 4px solid var(--purple);
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-top: 4px solid var(--orange);
}
.contact-card-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.contact-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--purple);
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
box-shadow: 0 4px 10px rgba(109, 38, 232, 0.2);
transition: all 0.3s ease;
}
.contact-card:hover .contact-icon {
background: var(--orange);
box-shadow: 0 4px 10px rgba(255, 126, 51, 0.2);
}
.contact-icon svg {
width: 24px;
height: 24px;
fill: white;
}
.contact-card-title {
font-size: 20px;
font-weight: 600;
color: var(--purple);
transition: all 0.3s ease;
}
.contact-card:hover .contact-card-title {
color: var(--orange);
}
.contact-card-subtitle {
font-size: 14px;
color: #666;
margin-top: 5px;
}
.contact-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-info-item {
display: flex;
margin-bottom: 15px;
align-items: flex-start;
}
.contact-info-item:last-child {
margin-bottom: 0;
}
.contact-info-label {
font-weight: 600;
color: #333;
min-width: 120px;
position: relative;
padding-left: 20px;
}
.contact-info-label:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: var(--purple);
border-radius: 50%;
transition: all 0.3s ease;
}
.contact-card:hover .contact-info-label:before {
background: var(--orange);
}
.contact-info-value {
color: #666;
flex: 1;
}
.contact-info-value a {
color: var(--purple);
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.contact-card:hover .contact-info-value a {
color: var(--orange);
}
.contact-info-value a:hover {
text-decoration: underline;
}
/* Стили для иллюстрации на странице контактов */
.contact-illustration {
max-width: 100%;
height: auto;
filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
transform: translateY(-50px); /* Поднимаем иллюстрацию выше */
}
.map-container {
width: 100%;
height: 450px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
border: 4px solid white;
position: relative;
transition: all 0.3s ease;
}
.map-container:before {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
background: var(--purple);
z-index: -1;
border-radius: 14px;
transition: all 0.3s ease;
}
.map-container:hover:before {
background: var(--orange);
}
.map-container iframe {
width: 100%;
height: 100%;
border: none;
}
/* Заголовок карты */
h2.contact-title {
margin-top: 40px;
}
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
}
.contact-card {
padding: 20px;
}
.map-container {
height: 350px;
}
.contact-info-item {
flex-direction: column;
}
.contact-info-label {
margin-bottom: 5px;
}
}
.logo {
display: flex;
align-items: center;
color: white;
text-decoration: none;
transition: transform 0.3s ease;
}
.main-header.fixed .logo svg {
width: 35px;
height: 35px;
}
.main-header.fixed .logo h2 {
font-size: 20px;
}
.logo img {
width: 40px;
margin-right: 10px;
}
.logo h2 {
font-size: 24px;
margin: 0;
font-weight: 600;
transition: font-size 0.3s ease;
}
nav {
display: flex;
align-items: center;
}
.main-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.main-menu li {
margin: 0 15px;
}
.main-menu a {
color: white;
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: color 0.3s;
position: relative;
}
.main-menu a.active {
color: var(--orange-light);
}
.main-menu a.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: var(--orange-light);
border-radius: 1px;
}
.main-menu a:hover {
color: var(--orange-light);
}
.auth-buttons {
display: flex;
align-items: center;
gap: 15px;
}
.login-btn {
color: white;
text-decoration: none;
font-weight: 500;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 8px 20px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.login-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.get-started-btn {
background: linear-gradient(135deg, var(--purple), var(--purple-light));
color: white;
text-decoration: none;
padding: 10px 25px;
border-radius: 30px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(109, 38, 232, 0.3);
}
.get-started-btn:hover {
background: linear-gradient(135deg, #7d36f8, #9f7aea);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(109, 38, 232, 0.4);
}
.main-header.fixed .get-started-btn {
padding: 8px 20px;
font-size: 14px;
}
.main-header.fixed .login-btn {
padding: 6px 16px;
font-size: 14px;
}
.main-header.fixed .logo,
.main-header.fixed .main-menu a,
.main-header.fixed .auth-buttons button {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
body header.main-header.js-fixed .logo h2 {
font-size: 22px !important;
}
/* Стили для блока ограничений */
.limitations-section {
padding: 60px 0;
background-color: #f8f9fa;
}
.limitations-section .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.limitations-block {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 40px;
}
.limitations-title {
font-size: 28px;
font-weight: 700;
color: #333;
margin-bottom: 30px;
text-align: center;
}
.limitations-list {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 15px;
}
.limitations-list li {
position: relative;
padding-left: 30px;
margin-bottom: 15px;
font-size: 16px;
color: #555;
line-height: 1.6;
}
.limitations-list li:before {
content: "⚠️";
position: absolute;
left: 0;
top: 0;
}
.pro-link-container {
text-align: center;
margin-top: 40px;
}
.pro-link {
display: inline-block;
background-color: #FF7E33;
color: white;
padding: 12px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.pro-link:hover {
background-color: #e06a1e;
}
@media (max-width: 768px) {
.limitations-list {
grid-template-columns: 1fr;
}
.limitations-block {
padding: 25px;
}
}
body header.main-header.js-fixed.scrolled .logo h2 {
font-size: 20px !important;
}
body header.main-header.js-fixed .main-menu a {
font-size: 16px !important;
transition: all 0.3s ease !important;
}
body header.main-header.js-fixed.scrolled .main-menu a {
font-size: 15px !important;
}
body header.main-header.js-fixed .get-started-btn,
body header.main-header.js-fixed .login-btn {
padding: 12px 24px !important;
font-size: 16px !important;
transition: all 0.3s ease !important;
}
body header.main-header.js-fixed.scrolled .get-started-btn,
body header.main-header.js-fixed.scrolled .login-btn {
padding: 10px 20px !important;
font-size: 14px !important;
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: space-around;
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
z-index: 1002;
border-radius: 6px;
transition: all 0.3s ease;
}
.mobile-menu-toggle:hover {
background: rgba(255, 255, 255, 0.1);
}
.mobile-menu-toggle span {
width: 24px;
height: 3px;
background: white;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: center;
}
.mobile-menu-toggle.active {
opacity: 0;
visibility: hidden;
transform: scale(0.8);
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-menu {
position: absolute;
top: 0;
right: 0;
width: 320px;
height: 100vh;
background: linear-gradient(135deg, #2a0a62 0%, #3d1b6b 50%, #452079 100%);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
flex-direction: column;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
}
.mobile-menu-overlay.active .mobile-menu {
transform: translateX(0);
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
}
.mobile-logo {
display: flex;
align-items: center;
gap: 10px;
}
.mobile-logo h3 {
color: white;
margin: 0;
font-size: 18px;
font-weight: 600;
}
.mobile-menu-close {
background: transparent;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-menu-close:hover {
background: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
}
.mobile-menu-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 30px 0;
}
.mobile-nav {
flex: 1;
}
.mobile-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu-item {
margin: 0;
opacity: 0;
transform: translateX(50px);
animation: slideInFromRight 0.6s ease forwards;
}
.mobile-menu-item:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu-item:nth-child(2) { animation-delay: 0.2s; }
.mobile-menu-item:nth-child(3) { animation-delay: 0.3s; }
.mobile-menu-item:nth-child(4) { animation-delay: 0.4s; }
@keyframes slideInFromRight {
to {
opacity: 1;
transform: translateX(0);
}
}
.mobile-menu-link {
display: flex;
align-items: center;
gap: 15px;
padding: 18px 25px;
color: white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
transition: all 0.3s ease;
border-left: 3px solid transparent;
position: relative;
overflow: hidden;
}
.mobile-menu-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 157, 47, 0.1), transparent);
transition: left 0.5s ease;
}
.mobile-menu-link:hover::before {
left: 100%;
}
.mobile-menu-link:hover,
.mobile-menu-link.active {
background: rgba(255, 157, 47, 0.1);
border-left-color: #ff9d2f;
transform: translateX(5px);
}
.mobile-menu-link.active {
color: #ff9d2f;
}
.menu-icon {
font-size: 20px;
width: 24px;
text-align: center;
}
.menu-text {
flex: 1;
}
.menu-arrow {
font-size: 16px;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.mobile-menu-link:hover .menu-arrow,
.mobile-menu-link.active .menu-arrow {
opacity: 1;
transform: translateX(0);
}
.mobile-menu-footer {
padding: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.2);
}
.mobile-auth-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 25px;
}
.mobile-login-btn,
.mobile-get-started-btn {
width: 100%;
padding: 14px 20px;
border-radius: 12px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mobile-login-btn {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.mobile-login-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.6);
transform: translateY(-2px);
}
.mobile-get-started-btn {
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
color: white;
box-shadow: 0 4px 15px rgba(109, 38, 232, 0.3);
}
.mobile-get-started-btn:hover {
background: linear-gradient(135deg, #7d36f8, #9f7aea);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(109, 38, 232, 0.4);
}
.mobile-menu-info {
text-align: center;
}
.mobile-menu-info p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
margin: 0 0 8px 0;
}
.support-link {
color: #ff9d2f;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.3s ease;
}
.support-link:hover {
color: #ffb84d;
}
.mobile-menu-overlay.active .mobile-menu-header {
animation: slideInFromTop 0.5s ease forwards;
}
.mobile-menu-overlay.active .mobile-menu-footer {
animation: slideInFromBottom 0.5s ease forwards;
animation-delay: 0.3s;
opacity: 0;
animation-fill-mode: forwards;
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mobile-login-btn:active,
.mobile-get-started-btn:active {
transform: translateY(0) scale(0.98);
}
.mobile-menu-link.active::after {
content: '';
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #ff9d2f;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 157, 47, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 157, 47, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 157, 47, 0);
}
}
@media (max-width: 320px) {
.mobile-menu {
width: 100%;
}
.mobile-menu-header {
padding: 12px 15px;
}
.mobile-logo h3 {
font-size: 14px;
}
.mobile-menu-link {
font-size: 14px;
padding: 12px 15px;
}
}
@media (max-width: 768px) {
.main-menu,
.auth-buttons {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
.main-header {
padding: 15px 5%;
}
.main-header.fixed {
padding: 12px 5% !important;
background: linear-gradient(135deg, #1a0540 0%, #2a0a62 50%, #3d1b6b 100%) !important;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8) !important;
border-bottom: 3px solid #ff9d2f !important;
}
.logo h2 {
font-size: 20px;
}
.main-header.fixed .logo h2 {
font-size: 18px;
}
.logo svg {
width: 35px;
height: 35px;
}
.main-header.fixed .logo svg {
width: 30px;
height: 30px;
}
}
@media (max-width: 480px) {
.mobile-menu {
width: 100%;
}
.mobile-menu-link {
font-size: 16px;
padding: 16px 20px;
}
.menu-icon {
font-size: 18px;
}
.mobile-login-btn,
.mobile-get-started-btn {
font-size: 14px;
padding: 12px 16px;
}
.logo h2 {
font-size: 18px;
}
.main-header.fixed .logo h2 {
font-size: 16px;
}
.main-header.fixed {
background: linear-gradient(135deg, #1a0540 0%, #2a0a62 50%, #3d1b6b 100%) !important;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8) !important;
border-bottom: 3px solid #ff9d2f !important;
}
.mobile-menu-header {
padding: 15px 20px;
}
.mobile-menu-footer {
padding: 20px;
}
}
@media (max-width: 360px) {
.mobile-menu-link {
font-size: 15px;
padding: 14px 15px;
}
.mobile-logo h3 {
font-size: 16px;
}
.logo h2 {
font-size: 16px;
}
.main-header.fixed .logo h2 {
font-size: 14px;
}
.main-header.fixed {
background: linear-gradient(135deg, #1a0540 0%, #2a0a62 50%, #3d1b6b 100%) !important;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8) !important;
border-bottom: 3px solid #ff9d2f !important;
}
}
/* Секция с отзывами */
.testimonials-section {
width: 100%;
padding: 80px 20px 100px;
background: linear-gradient(135deg, #f8f9ff 0%, #f1f5ff 100%);
position: relative;
overflow: hidden;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') repeat;
pointer-events: none;
}
.testimonials-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.testimonials-header {
text-align: center;
margin-bottom: 60px;
}
.testimonials-title {
font-size: 36px;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.testimonials-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #6d26e8 0%, #8b5cf6 100%);
border-radius: 2px;
}
.testimonials-subtitle {
font-size: 18px;
color: #64748b;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.testimonials-grid {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.testimonial-card {
width: 350px;
background: #ffffff;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.testimonial-card::before {
content: '"';
position: absolute;
top: 20px;
left: 20px;
font-size: 120px;
line-height: 1;
font-family: Georgia, serif;
color: rgba(109, 38, 232, 0.1);
pointer-events: none;
}
.testimonial-content {
position: relative;
z-index: 1;
}
.testimonial-text {
font-size: 16px;
line-height: 1.7;
color: #475569;
margin-bottom: 25px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
border: 2px solid #8b5cf6;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info {
flex: 1;
}
.author-name {
font-size: 18px;
font-weight: 600;
color: #1e293b;
margin-bottom: 5px;
}
.author-role {
font-size: 14px;
color: #64748b;
}
.testimonial-rating {
display: flex;
margin-bottom: 15px;
}
.star {
color: #f59e0b;
font-size: 18px;
margin-right: 2px;
}
/* Адаптивность для секции отзывов */
@media (max-width: 1200px) {
.testimonials-grid {
gap: 20px;
}
.testimonial-card {
width: 320px;
}
}
@media (max-width: 992px) {
.testimonial-card {
width: 280px;
padding: 25px;
}
.testimonials-title {
font-size: 32px;
}
}
@media (max-width: 768px) {
.testimonials-section {
padding: 60px 20px 80px;
}
.testimonials-grid {
flex-direction: column;
align-items: center;
}
.testimonial-card {
width: 100%;
max-width: 450px;
margin-bottom: 20px;
}
.testimonials-title {
font-size: 28px;
}
.testimonials-subtitle {
font-size: 16px;
}
}
@media (max-width: 480px) {
.testimonials-section {
padding: 50px 15px 70px;
}
.testimonial-card {
padding: 20px;
}
.testimonial-text {
font-size: 15px;
}
.author-name {
font-size: 16px;
}
.author-avatar {
width: 40px;
height: 40px;
}
}
/* CTA Section Styles */
.cta-section {
background: linear-gradient(180deg, #0f0524 0%, #1a0540 50%, #2a0a62 100%);
padding: 100px 20px;
position: relative;
overflow: hidden;
}
/* Звездный фон */
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 40px 60px, #ffffff 100%, transparent),
radial-gradient(2px 2px at 20px 50px, #ffffff 100%, transparent),
radial-gradient(2px 2px at 30px 100px, #ffffff 100%, transparent),
radial-gradient(2px 2px at 40px 60px, #ffffff 100%, transparent),
radial-gradient(2px 2px at 110px 90px, #ffffff 100%, transparent),
radial-gradient(2px 2px at 190px 150px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 250px 230px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 270px 130px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 310px 180px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 350px 220px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 400px 120px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 430px 90px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 460px 160px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 500px 220px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 540px 80px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 580px 150px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 620px 220px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 660px 120px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 700px 180px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 740px 220px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 780px 120px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 820px 170px, #ffffff 100%, transparent);
background-size: 1000px 1000px;
opacity: 0.8;
pointer-events: none;
animation: twinkling 100s linear infinite;
}
/* Туманность/Галактика */
.cta-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at 20% 30%, rgba(111, 39, 232, 0.3) 0%, rgba(111, 39, 232, 0) 50%),
radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0) 60%),
radial-gradient(ellipse at 50% 50%, rgba(255, 157, 47, 0.1) 0%, rgba(255, 157, 47, 0) 70%);
pointer-events: none;
opacity: 0.7;
}
@keyframes twinkling {
from {
background-position: 0 0;
}
to {
background-position: 1000px 1000px;
}
}
.cta-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.cta-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
color: #ffffff;
}
.cta-content h2 {
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cta-content p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0.9;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.cta-btn {
display: inline-block;
padding: 16px 32px;
border-radius: 50px;
font-size: 18px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.cta-btn.primary {
background: linear-gradient(to right, #f7931e, #ff9d2f);
color: #ffffff;
border: none;
}
.cta-btn.primary:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}
.cta-btn.secondary {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(5px);
}
.cta-btn.secondary:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}
/* Космические объекты в CTA */
.space-object {
position: absolute;
z-index: 1;
pointer-events: none;
}
/* Планета */
.space-object.planet {
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
#6d26e8 0%,
#4c1d95 40%,
#3b0764 80%,
#2e0452 100%);
box-shadow:
0 0 20px rgba(111, 39, 232, 0.4),
0 0 40px rgba(111, 39, 232, 0.2);
top: 15%;
right: 10%;
animation: orbit 30s infinite linear;
position: absolute;
overflow: hidden;
}
.space-object.planet::before {
content: '';
position: absolute;
width: 140%;
height: 20px;
background: rgba(255, 255, 255, 0.1);
top: 50%;
left: -20%;
transform: rotate(-20deg);
border-radius: 50%;
box-shadow:
0 -10px 0 rgba(255, 255, 255, 0.05),
0 10px 0 rgba(255, 255, 255, 0.05);
}
.space-object.planet::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
top: 20%;
left: 20%;
box-shadow:
15px 15px 0 rgba(255, 255, 255, 0.05),
-15px 15px 0 rgba(255, 255, 255, 0.05),
30px -10px 0 rgba(255, 255, 255, 0.08);
}
/* Комета */
.space-object.comet {
width: 4px;
height: 4px;
background: #ffffff;
border-radius: 50%;
top: 30%;
left: 20%;
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
animation: comet-move 15s infinite linear;
opacity: 0;
}
.space-object.comet::after {
content: '';
position: absolute;
width: 100px;
height: 3px;
background: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
transform: translateX(-100%);
border-radius: 50%;
}
/* Спутник */
.space-object.satellite {
width: 40px;
height: 20px;
background: linear-gradient(to bottom, #8b5cf6, #6d26e8);
border-radius: 5px;
top: 60%;
left: 15%;
box-shadow: 0 0 10px rgba(111, 39, 232, 0.5);
animation: satellite-move 20s infinite linear;
position: relative;
}
.space-object.satellite::before {
content: '';
position: absolute;
width: 60px;
height: 10px;
background: linear-gradient(to right, rgba(255, 157, 47, 0.7), rgba(255, 157, 47, 0.3));
transform: rotate(30deg);
top: -5px;
left: -10px;
border-radius: 5px;
}
.space-object.satellite::after {
content: '';
position: absolute;
width: 5px;
height: 5px;
background: #ff9d2f;
border-radius: 50%;
top: 5px;
right: 5px;
box-shadow: 0 0 5px #ff9d2f;
animation: blink 2s infinite;
}
/* Анимации для космических объектов */
@keyframes orbit {
0% {
transform: rotate(0deg) translateX(20px) rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) translateX(20px) rotate(-180deg) scale(0.95);
}
100% {
transform: rotate(360deg) translateX(20px) rotate(-360deg) scale(1);
}
}
@keyframes comet-move {
0% {
transform: translateX(-100px) translateY(0) rotate(-30deg);
opacity: 0;
}
10% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
transform: translateX(calc(100vw + 100px)) translateY(100px) rotate(-30deg);
opacity: 0;
}
100% {
transform: translateX(calc(100vw + 100px)) translateY(100px) rotate(-30deg);
opacity: 0;
}
}
@keyframes satellite-move {
0% {
transform: translateX(0) translateY(0) rotate(0deg);
}
25% {
transform: translateX(calc(50vw - 100px)) translateY(-50px) rotate(10deg);
}
50% {
transform: translateX(calc(80vw - 200px)) translateY(30px) rotate(-5deg);
}
75% {
transform: translateX(calc(30vw - 50px)) translateY(80px) rotate(15deg);
}
100% {
transform: translateX(0) translateY(0) rotate(0deg);
}
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
/* Responsive styles for CTA section */
@media (max-width: 992px) {
.cta-section {
padding: 70px 20px;
}
.cta-content h2 {
font-size: 36px;
}
.cta-content p {
font-size: 17px;
}
}
@media (max-width: 768px) {
.cta-section {
padding: 60px 20px;
}
.cta-content h2 {
font-size: 32px;
}
.cta-content p {
font-size: 16px;
margin-bottom: 30px;
}
.cta-btn {
padding: 14px 28px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.cta-section {
padding: 50px 15px;
}
.cta-content h2 {
font-size: 28px;
}
.cta-content p {
font-size: 15px;
margin-bottom: 25px;
}
.cta-buttons {
flex-direction: column;
gap: 15px;
}
.cta-btn {
width: 100%;
padding: 14px 20px;
font-size: 16px;
}
}
.orange-btn {
background: linear-gradient(to right, #f7931e, #ff9d2f);
color: white;
text-decoration: none;
padding: 15px 40px;
border-radius: 30px;
font-weight: 600;
border: none;
cursor: pointer;
transition: transform 0.3s;
display: inline-block;
margin-top: 15px;
}
.orange-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(247, 147, 30, 0.4);
}
.hero-content {
max-width: 600px;
position: relative;
z-index: 10;
margin-top: 80px;
color: white;
}
.hero-content h1 {
font-size: 48px;
margin-bottom: 20px;
color: #ff9d2f;
line-height: 1.2;
}
.hero-content p {
font-size: 24px;
margin-bottom: 30px;
line-height: 1.5;
}
.price {
font-size: 20px;
margin-bottom: 30px;
}
.price span {
font-size: 28px;
font-weight: bold;
color: #ff9d2f;
}
/* Секция "Наши услуги" с космической тематикой */
.services-section {
position: relative;
padding: 100px 5% 80px;
background: linear-gradient(135deg, #f8f9ff 0%, #f1f5ff 100%);
margin-top: 0;
z-index: 15;
overflow: hidden;
}
.services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(1px 1px at 50px 50px, rgba(109, 38, 232, 0.15) 100%, transparent),
radial-gradient(1px 1px at 100px 100px, rgba(109, 38, 232, 0.1) 100%, transparent),
radial-gradient(1px 1px at 150px 150px, rgba(109, 38, 232, 0.15) 100%, transparent),
radial-gradient(1px 1px at 200px 200px, rgba(109, 38, 232, 0.1) 100%, transparent),
radial-gradient(1px 1px at 250px 250px, rgba(109, 38, 232, 0.15) 100%, transparent);
background-size: 250px 250px;
opacity: 0.5;
pointer-events: none;
z-index: -1;
}
.services-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.services-header {
text-align: center;
margin-bottom: 70px;
}
.services-title {
font-size: 36px;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.services-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #6d26e8 0%, #8b5cf6 100%);
border-radius: 2px;
}
.services-subtitle {
font-size: 18px;
color: #64748b;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.services-list {
display: flex;
flex-direction: column;
gap: 80px;
}
.service-item {
display: flex;
align-items: center;
gap: 50px;
position: relative;
}
.service-item.reverse {
flex-direction: row-reverse;
}
.service-content {
flex: 1;
padding: 30px;
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
position: relative;
z-index: 2;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-content:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.service-title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
background: linear-gradient(90deg, #6d26e8, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.service-description {
font-size: 16px;
color: #475569;
line-height: 1.6;
margin-bottom: 20px;
}
.service-features {
list-style: none;
padding: 0;
margin-bottom: 25px;
}
.service-features li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #334155;
}
.service-features li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
.service-link {
display: inline-block;
padding: 12px 25px;
background: linear-gradient(to right, #6d26e8, #8b5cf6);
color: #ffffff;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(109, 38, 232, 0.2);
}
.service-link:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(109, 38, 232, 0.3);
}
.service-image {
flex: 1;
position: relative;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.service-img {
max-width: 100%;
height: auto;
position: relative;
z-index: 2;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
transition: transform 0.5s ease;
}
.service-image:hover .service-img {
transform: translateY(-10px) scale(1.05);
}
/* Космические элементы */
.cosmic-element {
position: absolute;
pointer-events: none;
z-index: 1;
}
.planet-small {
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #8b5cf6 0%, #6d26e8 70%);
box-shadow: 0 0 20px rgba(109, 38, 232, 0.3);
top: 20%;
right: 10%;
animation: float 8s infinite ease-in-out;
}
.star-cluster {
width: 100px;
height: 100px;
background-image:
radial-gradient(2px 2px at 10px 10px, #ffffff 100%, transparent),
radial-gradient(2px 2px at 20px 20px, #ffffff 100%, transparent),
radial-gradient(2px 2px at 30px 30px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 40px 40px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 50px 50px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 60px 60px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 70px 70px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 80px 80px, #ffffff 100%, transparent),
radial-gradient(1px 1px at 90px 90px, #ffffff 100%, transparent);
background-size: 100px 100px;
bottom: 10%;
left: 15%;
opacity: 0.7;
}
.comet-trail {
width: 120px;
height: 3px;
background: linear-gradient(to left, rgba(139, 92, 246, 0.8), rgba(139, 92, 246, 0));
top: 30%;
right: 20%;
transform: rotate(-30deg);
animation: pulse 3s infinite alternate;
}
.comet-trail::before {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 0 10px #ffffff;
}
.nebula {
width: 150px;
height: 150px;
background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0) 70%);
bottom: 20%;
left: 10%;
border-radius: 50%;
animation: pulse 5s infinite alternate;
}
.space-station {
width: 80px;
height: 30px;
background: linear-gradient(to bottom, #6d26e8, #4c1d95);
border-radius: 5px;
top: 15%;
left: 20%;
box-shadow: 0 0 15px rgba(109, 38, 232, 0.3);
position: relative;
}
.space-station::before {
content: '';
position: absolute;
width: 120px;
height: 10px;
background: linear-gradient(to right, rgba(255, 157, 47, 0.7), rgba(255, 157, 47, 0.3));
transform: rotate(30deg);
top: -5px;
left: -20px;
border-radius: 5px;
}
.meteor {
width: 50px;
height: 2px;
background: linear-gradient(to left, rgba(255, 157, 47, 0.8), rgba(255, 157, 47, 0));
bottom: 40%;
right: 15%;
transform: rotate(-45deg);
animation: meteor 10s infinite;
opacity: 0;
}
.galaxy {
width: 180px;
height: 180px;
background:
radial-gradient(ellipse at center, rgba(109, 38, 232, 0.2) 0%, rgba(109, 38, 232, 0) 70%),
radial-gradient(ellipse at center, rgba(255, 157, 47, 0.1) 30%, rgba(255, 157, 47, 0) 70%);
border-radius: 50%;
top: 10%;
left: 10%;
animation: rotate 30s infinite linear;
}
.satellite {
width: 30px;
height: 15px;
background: #6d26e8;
border-radius: 3px;
bottom: 30%;
right: 25%;
box-shadow: 0 0 10px rgba(109, 38, 232, 0.3);
animation: orbit 15s infinite linear;
}
.satellite::after {
content: '';
position: absolute;
width: 40px;
height: 5px;
background: rgba(255, 157, 47, 0.5);
transform: rotate(30deg);
top: -2px;
left: -5px;
border-radius: 3px;
}
/* Анимации для космических элементов */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
@keyframes meteor {
0% {
transform: translateX(0) translateY(0) rotate(-45deg);
opacity: 0;
}
10% {
opacity: 1;
}
20% {
transform: translateX(-100px) translateY(100px) rotate(-45deg);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes orbit {
0% {
transform: rotate(0deg) translateX(50px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(50px) rotate(-360deg);
}
}
/* Адаптивность для секции услуг */
@media (max-width: 992px) {
.services-section {
padding: 80px 5% 60px;
}
.services-title {
font-size: 32px;
}
.services-list {
gap: 60px;
}
.service-item {
gap: 30px;
}
}
@media (max-width: 768px) {
.services-section {
padding: 60px 5% 40px;
}
.services-title {
font-size: 28px;
}
.services-subtitle {
font-size: 16px;
}
.service-item, .service-item.reverse {
flex-direction: column;
gap: 40px;
}
.service-content {
width: 100%;
}
.service-image {
width: 100%;
order: -1;
}
.service-item.reverse .service-image {
order: -1;
}
}
@media (max-width: 480px) {
.services-section {
padding: 50px 5% 30px;
}
.services-list {
gap: 50px;
}
.service-content {
padding: 20px;
}
.service-title {
font-size: 22px;
}
.service-description {
font-size: 15px;
}
.service-link {
width: 100%;
text-align: center;
}
}
.rocket {
position: absolute;
right: 15%;
top: 50%;
transform: translateY(-50%);
width: 240px;
z-index: 5;
}
.slider-nav {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: flex;
z-index: 10;
}
.slider-dot {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.slider-dot.active {
background: rgba(255, 255, 255, 0.4);
}
.slider-dot:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
@keyframes twinkling {
0% {
opacity: 0.3;
}
100% {
opacity: 0.8;
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.7;
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes twinkle {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
@keyframes meteor {
from {
transform: translateX(0) translateY(0);
opacity: 1;
}
to {
transform: translateX(-500px) translateY(200px);
opacity: 0;
}
}
@keyframes drift {
from {
transform: translateX(0) translateY(0);
}
to {
transform: translateX(-50px) translateY(50px);
}
}
@media screen and (max-width: 768px) {
.hero-content {
margin-top: 120px;
}
.hero-content h1 {
font-size: 36px;
}
.hero-content p {
font-size: 18px;
}
.rocket {
width: 180px;
right: 5%;
}
.main-menu {
display: none;
}
.auth-buttons {
flex-direction: column;
gap: 10px;
}
.hero-content {
margin-top: 140px;
}
.slider-nav {
bottom: 30px;
}
.slider-dot {
width: 35px;
height: 35px;
font-size: 12px;
}
.search-container {
width: 90%;
padding: 30px 20px;
top: 65%;
}
.search-form {
flex-direction: column;
gap: 15px;
}
.search-input {
width: 100%;
}
.domains-container {
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
}
@media screen and (max-width: 480px) {
.hero-content h1 {
font-size: 28px;
}
.hero-content p {
font-size: 16px;
}
.rocket {
width: 160px;
right: 2%;
}
.orange-btn {
padding: 12px 30px;
font-size: 14px;
}
.search-container {
padding: 20px 15px;
}
.domains-container {
margin-top: 20px;
}
.domain-item {
margin: 5px;
}
}
.services-section {
background-color: #f1f5f9;
padding: 80px 0;
width: 100%;
position: relative;
overflow: hidden;
}
.services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 10% 10%, rgba(139, 92, 246, 0.03) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(circle at 90% 90%, rgba(109, 38, 232, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
pointer-events: none;
}
.services-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.section-title {
text-align: center;
margin-bottom: 40px;
font-size: 32px;
font-weight: 700;
color: #333;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.service-item {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 12px;
padding: 30px;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
position: relative;
overflow: hidden;
border: 1px solid rgba(226, 232, 240, 0.8);
}
.service-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-color: rgba(139, 92, 246, 0.3);
}
.service-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
opacity: 0;
transition: opacity 0.3s ease;
}
.service-item:hover::before {
opacity: 1;
}
.service-icon {
margin-bottom: 25px;
height: 70px;
display: flex;
align-items: center;
}
.service-icon svg {
width: 60px;
height: 60px;
transition: transform 0.3s ease;
}
.service-item:hover .service-icon svg {
transform: scale(1.1);
}
.service-title {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin: 0 0 15px 0;
position: relative;
padding-bottom: 15px;
}
.service-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
transition: width 0.3s ease;
}
.service-item:hover .service-title::after {
width: 60px;
}
.service-description {
font-size: 16px;
line-height: 1.6;
color: #64748b;
margin: 0;
}
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-gap: 30px;
}
}
@media (max-width: 768px) {
.services-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 25px;
}
.service-item {
padding: 25px;
}
.service-icon {
justify-content: center;
margin-bottom: 20px;
}
.service-title {
text-align: center;
}
.service-title::after {
left: 50%;
transform: translateX(-50%);
}
.service-description {
text-align: center;
}
}
@media (max-width: 480px) {
.services-grid {
grid-template-columns: 1fr;
}
.service-item {
max-width: 100%;
}
}
.faq-section {
width: 100%;
padding: 60px 20px;
background-color: #f1f5f9;
}
.faq-header {
text-align: center;
margin-bottom: 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.faq-title {
font-size: 36px;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
}
.faq-subtitle {
font-size: 18px;
color: #64748b;
max-width: 700px;
margin: 0 auto;
}
.faq-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 50px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.faq-grid .faq-item {
flex: 0 0 calc(50% - 15px);
box-sizing: border-box;
}
.faq-item {
display: flex;
align-items: flex-start;
overflow: hidden;
height: auto;
transition: height 0.3s ease;
}
.faq-icon {
width: 26px;
height: 26px;
background: linear-gradient(to right, rgba(var(--colorMain3RGB), 1) 0%, rgba(var(--colorMain4RGB), 1) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
position: relative;
padding: 1px;
}
.faq-icon::before {
content: '?';
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-weight: bold;
font-size: 14px;
}
.faq-content {
flex-grow: 1;
}
.faq-question {
font-size: 18px;
font-weight: 600;
color: #1e293b;
margin-bottom: 10px;
text-decoration: none;
display: inline-block;
transition: color 0.3s ease;
cursor: pointer;
}
.faq-question:hover {
}
.faq-answer {
font-size: 16px;
color: #64748b;
margin-bottom: 15px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, margin 0.5s ease;
margin-top: 0;
}
.faq-answer.active {
margin-top: 10px;
}
@media (max-width: 768px) {
.faq-grid .faq-item {
}
.faq-title {
font-size: 28px;
}
}
.pricing-section {
width: 100%;
padding: 80px 20px 60px;
background-color: #ffffff;
}
.pricing-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.pricing-header {
text-align: center;
margin-bottom: 60px;
}
.pricing-title {
font-size: 36px;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.pricing-subtitle {
font-size: 18px;
color: #64748b;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.pricing-grid {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}
.pricing-card {
width: 280px;
border-radius: 15px;
overflow: hidden;
text-align: center;
background-color: #ffffff;
padding: 40px 30px;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.card-content {
position: relative;
z-index: 1;
}
.start-plan {
border-color: #e2e8f0;
}
.medium-plan {
border-color: #e2e8f0;
}
.premium-plan {
border-color: #f97316;
position: relative;
}
.premium-plan::after {
content: 'POPULAR';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
background-color: #f97316;
color: white;
padding: 6px 16px;
border-radius: 15px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
white-space: nowrap;
}
.platinum-plan {
border-color: #e2e8f0;
}
.plan-name {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
color: #1e293b;
}
.price-container {
margin-bottom: 35px;
}
.currency {
font-size: 24px;
vertical-align: top;
position: relative;
top: 8px;
color: #1e293b;
}
.pricing-card .price {
font-size: 50px;
font-weight: 300;
line-height: 1;
color: #f97316;
}
.period {
font-size: 18px;
color: #64748b;
}
.divider {
width: 40px;
height: 2px;
background-color: #e2e8f0;
margin: 20px auto;
}
.features {
margin: 30px 0;
text-align: left;
}
.feature {
margin-bottom: 10px;
position: relative;
padding-left: 20px;
font-size: 14px;
color: #64748b;
line-height: 1.4;
}
.feature::before {
content: '+';
position: absolute;
left: 0;
font-weight: bold;
color: #f97316;
}
.see-details-btn {
display: inline-block;
background-color: #f97316;
color: white;
text-decoration: none;
padding: 12px 30px;
border-radius: 30px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.see-details-btn:hover {
background-color: #ea580c;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.pricing-grid {
flex-direction: column;
align-items: center;
}
.pricing-card {
width: 100%;
max-width: 350px;
margin-bottom: 25px;
}
.pricing-title {
font-size: 28px;
}
.pricing-card .price {
font-size: 60px;
}
}
.site-footer {
background: linear-gradient(135deg, #1a1a2e 0%, #2f365f 100%);
color: #cbd5e0;
padding: 60px 5% 0;
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #6d26e8, #ff9d2f, #6d26e8);
}
.footer-container {
display: flex;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 40px;
}
.footer-brand {
flex: 0 0 260px;
max-width: 260px;
}
.footer-brand-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.footer-brand-logo svg {
flex-shrink: 0;
}
.footer-brand h3 {
color: #ffffff;
font-size: 18px;
font-weight: 600;
margin: 0;
white-space: nowrap;
}
.footer-brand-desc {
font-size: 14px;
line-height: 1.6;
color: #8892a8;
margin: 0;
}
.footer-columns {
display: flex;
flex: 1;
gap: 40px;
justify-content: flex-start;
}
.footer-column {
flex: 1;
min-width: 0;
}
.footer-column h4 {
color: #ff9d2f;
font-size: 15px;
margin-bottom: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
padding-bottom: 10px;
}
.footer-column h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: #ff9d2f;
border-radius: 1px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column li {
margin-bottom: 8px;
}
.footer-column a {
color: #8892a8;
text-decoration: none;
font-size: 14px;
transition: color 0.3s, padding-left 0.3s;
display: inline-block;
}
.footer-column a:hover {
color: #ffffff;
padding-left: 4px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 20px 0;
}
.footer-bottom-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright {
font-size: 13px;
color: #5a6478;
}
@media (max-width: 992px) {
.footer-container {
gap: 40px;
}
.footer-brand {
flex: 0 0 220px;
max-width: 220px;
}
}
@media (max-width: 768px) {
.site-footer {
padding: 40px 5% 0;
}
.footer-container {
flex-direction: column;
gap: 30px;
}
.footer-brand {
flex: none;
max-width: 100%;
}
.footer-columns {
flex-direction: column;
gap: 30px;
}
.footer-column h4::after {
left: 0;
}
.footer-bottom-inner {
justify-content: center;
text-align: center;
}
}
@media (max-width: 480px) {
.site-footer {
padding: 30px 4% 0;
}
.footer-brand h3 {
font-size: 16px;
}
.footer-brand-desc {
font-size: 13px;
}
.footer-column a {
font-size: 13px;
}
}
.additional-services-section {
background-color: #f8fafc;
padding: 80px 20px;
}
.services-container {
max-width: 1200px;
margin: 0 auto;
}
.services-header {
text-align: center;
margin-bottom: 60px;
}
.services-title {
font-size: 42px;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
text-align: center;
}
.services-subtitle {
font-size: 18px;
color: #64748b;
max-width: 600px;
margin: 0 auto;
}
.services-table-wrapper {
background: white;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.services-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.services-table thead {
background: linear-gradient(135deg, #2f365f 0%, #3b4371 100%);
}
.services-table th {
padding: 20px;
text-align: center;
font-weight: 600;
color: white;
font-size: 16px;
}
.services-table tbody tr {
border-bottom: 1px solid #e2e8f0;
transition: background-color 0.3s ease;
}
.services-table tbody tr:hover {
background-color: #f1f5f9;
}
.services-table tbody tr:last-child {
border-bottom: none;
}
.services-table td {
padding: 20px;
vertical-align: middle;
text-align: center;
}
.service-name {
display: flex;
align-items: center;
font-weight: 600;
color: #1e293b;
min-width: 200px;
}
.service-description {
color: #64748b;
font-size: 14px;
line-height: 1.5;
max-width: 300px;
}
.service-price {
font-size: 20px;
font-weight: 700;
color: #1e293b;
min-width: 120px;
}
.service-price span {
font-size: 14px;
font-weight: 400;
color: #64748b;
}
.add-service-btn {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.add-service-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}
@media (max-width: 768px) {
.services-title {
font-size: 32px;
}
.services-table-wrapper {
overflow-x: auto;
}
.services-table {
min-width: 600px;
}
.services-table th,
.services-table td {
padding: 15px 10px;
}
.service-name {
min-width: 150px;
}
.service-description {
max-width: 200px;
font-size: 13px;
}
}
.hero-section-2 {
height: 60vh;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 50px;
}
.hero-section-2:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, #eee, transparent),
radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
radial-gradient(1px 1px at 90px 40px, #fff, transparent),
radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
radial-gradient(2px 2px at 160px 30px, #fff, transparent);
background-repeat: repeat;
background-size: 200px 100px;
animation: sparkle 20s linear infinite;
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
width: 100%;
z-index: 5;
position: relative;
}
.hero-left {
z-index: 10;
}
.hero-left h1 {
font-size: 48px;
font-weight: 700;
color: #ff9d2f;
margin-bottom: 20px;
line-height: 1.1;
}
.hero-left .breadcrumb {
font-size: 16px;
color: #94a3b8;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.hero-left .breadcrumb span {
color: #f97316;
}
.hero-left p {
font-size: 18px;
color: white;
margin-bottom: 30px;
line-height: 1.6;
}
.hero-right {
position: relative;
height: 300px;
}
.horizontal-rocket {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
width: 200px;
height: 350px;
animation: floatHorizontal 4s ease-in-out infinite;
}
@keyframes floatHorizontal {
0%, 100% { transform: translateY(-50%) rotate(-90deg) translateX(0px); }
50% { transform: translateY(-50%) rotate(-90deg) translateX(15px); }
}
@media (max-width: 768px) {
.hero-section-2 {
padding: 60px 20px;
height: 50vh;
}
.hero-container {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.hero-left h1 {
font-size: 32px;
}
.hero-left .breadcrumb {
justify-content: center;
}
.hero-right {
height: 200px;
}
.horizontal-rocket {
width: 150px;
height: 250px;
right: 50%;
transform: translateY(-50%) translateX(50%) rotate(-90deg);
}
}
.simple-services {
padding: 60px 20px;
background-color: #f8f9fa;
text-align: center;
}
.simple-services h2 {
font-size: 36px;
color: #333;
margin-bottom: 10px;
}
.simple-services p {
font-size: 18px;
color: #666;
margin-bottom: 40px;
}
.simple-table {
width: 100%;
max-width: 1000px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
table-layout: auto;
}
.simple-table th {
background-color: #2f365f;
color: white;
padding: 15px;
font-size: 16px;
font-weight: 600;
text-align: left;
border-bottom: 2px solid #ddd;
white-space: nowrap;
}
.simple-table td {
padding: 15px;
border-bottom: 1px solid #eee;
font-size: 15px;
vertical-align: middle;
text-align: left;
}
.simple-table p {
margin: 5px 0 8px 0;
line-height: 1.5;
text-align: left;
}
.simple-table p:last-child {
margin-bottom: 0;
}
.simple-table td p {
text-align: left;
}
.simple-table tr:nth-child(even) {
background-color: #f8f9fa;
}
.simple-table tr:hover {
background-color: #e3f2fd;
}
.simple-table td:first-child {
font-weight: 600;
color: #333;
}
.simple-table td:last-child {
color: #f97316;
font-weight: 700;
white-space: nowrap;
width: 1%;
}
.logo-table td:first-child {
text-align: center;
width: 60px;
}
.logo-table td:first-child img {
max-width: 50px;
height: auto;
margin: 0 auto;
display: block;
}
.logo-table td img {
max-width: 50px;
height: auto;
display: block;
margin: 0 auto;
transition: transform 0.3s ease;
}
.logo-table td img:hover {
transform: scale(1.1);
}
.logo-table th:first-child {
width: 60px;
}
@media (max-width: 768px) {
.simple-table th,
.simple-table td {
padding: 12px 10px;
font-size: 14px;
}
.simple-table td:last-child {
font-size: 13px;
}
.logo-table td:first-child img,
.logo-table td img {
max-width: 40px;
}
}
@media (max-width: 520px) {
.simple-table {
border-radius: 8px;
}
.simple-table th {
padding: 10px 8px;
font-size: 13px;
}
.simple-table td {
padding: 10px 8px;
font-size: 13px;
}
.simple-table td:first-child {
font-size: 13px;
}
.simple-table td:last-child {
font-size: 12px;
}
.simple-table td p {
font-size: 12px;
line-height: 1.4;
margin: 3px 0 6px;
}
.logo-table td:first-child img,
.logo-table td img {
max-width: 35px;
}
}
/* Стили для страницы документации */
.doc-section {
padding: 60px 0;
background-color: #f8f9fa;
}
.doc-container {
display: flex;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.doc-sidebar {
width: 300px;
flex-shrink: 0;
}
.doc-content {
flex-grow: 1;
background: white;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
padding: 30px;
}
.doc-search {
position: relative;
margin-bottom: 25px;
}
.doc-search input {
width: 100%;
padding: 12px 40px 12px 15px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s ease;
}
.doc-search input:focus {
border-color: #6d26e8;
box-shadow: 0 0 0 3px rgba(109, 38, 232, 0.2);
outline: none;
}
.doc-search .search-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: #6d26e8;
cursor: pointer;
}
.doc-menu h3 {
font-size: 18px;
margin: 25px 0 15px;
color: #2d3748;
}
.doc-menu ul {
list-style: none;
padding: 0;
margin: 0 0 30px;
}
.doc-menu ul li {
margin-bottom: 10px;
}
.doc-menu ul li a {
display: block;
padding: 8px 15px;
color: #4a5568;
text-decoration: none;
border-radius: 6px;
transition: all 0.2s ease;
font-size: 15px;
}
.doc-menu ul li a:hover {
background-color: #edf2f7;
color: #6d26e8;
}
.doc-menu ul li.active a {
background-color: #6d26e8;
color: white;
font-weight: 500;
}
.popular-articles li a {
padding-left: 30px !important;
position: relative;
}
.popular-articles li a:before {
content: "•";
position: absolute;
left: 15px;
color: #6d26e8;
}
.doc-section-content h2 {
font-size: 28px;
margin: 0 0 20px;
color: #2d3748;
}
.doc-intro {
font-size: 18px;
line-height: 1.6;
color: #4a5568;
margin-bottom: 30px;
}
.doc-card {
display: flex;
gap: 20px;
padding: 25px;
background-color: #f8fafc;
border-radius: 10px;
margin-bottom: 25px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.doc-card:hover {
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
transform: translateY(-2px);
border-color: #cbd5e0;
}
.doc-card-icon {
font-size: 30px;
flex-shrink: 0;
}
.doc-card-content {
flex-grow: 1;
}
.doc-card-content h3 {
font-size: 20px;
margin: 0 0 15px;
color: #2d3748;
}
.doc-card-content p {
margin: 0 0 15px;
line-height: 1.6;
color: #4a5568;
}
.doc-card-content ul,
.doc-card-content ol {
margin: 15px 0;
padding-left: 20px;
}
.doc-card-content li {
margin-bottom: 8px;
line-height: 1.5;
}
.doc-text {
font-size: 15px;
line-height: 1.6;
color: #4a5568;
}
.doc-text p {
margin-bottom: 15px;
}
.doc-text ul,
.doc-text ol {
margin: 15px 0;
padding-left: 20px;
}
.doc-text li {
margin-bottom: 8px;
}
.doc-update-date {
margin-top: 30px;
font-style: italic;
color: #718096;
text-align: right;
}
.doc-link {
display: inline-block;
margin-top: 10px;
color: #6d26e8;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
.doc-link:hover {
color: #8b5cf6;
text-decoration: underline;
}
.doc-navigation {
display: flex;
justify-content: space-between;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
.doc-nav-prev,
.doc-nav-next {
display: flex;
align-items: center;
gap: 8px;
color: #6d26e8;
text-decoration: none;
font-weight: 500;
padding: 10px 15px;
border-radius: 8px;
transition: all 0.2s ease;
}
.doc-nav-prev:hover,
.doc-nav-next:hover {
background-color: #f8fafc;
}
/* Адаптивность для документации */
@media (max-width: 992px) {
.doc-container {
flex-direction: column;
}
.doc-sidebar {
width: 100%;
}
}
@media (max-width: 768px) {
.doc-card {
flex-direction: column;
}
.doc-navigation {
flex-direction: column;
gap: 15px;
}
}
/* Стили для блока с операционными системами */
.os-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 30px;
}
.os-item {
background-color: #f8f9fa;
border-radius: 10px;
padding: 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.os-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.os-logo-box {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.os-logo {
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
.os-item h3 {
margin: 10px 0;
font-size: 18px;
color: #333;
}
.os-item p {
color: #666;
font-size: 14px;
margin: 0;
}
@media (max-width: 768px) {
.simple-services h2 {
font-size: 28px;
}
.simple-table th,
.simple-table td {
padding: 12px 15px;
font-size: 14px;
}
.logo-table td img {
max-width: 40px;
}
.os-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.os-logo-box {
width: 60px;
height: 60px;
}
.os-logo {
max-width: 100%;
max-height: 100%;
}
.os-item h3 {
font-size: 16px;
}
}
@media (max-width: 480px) {
.os-grid {
grid-template-columns: 1fr;
}
}
.hero-content {
margin-top: 150px;
}
@media (max-width: 768px) {
.hero-content {
margin-top: 180px;
}
}
@media (max-width: 480px) {
.hero-content {
margin-top: 200px;
}
.hero-section-2 {
padding: 80px 20px 30px 20px;
min-height: 70vh;
}
}
@media (max-width: 768px) {
.hero-section-2 {
padding: 100px 20px 50px 20px;
min-height: 80vh;
height: auto;
}
.hero-container {
grid-template-columns: 1fr;
gap: 50px;
text-align: center;
}
.hero-left h1 {
font-size: 32px;
margin-bottom: 20px;
}
.hero-left p {
margin-bottom: 30px;
font-size: 18px;
line-height: 1.6;
}
.hero-left .breadcrumb {
justify-content: center;
margin-bottom: 15px;
}
.hero-right {
height: 300px;
margin-top: 20px;
position: relative;
overflow: visible;
}
.horizontal-rocket {
width: 180px;
height: 280px;
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
z-index: 5;
}
}
.faq-icon-new {
width: 26px;
height: 26px;
background: linear-gradient(to right, rgba(var(--colorMain3RGB), 1) 0%, rgba(var(--colorMain4RGB), 1) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
position: relative;
padding: 1px;
margin-top: 3px;
}
/* Стили для выпадающих меню */
.main-menu .dropdown {
position: relative;
}
.main-menu .dropdown ul {
position: absolute;
top: calc(100% + 15px);
left: 50%;
transform: translateX(-50%) translateY(10px);
background: rgba(42, 10, 98, 0.95);
min-width: 220px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
border-radius: 12px;
padding: 12px 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.2, 1, 0.2, 1);
z-index: 1001;
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
overflow: hidden;
}
.main-menu .dropdown ul::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
background: rgba(42, 10, 98, 0.95);
transform-origin: center;
rotate: 45deg;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-left: 1px solid rgba(255, 255, 255, 0.15);
z-index: -1;
}
.main-menu .dropdown:hover ul {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.main-menu .dropdown ul li {
margin: 0;
padding: 0;
width: 100%;
position: relative;
}
.main-menu .dropdown ul li:not(:last-child)::after {
content: '';
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
height: 1px;
background: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 100%);
}
.main-menu .dropdown ul li a {
display: flex;
align-items: center;
padding: 12px 20px;
color: white;
font-size: 14px;
transition: all 0.25s ease;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.main-menu .dropdown ul li a::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: linear-gradient(to bottom, #6d26e8, #8b5cf6);
transform: scaleY(0);
transition: transform 0.25s ease;
}
.main-menu .dropdown ul li a:hover {
background: rgba(255, 255, 255, 0.07);
color: #ff9d2f;
padding-left: 25px;
}
.main-menu .dropdown ul li a:hover::before {
transform: scaleY(1);
}
.main-menu .dropdown > a {
display: flex;
align-items: center;
position: relative;
}
.main-menu .dropdown > a::after {
content: '▼';
font-size: 10px;
margin-left: 5px;
transition: transform 0.3s ease;
display: inline-block;
opacity: 0.8;
}
.main-menu .dropdown:hover > a::after {
transform: rotate(180deg);
opacity: 1;
}
.main-menu .dropdown:hover > a {
color: #ff9d2f;
}
/* Стили для мобильного выпадающего меню */
.mobile-menu-list .dropdown {
position: relative;
}
/* Добавляем стили для лучшей видимости выпадающего меню */
.mobile-menu-list .dropdown > a {
position: relative;
z-index: 2;
}
.mobile-menu-list .dropdown > a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: -1;
border-radius: 10px;
transition: background 0.3s ease;
}
.mobile-menu-list .dropdown.active > a::after {
background: rgba(255, 255, 255, 0.05);
}
.mobile-menu-list .mobile-submenu {
display: none;
list-style: none;
margin: 10px 0 5px;
background: rgba(0, 0, 0, 0.15);
border-radius: 10px;
padding: 8px 0;
overflow: hidden;
border-left: 3px solid rgba(109, 38, 232, 0.7);
animation: fadeIn 0.3s ease forwards;
max-height: 0;
transition: max-height 0.4s ease;
}
.mobile-menu-list .dropdown.active .mobile-submenu {
max-height: 500px; /* Достаточно большое значение для любого количества пунктов */
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mobile-menu-list .dropdown.active .mobile-submenu {
display: block !important;
}
/* Добавляем визуальный индикатор активного состояния */
.mobile-menu-list .dropdown.active > a {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #ff9d2f !important;
border-radius: 10px;
}
/* Изменяем стрелку при активном состоянии */
.mobile-menu-list .dropdown.active > a .menu-arrow {
transform: rotate(90deg) !important;
color: #ff9d2f !important;
}
.mobile-menu-list .mobile-submenu li {
margin: 0;
position: relative;
}
.mobile-menu-list .mobile-submenu li:not(:last-child)::after {
content: '';
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
height: 1px;
background: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.07) 50%,
rgba(255, 255, 255, 0) 100%);
}
.mobile-menu-list .mobile-submenu a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 14px;
padding: 12px 20px;
display: flex;
align-items: center;
transition: all 0.25s ease;
position: relative;
}
.mobile-menu-list .mobile-submenu a::before {
content: '•';
margin-right: 8px;
color: #ff9d2f;
font-size: 18px;
line-height: 0;
opacity: 0.7;
transition: all 0.25s ease;
}
.mobile-menu-list .mobile-submenu a:hover {
color: #ff9d2f;
background: rgba(255, 255, 255, 0.05);
padding-left: 25px;
}
.mobile-menu-list .mobile-submenu a:hover::before {
opacity: 1;
transform: scale(1.2);
}
.mobile-menu-list .dropdown > a .menu-arrow {
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.mobile-menu-list .dropdown.active > a {
color: #ff9d2f;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.mobile-menu-list .dropdown.active > a .menu-arrow {
transform: rotate(90deg);
color: #ff9d2f;
}
/* Стили для секции с локациями серверов */
.locations-section {
padding: 80px 0;
background-color: #ffffff;
}
.locations-header {
text-align: center;
margin-bottom: 50px;
}
.locations-title {
font-size: 32px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
}
.locations-subtitle {
font-size: 18px;
color: #666;
max-width: 800px;
margin: 0 auto;
}
.flags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 25px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.flag-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s ease;
}
.flag-item:hover {
transform: translateY(-5px);
}
.flag-icon {
width: 80px;
height: 60px;
margin-bottom: 15px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.flag-icon img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.flag-item:hover .flag-icon {
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.country-name {
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0;
}
@media (max-width: 768px) {
.flags-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 20px;
}
.flag-icon {
width: 70px;
height: 52px;
}
.country-name {
font-size: 13px;
}
}
@media (max-width: 480px) {
.flags-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 15px;
}
.flag-icon {
width: 60px;
height: 45px;
}
.country-name {
font-size: 12px;
}
}
/* Адаптивная таблица для длинных текстов */
/* Основные стили для секции */
.careers-section {
padding: 60px 0;
background-color: #f8f9fa;
font-family: Arial, sans-serif;
}
.careers-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.careers-section h2 {
font-size: 32px;
font-weight: 700;
color: #333;
text-align: center;
margin-bottom: 15px;
}
.careers-section p {
font-size: 18px;
color: #666;
text-align: center;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Обычная таблица для десктопов */
.standard-careers-table {
width: 100%;
max-width: 1000px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
table-layout: auto;
}
.standard-careers-table th {
background-color: #2f365f;
color: white;
font-weight: 600;
padding: 18px 15px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid rgba(255,255,255,0.1);
}
.standard-careers-table td {
padding: 20px 15px;
border-bottom: 1px solid #eee;
font-size: 15px;
line-height: 1.6;
}
.standard-careers-table tr:nth-child(even) {
background-color: #f8f9fa;
}
.standard-careers-table tr:hover {
background-color: #e3f2fd;
}
.standard-careers-table td:first-child {
font-weight: 600;
color: #333;
width: 25%;
min-width: 150px;
}
.standard-careers-table td:nth-child(2) {
width: 55%;
min-width: 300px;
}
.standard-careers-table td:last-child {
color: #f97316;
font-weight: 700;
width: 20%;
min-width: 120px;
}
/* ======================================= */
/* ПРОФЕССИОНАЛЬНАЯ АДАПТИВНАЯ СИСТЕМА */
/* ======================================= */
/* Базовые переходы и анимации */
.standard-careers-table,
.standard-careers-table th,
.standard-careers-table td {
transition: all 0.3s ease;
}
/* Очень большие экраны 1400px+ */
@media screen and (min-width: 1400px) {
.careers-container {
max-width: 1400px;
}
.standard-careers-table {
font-size: 16px;
}
.standard-careers-table th,
.standard-careers-table td {
padding: 22px 20px;
font-size: 16px;
}
}
/* Большие планшеты и маленькие ноутбуки 1024px-1199px */
@media screen and (max-width: 1199px) {
.careers-container {
padding: 0 15px;
}
.standard-careers-table {
font-size: 15px;
}
.standard-careers-table th,
.standard-careers-table td {
padding: 18px 12px;
font-size: 14px;
}
.standard-careers-table td:nth-child(2) {
max-width: 400px;
}
}
/* Средние планшеты 768px-1023px */
@media screen and (max-width: 1023px) {
.careers-container {
overflow-x: auto;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
position: relative;
}
.careers-container::-webkit-scrollbar {
height: 8px;
}
.careers-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.careers-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.careers-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.standard-careers-table {
min-width: 750px;
font-size: 14px;
margin-bottom: 10px;
}
.standard-careers-table th,
.standard-careers-table td {
padding: 15px 10px;
font-size: 13px;
}
.standard-careers-table th {
font-size: 14px;
background: linear-gradient(135deg, #2f365f 0%, #3d4574 50%, #4a5282 100%);
}
}
/* Профессиональная адаптация для планшетов 768px и меньше - без горизонтальной прокрутки */
@media screen and (max-width: 768px) {
.careers-section {
padding: 40px 0;
}
.careers-section h2 {
font-size: 28px;
margin-bottom: 12px;
}
.careers-section p {
font-size: 16px;
margin-bottom: 35px;
padding: 0 15px;
line-height: 1.5;
}
.careers-container {
overflow-x: auto;
padding: 0 15px 15px 15px;
-webkit-overflow-scrolling: touch;
}
.careers-container::-webkit-scrollbar {
height: 6px;
}
.careers-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 8px;
}
.careers-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 8px;
}
.careers-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.standard-careers-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 14px;
}
.standard-careers-table th {
padding: 16px 8px;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.standard-careers-table th:first-child {
width: 25%;
padding-left: 12px;
}
.standard-careers-table th:nth-child(2) {
width: 55%;
}
.standard-careers-table th:last-child {
width: 20%;
padding-right: 12px;
}
.standard-careers-table td {
padding: 14px 8px;
font-size: 13px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-careers-table td:first-child {
padding-left: 12px;
font-size: 13px;
font-weight: 650;
}
.standard-careers-table td:nth-child(2) {
font-size: 12px;
line-height: 1.4;
}
.standard-careers-table td:nth-child(2) p {
margin: 4px 0;
font-size: 12px;
line-height: 1.4;
}
.standard-careers-table td:nth-child(2) b {
font-size: 12px;
font-weight: 650;
margin: 6px 0 3px 0;
display: block;
}
.standard-careers-table td:last-child {
padding-right: 12px;
font-size: 12px;
font-weight: 750;
text-align: center;
}
}
/* Умная адаптация для малых планшетов и больших телефонов 600px и меньше */
@media screen and (max-width: 600px) {
.careers-section {
padding: 35px 0;
}
.careers-section h2 {
font-size: 26px;
margin-bottom: 10px;
}
.careers-section p {
font-size: 15px;
margin-bottom: 30px;
padding: 0 12px;
line-height: 1.4;
}
.careers-container {
padding: 0 12px 12px 12px;
}
.careers-container::-webkit-scrollbar {
height: 5px;
}
.standard-careers-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 13px;
}
.standard-careers-table th {
padding: 14px 6px;
font-size: 13px;
font-weight: 700;
text-align: center;
}
.standard-careers-table th:first-child {
width: 28%;
padding-left: 10px;
}
.standard-careers-table th:nth-child(2) {
width: 52%;
}
.standard-careers-table th:last-child {
width: 20%;
padding-right: 10px;
}
.standard-careers-table td {
padding: 12px 6px;
font-size: 12px;
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-careers-table td:first-child {
padding-left: 10px;
font-size: 12px;
font-weight: 650;
}
.standard-careers-table td:nth-child(2) {
font-size: 11px;
line-height: 1.3;
}
.standard-careers-table td:nth-child(2) p {
margin: 3px 0;
font-size: 11px;
line-height: 1.3;
}
.standard-careers-table td:nth-child(2) b {
font-size: 11px;
font-weight: 650;
margin: 5px 0 2px 0;
display: block;
}
.standard-careers-table td:last-child {
padding-right: 10px;
font-size: 11px;
font-weight: 750;
text-align: center;
}
}
/* Умная адаптация для больших смартфонов 480px и меньше */
@media screen and (max-width: 480px) {
.careers-section {
padding: 30px 0;
}
.careers-section h2 {
font-size: 24px;
margin-bottom: 8px;
}
.careers-section p {
font-size: 14px;
margin-bottom: 25px;
padding: 0 10px;
line-height: 1.3;
}
.careers-container {
padding: 0 10px 10px 10px;
}
.careers-container::-webkit-scrollbar {
height: 4px;
}
.standard-careers-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 12px;
}
.standard-careers-table th {
padding: 12px 5px;
font-size: 12px;
font-weight: 700;
text-align: center;
}
.standard-careers-table th:first-child {
width: 30%;
padding-left: 8px;
}
.standard-careers-table th:nth-child(2) {
width: 50%;
}
.standard-careers-table th:last-child {
width: 20%;
padding-right: 8px;
}
.standard-careers-table td {
padding: 10px 5px;
font-size: 11px;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-careers-table td:first-child {
padding-left: 8px;
font-size: 11px;
font-weight: 650;
}
.standard-careers-table td:nth-child(2) {
font-size: 10px;
line-height: 1.2;
}
.standard-careers-table td:nth-child(2) p {
margin: 2px 0;
font-size: 10px;
line-height: 1.2;
}
.standard-careers-table td:nth-child(2) b {
font-size: 10px;
font-weight: 650;
margin: 4px 0 2px 0;
display: block;
}
.standard-careers-table td:last-child {
padding-right: 8px;
font-size: 10px;
font-weight: 750;
text-align: center;
}
}
/* Умная адаптация для средних смартфонов 400px и меньше */
@media screen and (max-width: 400px) {
.careers-section {
padding: 25px 0;
}
.careers-section h2 {
font-size: 22px;
margin-bottom: 6px;
}
.careers-section p {
font-size: 13px;
margin-bottom: 20px;
padding: 0 8px;
line-height: 1.3;
}
.careers-container {
padding: 0 8px 8px 8px;
}
.careers-container::-webkit-scrollbar {
height: 3px;
}
.standard-careers-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 11px;
}
.standard-careers-table th {
padding: 10px 4px;
font-size: 11px;
font-weight: 700;
text-align: center;
}
.standard-careers-table th:first-child {
width: 32%;
padding-left: 6px;
}
.standard-careers-table th:nth-child(2) {
width: 48%;
}
.standard-careers-table th:last-child {
width: 20%;
padding-right: 6px;
}
.standard-careers-table td {
padding: 8px 4px;
font-size: 10px;
line-height: 1.2;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-careers-table td:first-child {
padding-left: 6px;
font-size: 10px;
font-weight: 650;
}
.standard-careers-table td:nth-child(2) {
font-size: 9px;
line-height: 1.1;
}
.standard-careers-table td:nth-child(2) p {
margin: 1px 0;
font-size: 9px;
line-height: 1.1;
}
.standard-careers-table td:nth-child(2) b {
font-size: 9px;
font-weight: 650;
margin: 3px 0 1px 0;
display: block;
}
.standard-careers-table td:last-child {
padding-right: 6px;
font-size: 9px;
font-weight: 750;
text-align: center;
}
}
/* Умная адаптация для малых смартфонов 335px и меньше */
@media screen and (max-width: 335px) {
.careers-section {
padding: 20px 0;
}
.careers-section h2 {
font-size: 20px;
margin-bottom: 5px;
line-height: 1.2;
}
.careers-section p {
font-size: 12px;
margin-bottom: 18px;
padding: 0 5px;
line-height: 1.3;
}
.careers-container {
padding: 0 5px 5px 5px;
}
.careers-container::-webkit-scrollbar {
height: 2px;
}
.careers-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.careers-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 2px;
}
.careers-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.standard-careers-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 10px;
}
.standard-careers-table th {
padding: 8px 3px;
font-size: 10px;
font-weight: 700;
text-align: center;
}
.standard-careers-table th:first-child {
width: 35%;
padding-left: 5px;
}
.standard-careers-table th:nth-child(2) {
width: 45%;
}
.standard-careers-table th:last-child {
width: 20%;
padding-right: 5px;
}
.standard-careers-table td {
padding: 6px 3px;
font-size: 9px;
line-height: 1.1;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-careers-table td:first-child {
padding-left: 5px;
font-size: 9px;
font-weight: 650;
}
.standard-careers-table td:nth-child(2) {
font-size: 8px;
line-height: 1.0;
}
.standard-careers-table td:nth-child(2) p {
margin: 1px 0;
font-size: 8px;
line-height: 1.0;
}
.standard-careers-table td:nth-child(2) b {
font-size: 8px;
font-weight: 650;
margin: 2px 0 1px 0;
display: block;
}
.standard-careers-table td:last-child {
padding-right: 5px;
font-size: 8px;
font-weight: 750;
text-align: center;
}
/* Компактная контактная информация */
.contact-info {
margin-top: 15px;
padding: 0 5px;
}
.contact-info p {
font-size: 11px;
line-height: 1.3;
}
.contact-info a {
font-size: 11px;
word-break: break-all;
}
}
.contact-info {
margin-top: 30px;
text-align: center;
font-size: 16px;
color: #666;
}
.contact-info a {
color: #6d26e8;
text-decoration: none;
}
.contact-info a:hover {
color: #ff7e33;
}
/* Основные стили для секции */
.requisites-section {
padding: 60px 0;
background-color: #f8f9fa;
font-family: Arial, sans-serif;
}
.requisites-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.requisites-section h2 {
font-size: 32px;
font-weight: 700;
color: #333;
text-align: center;
margin-bottom: 15px;
}
.requisites-section p {
font-size: 18px;
color: #666;
text-align: center;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Обычная таблица для десктопов */
.standard-requisites-table {
width: 100%;
max-width: 1000px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
table-layout: auto;
}
.standard-requisites-table th {
background-color: #2f365f;
color: white;
font-weight: 600;
padding: 18px 15px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid rgba(255,255,255,0.1);
}
.standard-requisites-table td {
padding: 20px 15px;
border-bottom: 1px solid #eee;
font-size: 15px;
line-height: 1.6;
}
.standard-requisites-table tr:nth-child(even) {
background-color: #f8f9fa;
}
.standard-requisites-table tr:hover {
background-color: #e3f2fd;
}
.standard-requisites-table td:first-child {
font-weight: 600;
color: #333;
width: 25%;
min-width: 150px;
}
.standard-requisites-table td:nth-child(2) {
width: 55%;
min-width: 300px;
}
.standard-requisites-table td:last-child {
color: #f97316;
font-weight: 700;
width: 20%;
min-width: 120px;
}
/* ======================================= */
/* ПРОФЕССИОНАЛЬНАЯ АДАПТИВНАЯ СИСТЕМА */
/* ======================================= */
/* Базовые переходы и анимации */
.standard-requisites-table,
.standard-requisites-table th,
.standard-requisites-table td {
transition: all 0.3s ease;
}
/* Очень большие экраны 1400px+ */
@media screen and (min-width: 1400px) {
.requisites-container {
max-width: 1400px;
}
.standard-requisites-table {
font-size: 16px;
}
.standard-requisites-table th,
.standard-requisites-table td {
padding: 22px 20px;
font-size: 16px;
}
}
/* Большие планшеты и маленькие ноутбуки 1024px-1199px */
@media screen and (max-width: 1199px) {
.requisites-container {
padding: 0 15px;
}
.standard-requisites-table {
font-size: 15px;
}
.standard-requisites-table th,
.standard-requisites-table td {
padding: 18px 12px;
font-size: 14px;
}
.standard-requisites-table td:nth-child(2) {
max-width: 400px;
}
}
/* Средние планшеты 768px-1023px */
@media screen and (max-width: 1023px) {
.requisites-container {
overflow-x: auto;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
position: relative;
}
.requisites-container::-webkit-scrollbar {
height: 8px;
}
.requisites-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.requisites-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.requisites-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.standard-requisites-table {
min-width: 750px;
font-size: 14px;
margin-bottom: 10px;
}
.standard-requisites-table th,
.standard-requisites-table td {
padding: 15px 10px;
font-size: 13px;
}
.standard-requisites-table th {
font-size: 14px;
background: linear-gradient(135deg, #2f365f 0%, #3d4574 50%, #4a5282 100%);
}
}
/* Профессиональная адаптация для планшетов 768px и меньше - без горизонтальной прокрутки */
@media screen and (max-width: 768px) {
.requisites-section {
padding: 40px 0;
}
.requisites-section h2 {
font-size: 28px;
margin-bottom: 12px;
}
.requisites-section p {
font-size: 16px;
margin-bottom: 35px;
padding: 0 15px;
line-height: 1.5;
}
.requisites-container {
overflow-x: auto;
padding: 0 15px 15px 15px;
-webkit-overflow-scrolling: touch;
}
.requisites-container::-webkit-scrollbar {
height: 6px;
}
.requisites-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 8px;
}
.requisites-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 8px;
}
.requisites-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.standard-requisites-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 14px;
}
.standard-requisites-table th {
padding: 16px 8px;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.standard-requisites-table th {
padding: 16px 12px;
}
.standard-requisites-table td {
padding: 14px 8px;
font-size: 13px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-requisites-table td:first-child {
width: 40%;
padding-left: 12px;
font-size: 13px;
font-weight: 650;
}
.standard-requisites-table td:nth-child(2) {
width: 60%;
padding-right: 12px;
}
}
/* Умная адаптация для малых планшетов и больших телефонов 600px и меньше */
@media screen and (max-width: 600px) {
.requisites-section {
padding: 35px 0;
}
.requisites-section h2 {
font-size: 26px;
margin-bottom: 10px;
}
.requisites-section p {
font-size: 15px;
margin-bottom: 30px;
padding: 0 12px;
line-height: 1.4;
}
.requisites-container {
padding: 0 12px 12px 12px;
}
.requisites-container::-webkit-scrollbar {
height: 5px;
}
.standard-requisites-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 13px;
}
.standard-requisites-table th {
padding: 14px 6px;
font-size: 13px;
font-weight: 700;
text-align: center;
}
.standard-requisites-table th {
padding: 14px 10px;
}
.standard-requisites-table td {
padding: 12px 6px;
font-size: 12px;
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-requisites-table td:first-child {
width: 40%;
padding-left: 10px;
font-size: 12px;
font-weight: 650;
}
.standard-requisites-table td:nth-child(2) {
width: 60%;
padding-right: 10px;
}
}
/* Умная адаптация для больших смартфонов 480px и меньше */
@media screen and (max-width: 480px) {
.requisites-section {
padding: 30px 0;
}
.requisites-section h2 {
font-size: 24px;
margin-bottom: 8px;
}
.requisites-section p {
font-size: 14px;
margin-bottom: 25px;
padding: 0 10px;
line-height: 1.3;
}
.requisites-container {
padding: 0 10px 10px 10px;
}
.requisites-container::-webkit-scrollbar {
height: 4px;
}
.standard-requisites-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 12px;
}
.standard-requisites-table th {
padding: 12px 5px;
font-size: 12px;
font-weight: 700;
text-align: center;
}
.standard-requisites-table th {
padding: 12px 8px;
}
.standard-requisites-table td {
padding: 10px 5px;
font-size: 11px;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-requisites-table td:first-child {
width: 42%;
padding-left: 8px;
font-size: 11px;
font-weight: 650;
}
.standard-requisites-table td:nth-child(2) {
width: 58%;
padding-right: 8px;
}
}
/* Умная адаптация для средних смартфонов 400px и меньше */
@media screen and (max-width: 400px) {
.requisites-section {
padding: 25px 0;
}
.requisites-section h2 {
font-size: 22px;
margin-bottom: 6px;
}
.requisites-section p {
font-size: 13px;
margin-bottom: 20px;
padding: 0 8px;
line-height: 1.3;
}
.requisites-container {
padding: 0 8px 8px 8px;
}
.requisites-container::-webkit-scrollbar {
height: 3px;
}
.standard-requisites-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 11px;
}
.standard-requisites-table th {
padding: 10px 4px;
font-size: 11px;
font-weight: 700;
text-align: center;
}
.standard-requisites-table th {
padding: 10px 6px;
}
.standard-requisites-table td {
padding: 8px 4px;
font-size: 10px;
line-height: 1.2;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-requisites-table td:first-child {
width: 45%;
padding-left: 6px;
font-size: 10px;
font-weight: 650;
}
.standard-requisites-table td:nth-child(2) {
width: 55%;
padding-right: 6px;
}
}
/* Умная адаптация для малых смартфонов 335px и меньше */
@media screen and (max-width: 335px) {
.requisites-section {
padding: 20px 0;
}
.requisites-section h2 {
font-size: 20px;
margin-bottom: 5px;
line-height: 1.2;
}
.requisites-section p {
font-size: 12px;
margin-bottom: 18px;
padding: 0 5px;
line-height: 1.3;
}
.requisites-container {
padding: 0 5px 5px 5px;
}
.requisites-container::-webkit-scrollbar {
height: 2px;
}
.requisites-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.requisites-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 2px;
}
.requisites-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.standard-requisites-table {
width: 100%;
max-width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 10px;
}
.standard-requisites-table th {
padding: 8px 3px;
font-size: 10px;
font-weight: 700;
text-align: center;
}
.standard-requisites-table th {
padding: 8px 5px;
}
.standard-requisites-table td {
padding: 6px 3px;
font-size: 9px;
line-height: 1.1;
word-wrap: break-word;
overflow-wrap: break-word;
}
.standard-requisites-table td:first-child {
width: 48%;
padding-left: 5px;
font-size: 9px;
font-weight: 650;
}
.standard-requisites-table td:nth-child(2) {
width: 52%;
padding-right: 5px;
}
}
.whois-result {
max-width: 800px;
margin: 0 auto;
padding: 30px;
}
.whois-result h2 {
font-size: 28px;
font-weight: 700;
color: #ff9d2f;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.align-left-bottom {
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.align-left-bottom pre {
margin: 0;
padding: 25px 30px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 13px;
line-height: 1.7;
color: #334155;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
}
.align-left-bottom pre b {
display: block;
font-size: 15px;
font-weight: 600;
color: #1e293b;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.whois-result {
padding: 20px 15px;
}
.whois-result h2 {
font-size: 22px;
}
.align-left-bottom pre {
padding: 15px 20px;
font-size: 12px;
}
.align-left-bottom pre b {
font-size: 14px;
}
}
@media (max-width: 480px) {
.whois-result h2 {
font-size: 20px;
}
.align-left-bottom pre {
padding: 12px 15px;
font-size: 11px;
line-height: 1.6;
}
}
.questions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 10px 0;
}
.question-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 25px 15px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
}
.question-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(109, 38, 232, 0.12);
border-color: rgba(109, 38, 232, 0.3);
}
.question-card-icon {
font-size: 28px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9ff;
border-radius: 12px;
transition: background 0.3s ease;
}
.question-card:hover .question-card-icon {
background: rgba(109, 38, 232, 0.1);
}
.question-card-text {
font-size: 14px;
font-weight: 600;
color: #334155;
line-height: 1.3;
transition: color 0.3s ease;
}
.question-card:hover .question-card-text {
color: #6d26e8;
}
@media (max-width: 768px) {
.questions-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
@media (max-width: 480px) {
.questions-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.question-card {
padding: 18px 10px;
}
.question-card-icon {
width: 42px;
height: 42px;
font-size: 22px;
}
.question-card-text {
font-size: 13px;
}
}
.payment-logo {
width: 40px;
height: auto;
border-radius: 6px;
vertical-align: middle;
margin-right: 12px;
flex-shrink: 0;
}
.wiki-section {
padding: 60px 20px 80px;
background-color: #f8f9ff;
}
.wiki-container {
max-width: 1200px;
margin: 0 auto;
}
.wiki-search-box {
position: relative;
max-width: 500px;
margin: 0 auto 50px;
}
.wiki-search-input {
width: 100%;
padding: 14px 50px 14px 20px;
border: 1px solid #e2e8f0;
border-radius: 30px;
font-size: 15px;
background: #ffffff;
transition: all 0.3s ease;
outline: none;
}
.wiki-search-input:focus {
border-color: #6d26e8;
box-shadow: 0 0 0 3px rgba(109, 38, 232, 0.15);
}
.wiki-search-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(to right, #6d26e8, #8b5cf6);
border: none;
color: #ffffff;
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.wiki-search-btn:hover {
transform: translateY(-50%) scale(1.05);
}
.wiki-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.wiki-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e2e8f0;
text-decoration: none;
transition: all 0.3s ease;
}
.wiki-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(109, 38, 232, 0.1);
border-color: rgba(109, 38, 232, 0.25);
}
.wiki-card-img {
width: 100%;
height: 180px;
overflow: hidden;
}
.wiki-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.wiki-card:hover .wiki-card-img img {
transform: scale(1.06);
}
.wiki-card-category {
display: inline-block;
margin: 18px 20px 0;
padding: 4px 12px;
background: rgba(109, 38, 232, 0.08);
color: #6d26e8;
font-size: 12px;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.wiki-card-title {
margin: 12px 20px 0;
font-size: 17px;
font-weight: 700;
color: #1e293b;
line-height: 1.4;
transition: color 0.3s ease;
}
.wiki-card:hover .wiki-card-title {
color: #6d26e8;
}
.wiki-card-desc {
margin: 10px 20px 0;
font-size: 14px;
color: #64748b;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wiki-card-meta {
margin-top: auto;
padding: 12px 20px 16px;
border-top: 1px solid #f1f5f9;
}
.wiki-card-date {
font-size: 13px;
color: #94a3b8;
}
@media (max-width: 992px) {
.wiki-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.wiki-section {
padding: 40px 15px 60px;
}
.wiki-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.wiki-card-img {
height: 140px;
}
.wiki-card-title {
font-size: 15px;
}
.wiki-card-desc {
font-size: 13px;
-webkit-line-clamp: 2;
}
}
@media (max-width: 480px) {
.wiki-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.wiki-card-img {
height: 160px;
}
.wiki-card-title {
font-size: 16px;
}
.wiki-card-desc {
-webkit-line-clamp: 3;
}
.wiki-search-input {
padding: 12px 46px 12px 16px;
font-size: 14px;
}
}
.ai-hero-features {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
margin-bottom: 32px;
}
.ai-hero-feature {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 30px;
padding: 8px 16px;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}
.ai-hero-feature-icon {
display: flex;
align-items: center;
justify-content: center;
color: #ff9d2f;
flex-shrink: 0;
}
.ai-hero-actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.ai-hero-link {
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
text-decoration: none;
transition: color 0.3s;
}
.ai-hero-link:hover {
color: #ff9d2f;
}
.ai-hero-link .arrow {
transition: transform 0.3s;
display: inline-block;
}
.ai-hero-link:hover .arrow {
transform: translateX(4px);
}
.ai-hero-illustration {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
height: auto;
}
.ai-hero.hero-section-2 {
height: auto;
min-height: 60vh;
padding: 80px 50px;
overflow: visible;
}
.ai-hero .hero-left h1 {
font-size: 36px;
margin-bottom: 16px;
line-height: 1.2;
}
.ai-hero .hero-left p {
font-size: 16px;
margin-bottom: 20px;
}
.ai-hero .hero-right {
height: auto;
min-height: 280px;
}
.ai-hero .hero-container {
align-items: center;
}
.ai-hero .ai-hero-features {
gap: 10px;
margin-top: 20px;
margin-bottom: 24px;
}
.ai-hero .ai-hero-feature {
font-size: 13px;
padding: 6px 12px;
}
@media (max-width: 768px) {
.ai-hero.hero-section-2 {
padding: 100px 20px 50px 20px;
min-height: auto;
}
.ai-hero .hero-left h1 {
font-size: 28px;
}
.ai-hero .hero-left p {
font-size: 15px;
}
.ai-hero .hero-right {
min-height: 200px;
height: 200px;
}
}
.ai-note-section {
padding: 0;
background: #f8f9fa;
}
.ai-note {
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 10px;
overflow: hidden;
margin: 0 auto;
max-width: 900px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}
.ai-note-header {
background: linear-gradient(to right, #6d26e8, #8b5cf6);
padding: 18px 28px;
}
.ai-note-header h3 {
color: #ffffff;
font-size: 17px;
font-weight: 700;
margin: 0;
}
.ai-note-body {
padding: 18px 28px;
}
.ai-note-body p {
color: #64748b;
font-size: 15px;
margin: 0;
line-height: 1.6;
}
.ai-features-section {
padding: 60px 20px;
background: #f1f5f9;
}
.ai-features-section .section-title {
font-size: 36px;
font-weight: 700;
color: #1e293b;
margin-bottom: 60px;
}
.ai-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.ai-feature-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 12px;
padding: 30px;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
position: relative;
overflow: hidden;
border: 1px solid rgba(226, 232, 240, 0.8);
}
.ai-feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-color: rgba(139, 92, 246, 0.3);
}
.ai-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
opacity: 0;
transition: opacity 0.3s ease;
}
.ai-feature-card:hover::before {
opacity: 1;
}
.ai-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin-bottom: 25px;
}
.ai-feature-icon svg {
width: 60px;
height: 60px;
transition: transform 0.3s ease;
color: #6d26e8;
}
.ai-feature-card:hover .ai-feature-icon svg {
transform: scale(1.1);
}
.ai-feature-card h3 {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin: 0 0 15px 0;
position: relative;
padding-bottom: 15px;
}
.ai-feature-card h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
transition: width 0.3s ease;
}
.ai-feature-card:hover h3::after {
width: 60px;
}
.ai-feature-card p {
font-size: 16px;
color: #64748b;
line-height: 1.6;
margin: 0;
}
.ai-steps-section {
padding: 60px 20px;
background: #f8f9fa;
}
.ai-steps-section .section-title {
font-size: 36px;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.ai-steps-section .section-subtitle {
font-size: 18px;
color: #64748b;
max-width: 700px;
margin: 0 auto 50px;
line-height: 1.6;
}
.ai-steps {
display: flex;
gap: 30px;
max-width: 1000px;
margin: 0 auto;
align-items: flex-start;
}
.ai-step {
flex: 1;
display: flex;
gap: 20px;
align-items: flex-start;
}
.ai-step-num {
flex-shrink: 0;
width: 56px;
height: 56px;
background: linear-gradient(to right, #f7931e, #ff9d2f);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
color: #ffffff;
}
.ai-step-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.ai-step-text {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
.ai-included-section {
padding: 60px 20px;
background: #f1f5f9;
}
.ai-included-section .section-title {
font-size: 36px;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.ai-included-section .section-subtitle {
font-size: 18px;
color: #64748b;
max-width: 700px;
margin: 0 auto 50px;
line-height: 1.6;
}
.ai-included-grid {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
max-width: 1000px;
margin: 0 auto;
}
.ai-included-card {
width: 280px;
border-radius: 15px;
background: #ffffff;
padding: 36px 30px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(226, 232, 240, 0.8);
position: relative;
overflow: hidden;
}
.ai-included-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, #f7931e, #ff9d2f);
opacity: 0;
transition: opacity 0.3s ease;
}
.ai-included-card:hover::before {
opacity: 1;
}
.ai-included-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-color: rgba(247, 147, 30, 0.3);
}
.ai-included-icon {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(to right, #f7931e, #ff9d2f);
border-radius: 50%;
margin: 0 auto 20px;
color: #ffffff;
}
.ai-included-card h3 {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 10px;
}
.ai-included-card p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
margin: 0;
}
@media (max-width: 992px) {
.ai-features-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-gap: 30px;
}
.ai-steps {
flex-direction: column;
gap: 24px;
}
.ai-included-grid {
gap: 20px;
}
}
@media (max-width: 768px) {
.ai-hero-features {
gap: 10px;
}
.ai-hero-feature {
font-size: 13px;
padding: 6px 12px;
}
.ai-features-section {
padding: 60px 15px;
}
.ai-features-section .section-title {
font-size: 28px;
}
.ai-features-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.ai-feature-card {
padding: 24px 20px;
}
.ai-steps-section {
padding: 60px 15px;
}
.ai-steps-section .section-title {
font-size: 28px;
}
.ai-included-section {
padding: 60px 15px;
}
.ai-included-section .section-title {
font-size: 28px;
}
.ai-included-grid {
flex-direction: column;
align-items: center;
gap: 20px;
}
.ai-included-card {
width: 100%;
max-width: 350px;
}
.ai-note {
margin: 0 15px;
}
}
@media (max-width: 480px) {
.ai-hero-features {
flex-direction: column;
gap: 8px;
}
.ai-hero-feature {
width: 100%;
}
.ai-hero-actions {
flex-direction: column;
align-items: flex-start;
}
.ai-features-grid {
grid-template-columns: 1fr;
}
.ai-feature-card {
padding: 20px 16px;
}
.ai-step-num {
width: 44px;
height: 44px;
font-size: 18px;
}
.ai-step-title {
font-size: 16px;
}
.ai-note-header {
padding: 14px 20px;
}
.ai-note-header h3 {
font-size: 15px;
}
.ai-note-body {
padding: 14px 20px;
}
}
.requisites-section {
padding: 60px 20px;
background-color: #f8f9fa;
}
.requisites-container {
max-width: 900px;
margin: 0 auto;
}
.requisites-section h2 {
font-size: 32px;
font-weight: 700;
color: #1e293b;
text-align: center;
margin-bottom: 15px;
}
.requisites-section p {
font-size: 18px;
color: #64748b;
text-align: center;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.requisites-list {
display: flex;
flex-direction: column;
gap: 0;
}
.requisites-item {
display: flex;
align-items: center;
padding: 16px 20px;
background: #ffffff;
border-bottom: 1px solid #f1f5f9;
transition: background 0.2s;
}
.requisites-item:first-child {
border-radius: 12px 12px 0 0;
}
.requisites-item:last-child {
border-radius: 0 0 12px 12px;
border-bottom: none;
}
.requisites-item:hover {
background: #f8f9ff;
}
.requisites-label {
font-size: 14px;
font-weight: 600;
color: #64748b;
min-width: 200px;
flex-shrink: 0;
}
.requisites-value {
font-size: 15px;
font-weight: 600;
color: #1e293b;
flex: 1;
word-break: break-word;
}
.requisites-copy {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
color: #94a3b8;
transition: all 0.2s;
flex-shrink: 0;
margin-left: 12px;
}
.requisites-copy:hover {
background: rgba(109, 38, 232, 0.08);
color: #6d26e8;
}
.requisites-copy.copied {
color: #22c55e;
background: rgba(34, 197, 94, 0.08);
}
.requisites-copy svg {
width: 18px;
height: 18px;
}
.requisites-header-row {
display: flex;
align-items: center;
padding: 14px 20px;
background: linear-gradient(135deg, #2f365f 0%, #3d4574 100%);
border-radius: 12px 12px 0 0;
}
.requisites-header-row span:first-child {
min-width: 200px;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.requisites-header-row span:last-child {
flex: 1;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.requisites-header-row + .requisites-item:first-child {
border-radius: 0;
}
@media (max-width: 768px) {
.requisites-section {
padding: 40px 15px;
}
.requisites-section h2 {
font-size: 28px;
}
.requisites-section p {
font-size: 16px;
margin-bottom: 30px;
}
.requisites-item {
padding: 12px 15px;
flex-wrap: wrap;
gap: 4px;
}
.requisites-label {
font-size: 13px;
min-width: 100%;
color: #94a3b8;
}
.requisites-value {
font-size: 14px;
}
.requisites-copy {
width: 30px;
height: 30px;
}
.requisites-header-row {
display: none;
}
}
@media (max-width: 480px) {
.requisites-section {
padding: 30px 10px;
}
.requisites-section h2 {
font-size: 24px;
}
.requisites-section p {
font-size: 14px;
}
.requisites-item {
padding: 10px 12px;
}
.requisites-label {
font-size: 12px;
}
.requisites-value {
font-size: 13px;
}
}
.doc-list-section {
padding: 60px 0;
background: #f4f5fa;
}
.doc-list-header {
text-align: center;
margin-bottom: 40px;
}
.doc-list-header h2 {
font-size: 32px;
color: #2d3748;
margin: 0 0 12px;
}
.doc-list-header p {
font-size: 16px;
color: #718096;
margin: 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.doc-list-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 960px;
margin: 0 auto;
}
.doc-list-card {
background: #ffffff;
border-radius: 16px;
padding: 28px 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-decoration: none;
display: block;
}
.doc-list-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #6d26e8, #ff9d2f);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.doc-list-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(109, 38, 232, 0.12);
}
.doc-list-card:hover::before {
transform: scaleX(1);
}
.doc-list-card-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(109, 38, 232, 0.1), rgba(255, 157, 47, 0.1));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.doc-list-card-icon svg {
width: 24px;
height: 24px;
color: #6d26e8;
}
.doc-list-card h3 {
font-size: 17px;
color: #2d3748;
margin: 0 0 10px;
font-weight: 600;
}
.doc-list-card p {
font-size: 14px;
color: #718096;
line-height: 1.5;
margin: 0;
}
.doc-list-card-arrow {
position: absolute;
right: 20px;
bottom: 20px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(109, 38, 232, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.doc-list-card-arrow svg {
width: 16px;
height: 16px;
color: #6d26e8;
transition: transform 0.3s ease;
}
.doc-list-card:hover .doc-list-card-arrow {
background: #6d26e8;
}
.doc-list-card:hover .doc-list-card-arrow svg {
color: #ffffff;
transform: translateX(2px);
}
@media (max-width: 992px) {
.doc-list-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.doc-list-header h2 {
font-size: 28px;
}
.doc-list-header p {
font-size: 15px;
}
.doc-list-card {
padding: 24px 22px;
}
.doc-list-card h3 {
font-size: 16px;
}
.doc-list-card p {
font-size: 13px;
}
}
@media (max-width: 768px) {
.doc-list-section {
padding: 50px 0;
}
.doc-list-header {
margin-bottom: 30px;
}
.doc-list-header h2 {
font-size: 24px;
}
.doc-list-header p {
font-size: 14px;
}
.doc-list-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.doc-list-card {
padding: 20px 18px;
border-radius: 14px;
}
.doc-list-card-icon {
width: 42px;
height: 42px;
border-radius: 10px;
margin-bottom: 14px;
}
.doc-list-card-icon svg {
width: 20px;
height: 20px;
}
.doc-list-card h3 {
font-size: 15px;
margin-bottom: 8px;
}
.doc-list-card p {
font-size: 13px;
line-height: 1.45;
padding-right: 28px;
}
.doc-list-card-arrow {
right: 16px;
bottom: 16px;
width: 28px;
height: 28px;
}
.doc-list-card-arrow svg {
width: 14px;
height: 14px;
}
}
@media (max-width: 520px) {
.doc-list-section {
padding: 40px 0;
}
.doc-list-header {
margin-bottom: 24px;
}
.doc-list-header h2 {
font-size: 22px;
}
.doc-list-header p {
font-size: 13px;
}
.doc-list-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.doc-list-card {
padding: 20px 20px 48px;
border-radius: 12px;
}
.doc-list-card::before {
height: 3px;
}
.doc-list-card-icon {
width: 44px;
height: 44px;
border-radius: 11px;
margin-bottom: 14px;
}
.doc-list-card-icon svg {
width: 22px;
height: 22px;
}
.doc-list-card h3 {
font-size: 16px;
margin-bottom: 6px;
}
.doc-list-card p {
font-size: 14px;
line-height: 1.5;
padding-right: 0;
}
.doc-list-card-arrow {
right: 16px;
bottom: 16px;
width: 30px;
height: 30px;
}
}
.doc-content h1 {
font-size: 30px;
color: #2d3748;
margin: 0 0 25px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f5;
position: relative;
}
.doc-content h1::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: linear-gradient(90deg, #6d26e8, #ff9d2f);
border-radius: 2px;
}
.wiki-article-img {
display: block;
max-width: 100%;
height: auto;
margin: 25px auto;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.wiki-table-wrap {
overflow-x: auto;
margin: 20px 0;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.wiki-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.wiki-table thead {
background: linear-gradient(135deg, #6d26e8, #5b21b6);
}
.wiki-table thead th {
padding: 14px 18px;
color: #fff;
font-weight: 600;
text-align: left;
white-space: nowrap;
}
.wiki-table thead th:first-child {
border-radius: 12px 0 0 0;
}
.wiki-table thead th:last-child {
border-radius: 0 12px 0 0;
}
.wiki-table tbody tr {
transition: background 0.2s ease;
}
.wiki-table tbody tr:nth-child(even) {
background: #f8f9fc;
}
.wiki-table tbody tr:hover {
background: #ede9fe;
}
.wiki-table td {
padding: 12px 18px;
border-bottom: 1px solid #e2e8f0;
color: #4a5568;
line-height: 1.5;
}
.wiki-table td b {
color: #2d3748;
}
.wiki-note {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
padding: 18px 22px;
margin: 25px 0;
border-left: 4px solid #38bdf8;
border-radius: 0 12px 12px 0;
font-size: 14px;
line-height: 1.6;
color: #334155;
}
.wiki-note b {
color: #0284c7;
}
@media (max-width: 768px) {
.doc-content h1 {
font-size: 24px;
}
.wiki-table {
font-size: 13px;
}
.wiki-table thead th,
.wiki-table td {
padding: 10px 12px;
}
.wiki-note {
padding: 14px 16px;
}
}
@media (max-width: 520px) {
.doc-content h1 {
font-size: 20px;
}
.wiki-table thead th,
.wiki-table td {
padding: 8px 10px;
font-size: 12px;
}
}
.wiki-code-block {
background: #1e1e2e;
border-radius: 12px;
margin: 20px 0;
overflow: hidden;
}
.wiki-code-block pre {
margin: 0;
padding: 20px;
overflow-x: auto;
}
.wiki-code-block code {
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
font-size: 13px;
line-height: 1.7;
color: #cdd6f4;
}
.doc-text code {
background: #f1f5f9;
color: #6d26e8;
padding: 2px 6px;
border-radius: 4px;
font-size: 13px;
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
@media (max-width: 768px) {
.doc-content h1 {
font-size: 24px;
}
}
/* ===== Partner Page ===== */
.partner-hero-svg {
width: 200px;
height: auto;
filter: drop-shadow(0 10px 30px rgba(109, 38, 232, 0.2));
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.outline-btn {
display: inline-block;
padding: 15px 40px;
border: 2px solid transparent;
border-radius: 30px;
color: #ffffff;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
margin-top: 15px;
background: linear-gradient(135deg, var(--purple), var(--purple-light));
}
.outline-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(109, 38, 232, 0.4);
}
.section-subtitle {
text-align: center;
font-size: 18px;
color: #64748b;
max-width: 700px;
margin: 0 auto 40px;
line-height: 1.6;
}
.sec-heading {
text-align: center;
margin-bottom: 40px;
}
.sec-heading h2 {
font-size: 36px;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
}
.sec-heading p {
font-size: 16px;
color: #64748b;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.partner-muted-section {
padding: 60px 20px;
background: #f1f5f9;
}
.pp-formula-wrap {
margin-top: 48px;
display: flex;
justify-content: center;
}
.pp-formula-box {
background: #ffffff;
border-radius: 16px;
padding: 40px;
max-width: 600px;
width: 100%;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(226, 232, 240, 0.8);
}
.pp-formula-box h3 {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.pp-formula-box p {
color: #64748b;
font-size: 15px;
margin-bottom: 20px;
}
.pp-formula {
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
color: #ffffff;
padding: 16px 24px;
border-radius: 12px;
font-size: 18px;
margin-bottom: 16px;
}
.pp-formula-note {
font-size: 14px !important;
color: #94a3b8 !important;
margin-bottom: 0 !important;
}
.pp-accent {
color: #ff9d2f;
}
/* Earn Tabs */
.earn-tabs {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 32px;
}
.earn-tab-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: 2px solid #e2e8f0;
border-radius: 50px;
background: #ffffff;
font-size: 15px;
font-weight: 600;
color: #475569;
cursor: pointer;
transition: all 0.3s ease;
}
.earn-tab-btn:hover {
border-color: #6d26e8;
color: #6d26e8;
}
.earn-tab-btn.is-active {
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
color: #ffffff;
border-color: transparent;
}
.earn-tab-icon {
font-size: 18px;
}
/* Earn Panels */
.earn-panels {
max-width: 900px;
margin: 0 auto;
}
.earn-panel {
display: none;
gap: 32px;
background: #ffffff;
border-radius: 16px;
padding: 32px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(226, 232, 240, 0.8);
}
.earn-panel.is-active {
display: grid;
grid-template-columns: 1fr 1fr;
}
.earn-panel__label {
font-size: 14px;
color: #64748b;
margin-bottom: 4px;
}
.earn-panel__title {
font-size: 22px;
font-weight: 700;
color: #1e293b;
margin-bottom: 24px;
}
.earn-price-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
}
.earn-price-row__label {
color: #64748b;
font-size: 14px;
}
.earn-price-row__val {
font-weight: 600;
color: #1e293b;
font-size: 15px;
}
.earn-price-row--profit {
border-bottom: none;
margin-top: 4px;
}
.earn-price-row--profit .earn-price-row__label {
color: #6d26e8;
font-weight: 700;
}
.earn-price-row--profit .earn-price-row__val {
color: #ff9d2f;
font-size: 18px;
font-weight: 700;
}
.earn-panel__badge {
position: absolute;
top: -8px;
right: 12px;
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
color: #ffffff;
font-size: 11px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
}
.earn-scale-card {
position: relative;
padding: 16px;
background: #f8fafc;
border-radius: 12px;
margin-bottom: 12px;
}
.earn-scale-card__clients {
font-size: 13px;
color: #64748b;
margin-bottom: 4px;
}
.earn-scale-card__income {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.earn-scale-card__income span {
font-size: 13px;
font-weight: 400;
color: #94a3b8;
}
.earn-scale-bar {
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
}
.earn-scale-bar__fill {
height: 100%;
background: linear-gradient(90deg, #6d26e8, #ff9d2f);
border-radius: 4px;
transition: width 0.6s ease;
}
/* Earn Total Grid */
.earn-total-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 900px;
margin: 32px auto 0;
}
.earn-total-card {
background: #ffffff;
border-radius: 16px;
padding: 32px 24px;
text-align: center;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.earn-total-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.earn-total-card--featured {
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
color: #ffffff;
border-color: transparent;
transform: scale(1.05);
}
.earn-total-card--featured:hover {
transform: scale(1.05) translateY(-5px);
box-shadow: 0 15px 40px rgba(109, 38, 232, 0.3);
}
.earn-total-card__tier {
font-size: 16px;
font-weight: 600;
opacity: 0.8;
margin-bottom: 8px;
}
.earn-total-card--featured .earn-total-card__tier {
color: rgba(255, 255, 255, 0.8);
}
.earn-total-card__amount {
font-size: 32px;
font-weight: 800;
color: #1e293b;
margin-bottom: 12px;
}
.earn-total-card--featured .earn-total-card__amount {
color: #ffffff;
}
.earn-total-card__desc {
font-size: 14px;
color: #64748b;
line-height: 1.5;
}
.earn-total-card--featured .earn-total-card__desc {
color: rgba(255, 255, 255, 0.8);
}
.earn-total-card--featured .earn-total-card__desc strong {
color: #ffffff;
}
/* Partner Two Column */
.partner-two-col {
display: flex;
align-items: center;
gap: 48px;
}
.partner-two-col__img {
flex: 0 0 30%;
text-align: center;
}
.partner-section-img,
.partner-section-svg {
max-width: 220px;
height: auto;
}
.partner-two-col__content {
flex: 1;
}
.partner-two-col__content h2 {
font-size: 32px;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
}
.partner-text-muted {
color: #64748b;
line-height: 1.65;
margin-bottom: 24px;
font-size: 15px;
}
/* Partner Icon Grid */
.partner-icon-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.partner-icon-grid--2col {
grid-template-columns: repeat(2, 1fr);
}
.partner-icon-item {
padding: 16px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.partner-muted-section .partner-icon-item {
background: #ffffff;
}
.partner-icon-item:hover {
border-color: rgba(109, 38, 232, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.partner-icon-item h6 {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin-bottom: 6px;
}
.partner-icon-item p {
font-size: 13px;
color: #64748b;
line-height: 1.5;
margin: 0;
}
/* Partner Variants */
.partner-variants-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 800px;
margin: 0 auto;
}
.partner-variant-card {
background: #ffffff;
border-radius: 16px;
padding: 32px;
border: 1px solid #e2e8f0;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.partner-variant-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.partner-variant-card h3 {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
}
.partner-variant-card p {
color: #64748b;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.partner-variant-card--featured {
background: linear-gradient(135deg, rgba(109, 38, 232, 0.05), rgba(139, 92, 246, 0.05));
border-color: rgba(109, 38, 232, 0.2);
}
.partner-variant-card--featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(135deg, #6d26e8, #ff9d2f);
}
.highlight-badge {
position: absolute;
top: 16px;
right: 16px;
background: linear-gradient(135deg, #6d26e8, #8b5cf6);
color: #ffffff;
font-size: 12px;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
}
.partner-note {
text-align: center;
font-size: 14px;
color: #94a3b8;
margin-top: 16px;
}
/* ===== Partner Page Responsive ===== */
@media (max-width: 992px) {
.partner-two-col {
flex-direction: column;
gap: 32px;
}
.partner-two-col__img {
flex: none;
width: 100%;
max-width: 220px;
margin: 0 auto;
}
.earn-panel.is-active {
grid-template-columns: 1fr;
}
.earn-total-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
.earn-total-card--featured {
transform: none;
}
.earn-total-card--featured:hover {
transform: translateY(-5px);
}
.partner-variants-grid {
grid-template-columns: 1fr;
}
.partner-icon-grid--2col {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.hero-actions {
flex-direction: column;
gap: 12px;
}
.outline-btn {
text-align: center;
}
.sec-heading h2 {
font-size: 28px;
}
.earn-tab-btn {
padding: 10px 16px;
font-size: 13px;
}
.earn-panel {
padding: 20px;
}
.pp-formula-box {
padding: 24px;
}
.pp-formula {
font-size: 15px;
padding: 12px 16px;
}
.partner-two-col__content h2 {
font-size: 26px;
}
}
@media (max-width: 480px) {
.earn-tabs {
flex-direction: column;
align-items: stretch;
}
.earn-tab-btn {
justify-content: center;
}
.earn-scale-card__income {
font-size: 18px;
}
.earn-total-card__amount {
font-size: 26px;
}
.partner-variant-card {
padding: 24px;
}
}