*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg:          #030308;
--purple:      #a855f7;
--purple-d:    #7c3aed;
--text:        #f1f5f9;
--muted:       #94a3b8;
--card:        rgba(255,255,255,.04);
--border:      rgba(255,255,255,.08);
}
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow-x: hidden;
}
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.hero {
position: relative;
min-height: 100vh;
display: flex; align-items: center;
padding-bottom: 80px;
overflow: hidden;
}
.hero-glow {
position: absolute;
width: 900px; height: 650px;
top: 50%; left: 50%;
transform: translate(-50%,-55%);
background: radial-gradient(ellipse, rgba(139,92,246,.28) 0%, rgba(59,130,246,.1) 45%, transparent 70%);
pointer-events: none; z-index: 1;
}
.hero-inner { position: relative; z-index: 2; text-align: center; width: 100%; }
.hero-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 20px;
background: rgba(168,85,247,.1);
border: 1px solid rgba(168,85,247,.25);
border-radius: 100px;
font-size: .82rem; color: #c4b5fd; letter-spacing: .5px;
margin-bottom: 32px;
}
.hero-badge .dot {
width: 7px; height: 7px; background: var(--purple);
border-radius: 50%; box-shadow: 0 0 8px var(--purple);
animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .25; } }
.hero h1 {
font-size: clamp(3rem, 7vw, 5.8rem);
font-weight: 900; line-height: 1.08;
letter-spacing: -2px; margin-bottom: 26px;
}
.h1-top {
display: block;
background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.72) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.h1-accent {
display: block;
background: linear-gradient(90deg, #a855f7 0%, #818cf8 50%, #a855f7 100%);
background-size: 200%;
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
filter: drop-shadow(0 0 40px rgba(168,85,247,.65));
animation: shimmer 4s linear infinite;
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

.hero-sub {
font-size: 1.15rem; color: var(--muted); line-height: 1.8;
max-width: 500px; margin: 0 auto 48px;
}

.btn-main {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 40px;
background: linear-gradient(135deg, var(--purple-d), var(--purple));
color: #fff; font-weight: 700; font-size: .98rem;
border-radius: 50px; text-decoration: none;
position: relative; overflow: hidden;
box-shadow: 0 0 32px rgba(168,85,247,.45), 0 4px 20px rgba(168,85,247,.2);
transition: transform .25s, box-shadow .25s;
}
.btn-main::before {
content: '';
position: absolute; top: -50%; left: -80%;
width: 50%; height: 200%;
background: rgba(255,255,255,.18);
transform: skewX(-20deg);
animation: shine 3.5s ease-in-out infinite;
}
@keyframes shine { 0%,100% { left: -80%; } 35% { left: 160%; } }
.btn-main:hover {
transform: translateY(-4px);
box-shadow: 0 0 54px rgba(168,85,247,.65), 0 8px 32px rgba(168,85,247,.3);
}
.hero-wave {
position: absolute; bottom: -2px; left: 0; right: 0;
line-height: 0; z-index: 3; pointer-events: none;
}
.hero-wave svg { display: block; width: 100%; }
.orb {
position: absolute; border-radius: 50%;
pointer-events: none; z-index: 2;
animation: orbf 6s ease-in-out infinite alternate;
}
@keyframes orbf { to { transform: translateY(-22px); } }
main { position: relative; z-index: 1; background: var(--bg); }
.section    { padding: 90px 0; }
.section-sm { padding: 60px 0; }
.s-head { text-align: center; margin-bottom: 52px; }
.s-tag {
display: inline-block; padding: 4px 14px;
background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.22);
border-radius: 100px; font-size: .72rem; font-weight: 600;
color: #c4b5fd; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px;
}
.s-head h2 {
font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -.5px;
background: linear-gradient(135deg, #fff 25%, #c4b5fd 85%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.s-head p { margin-top: 14px; font-size: .95rem; color: var(--muted); max-width: 480px; margin-inline: auto; line-height: 1.7; }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 20px; }
.stat-card {
position: relative;
background: var(--card); border: 1px solid rgba(168,85,247,.18);
border-radius: 26px; padding: 36px 24px; text-align: center;
backdrop-filter: blur(18px); overflow: hidden;
transition: transform .3s, border-color .3s, box-shadow .3s;
}
.stat-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(168,85,247,.07) 0%, transparent 55%);
}
.stat-card::after {
content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(168,85,247,.5), transparent);
}
.stat-card:hover { transform: translateY(-6px); border-color: rgba(168,85,247,.4); box-shadow: 0 16px 50px rgba(139,92,246,.22); }
.stat-val {
font-size: 2.5rem; font-weight: 900;
background: linear-gradient(135deg, #fff, #c4b5fd);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-bottom: 10px; position: relative;
}
.stat-lbl { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .9px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.fc {
background: var(--card); border: 1px solid var(--border);
border-radius: 22px; padding: 30px 26px; backdrop-filter: blur(10px);
position: relative; overflow: hidden;
transition: transform .35s, border-color .35s, box-shadow .35s;
}
.fc::after {
content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(168,85,247,.35), transparent);
opacity: 0; transition: opacity .35s;
}
.fc:hover { transform: translateY(-6px); border-color: rgba(168,85,247,.3); box-shadow: 0 18px 55px rgba(139,92,246,.18); }
.fc:hover::after { opacity: 1; }
.fc-ico {
width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.18);
border-radius: 14px; margin-bottom: 18px;
}
.fc h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.fc p  { font-size: .88rem; color: var(--muted); line-height: 1.7; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(308px, 1fr)); gap: 18px; }
.hl-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 24px; padding: 36px 30px; backdrop-filter: blur(10px);
position: relative; overflow: hidden;
transition: transform .35s, border-color .35s, box-shadow .35s;
}
.hl-card:hover { transform: translateY(-5px); border-color: rgba(168,85,247,.3); box-shadow: 0 18px 55px rgba(139,92,246,.18); }
.hl-card::before {
content: ''; position: absolute; bottom: -60px; right: -60px;
width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(139,92,246,.12) 0%, transparent 70%);
pointer-events: none;
}
.hl-tag {
display: inline-block; padding: 4px 12px;
background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.22);
border-radius: 100px; font-size: .73rem; color: #c4b5fd;
font-weight: 500; letter-spacing: .3px; margin-bottom: 18px;
}
.hl-card h3 { font-size: 1.08rem; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.hl-card p  { font-size: .88rem; color: var(--muted); line-height: 1.75; position: relative; }
.rm-wrap { position: relative; max-width: 900px; margin: 0 auto; }
.rm-line {
position: absolute; left: 50%; top: 20px; bottom: 20px;
width: 1px; transform: translateX(-50%);
background: linear-gradient(to bottom, transparent, rgba(168,85,247,.4) 8%, rgba(168,85,247,.4) 92%, transparent);
}
.rm-row { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: flex-start; margin-bottom: 44px; }
.rm-row:last-child { margin-bottom: 0; }
.rm-l { padding-right: 24px; text-align: right; }
.rm-r { padding-left: 24px; text-align: left; }
.rm-mid { display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.rm-dot {
width: 48px; height: 48px; border-radius: 50%;
background: rgba(168,85,247,.1); border: 2px solid rgba(168,85,247,.35);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; position: relative; z-index: 1;
transition: border-color .3s, box-shadow .3s, background .3s;
}
.rm-row:hover .rm-dot { border-color: var(--purple); background: rgba(168,85,247,.2); box-shadow: 0 0 22px rgba(168,85,247,.5); }
.rm-dot-now { border-color: var(--purple); animation: ripple 2.5s ease-out infinite; }
@keyframes ripple {
0%   { box-shadow: 0 0 0 0   rgba(168,85,247,.55); }
70%  { box-shadow: 0 0 0 14px rgba(168,85,247,0);  }
100% { box-shadow: 0 0 0 0   rgba(168,85,247,0);   }
}
.rm-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 18px; padding: 20px 22px; backdrop-filter: blur(10px);
display: inline-block; width: 100%;
transition: border-color .3s, transform .3s, box-shadow .3s;
position: relative;
}
.rm-row:hover .rm-card { border-color: rgba(168,85,247,.3); transform: translateY(-3px); box-shadow: 0 10px 36px rgba(139,92,246,.16); }
.rm-card-now { border-color: rgba(168,85,247,.28); background: rgba(168,85,247,.05); }
.rm-l .rm-card::after {
content: ''; position: absolute; top: 18px; right: -8px;
width: 14px; height: 14px; background: #0a0a18;
border-top: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(255,255,255,.08);
transform: rotate(45deg);
}
.rm-r .rm-card::after {
content: ''; position: absolute; top: 18px; left: -8px;
width: 14px; height: 14px; background: #0a0a18;
border-bottom: 1px solid rgba(255,255,255,.08); border-left: 1px solid rgba(255,255,255,.08);
transform: rotate(45deg);
}
.rm-date { font-size: .7rem; font-weight: 700; color: var(--purple); letter-spacing: .7px; text-transform: uppercase; margin-bottom: 7px; }
.rm-card h3 { font-size: .94rem; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.rm-card p  { font-size: .84rem; color: var(--muted); line-height: 1.65; }
.faq-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
details.fq {
background: var(--card); border: 1px solid var(--border);
border-radius: 18px; backdrop-filter: blur(12px); overflow: hidden;
transition: border-color .3s, background .3s, box-shadow .3s;
}
details.fq[open] { border-color: rgba(168,85,247,.32); background: rgba(168,85,247,.04); box-shadow: 0 6px 30px rgba(139,92,246,.14); }
details.fq > summary { list-style: none; }
details.fq > summary::-webkit-details-marker { display: none; }
.fq-q {
display: flex; align-items: center; gap: 14px;
padding: 20px 26px; cursor: pointer; user-select: none;
font-weight: 600; font-size: .95rem; color: var(--text);
transition: color .25s;
}
details.fq[open] .fq-q { color: #c4b5fd; }
.fq-ico {
flex-shrink: 0; width: 30px; height: 30px;
background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.2);
border-radius: 8px; display: flex; align-items: center; justify-content: center;
font-size: .65rem; color: var(--purple); font-weight: 700;
transition: background .3s, border-color .3s;
}
details.fq[open] .fq-ico { background: rgba(168,85,247,.2); border-color: rgba(168,85,247,.42); }
.fq-arr { margin-left: auto; flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.fq-arr::before {
content: ''; width: 8px; height: 8px;
border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
transform: rotate(45deg) translateY(-2px); transition: transform .32s ease;
}
details.fq[open] .fq-arr::before { transform: rotate(-135deg) translateY(0); }
.fq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
details.fq[open] .fq-body { grid-template-rows: 1fr; }
.fq-a { overflow: hidden; font-size: .9rem; color: var(--muted); line-height: 1.75; padding: 0 26px 20px 70px; }
@media (max-width: 700px) {
.stats-grid { grid-template-columns: 1fr; }
.rm-line { left: 22px; }
.rm-row { grid-template-columns: 48px 1fr; grid-template-areas: "mid card"; }
.rm-l { display: none; }
.rm-r { grid-area: card; padding-left: 16px; text-align: left; }
.rm-mid { grid-area: mid; }
.rm-r .rm-card::after { display: none; }
.rm-dot { width: 40px; height: 40px; font-size: .95rem; }
}
.cookie-popup {
position: fixed;
bottom: 24px;
right: 24px;
width: 360px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 22px;
padding: 24px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 9999;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4), 0 0 20px rgba(168, 85, 247, 0.1);
transform: translateX(120%);
opacity: 0;
pointer-events: none;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.cookie-popup.show {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.cookie-popup::before {
content: '';
position: absolute;
top: 0; left: 15%; right: 15%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(168,85,247,.5), transparent);
}
.cookie-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.cookie-ico {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(168, 85, 247, 0.1);
border: 1px solid rgba(168, 85, 247, 0.2);
border-radius: 12px;
font-size: 1.1rem;
}
.cookie-title {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.cookie-text {
font-size: 0.86rem;
color: var(--muted);
line-height: 1.6;
margin-bottom: 20px;
}
.cookie-actions {
display: flex;
gap: 10px;
}
.cookie-btn {
font-family: inherit;
border-radius: 50px;
padding: 10px 18px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
border: none;
}
.cookie-accept {
flex: 1;
background: linear-gradient(135deg, var(--purple-d), var(--purple));
color: #fff;
box-shadow: 0 4px 15px rgba(168, 85, 247, 0.25);
}
.cookie-accept:hover {
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(168, 85, 247, 0.45);
}
.cookie-close {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
color: var(--muted);
}
.cookie-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text);
}
@media (max-width: 480px) {
.cookie-popup {
right: 16px;
left: 16px;
bottom: 16px;
width: auto;
padding: 20px;
}
}