/* ===========================
   BlockedSpace Design System
   =========================== */

:root{
--bg:#08080D;
--bg-soft:#0F1018;
--surface:#12131D;
--surface-hover:#181A27;
--stroke:rgba(255,255,255,.08);
--stroke-strong:rgba(255,255,255,.16);
--text:#F6F7FB;
--text-secondary:#A8ADC3;
--text-muted:#70758A;
--primary:#8B5CF6;
--primary-hover:#9D73FF;
--primary-soft:rgba(139,92,246,.14);
--success:#34D399;
--danger:#F87171;
--shadow:0 18px 60px rgba(0,0,0,.45);
--radius-sm:12px;
--radius-md:18px;
--radius-lg:24px;
--radius-xl:32px;
--header-height:68px;
--container:1240px;
}

*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:"Inter",sans-serif;
background:#0A0A12;
color:var(--text);
line-height:1.55;
overflow-x:hidden;
}

body.modal-open{
overflow:hidden;
}

img{
display:block;
max-width:100%;
}

a{
text-decoration:none;
color:inherit;
}

button,
input,
textarea{
font:inherit;
}

button{
border:none;
cursor:pointer;
background:none;
}

/* ===========================
   Background
   =========================== */

#matrixCanvas{
position:fixed;
inset:0;
width:100%;
height:100%;
pointer-events:none;
opacity:.08;
z-index:-2;
}

body::before{
content:none;
}

/* ===========================
   Layout
   =========================== */

.container{
width:min(var(--container),calc(100% - 48px));
margin:0 auto;
}

.section{
padding:96px 0;
position:relative;
}

.section--dark{
background:linear-gradient(180deg,#0C0D14 0%,#090A10 100%);
border-top:1px solid rgba(255,255,255,.04);
border-bottom:1px solid rgba(255,255,255,.04);
}

.section__header{
max-width:760px;
margin:0 auto 56px;
text-align:center;
}

.section__eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
border-radius:999px;
background:var(--primary-soft);
border:1px solid rgba(139,92,246,.22);
color:#CBB5FF;
font-size:12px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:18px;
}

.section__title{
font-size:clamp(34px,4vw,54px);
line-height:1.08;
font-weight:800;
letter-spacing:-.04em;
margin-bottom:18px;
}

.section__subtitle{
font-size:18px;
color:var(--text-secondary);
line-height:1.7;
}

/* ===========================
   Header
   =========================== */

.header{
position:relative;
top:auto;
z-index:1000;
height:var(--header-height);
backdrop-filter:blur(20px);
background:rgba(8,8,13,.72);
border-bottom:1px solid rgba(255,255,255,.06);
}

.header__inner{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:32px;
}

.logo{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}

.logo__img{
width:34px;
height:34px;
object-fit:contain;
}

.logo__text{
font-size:22px;
font-weight:800;
letter-spacing:-.03em;
}

.logo__highlight{
color:var(--primary);
}

.nav{
display:flex;
align-items:center;
gap:28px;
}

.nav__link{
position:relative;
font-size:14px;
font-weight:500;
color:var(--text-secondary);
transition:.25s;
}

.nav__link:hover{
color:var(--text);
}

.nav__link::after{
content:"";
position:absolute;
left:50%;
bottom:-8px;
width:0;
height:2px;
background:var(--primary);
border-radius:999px;
transform:translateX(-50%);
transition:.25s;
}

.nav__link:hover::after{
width:100%;
}

.header__actions{
display:flex;
align-items:center;
gap:10px;
}

#guestActions,
#userActions{
display:flex;
align-items:center;
gap:10px;
}

.hidden{
display:none!important;
}

/* ===========================
   Buttons
   =========================== */

.btn,
.nav__btn{
height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 18px;
border-radius:999px;
font-size:14px;
font-weight:600;
line-height:1;
transition:.25s;
white-space:nowrap;
}

.nav__btn{
color:var(--text-secondary);
}

.nav__btn:hover{
color:var(--text);
background:rgba(255,255,255,.05);
}

.btn--primary,
.btn--primary-small{
background:linear-gradient(135deg,#8B5CF6,#6D28D9);
color:white;
box-shadow:0 10px 35px rgba(139,92,246,.28);
}

.btn--primary:hover,
.btn--primary-small:hover{
transform:translateY(-1px);
box-shadow:0 16px 45px rgba(139,92,246,.36);
}

.btn--outline{
border:1px solid var(--stroke-strong);
background:rgba(255,255,255,.02);
color:var(--text);
}

.btn--outline:hover{
background:rgba(255,255,255,.06);
border-color:rgba(139,92,246,.35);
}

.btn--full{
width:100%;
}

.burger{
display:none;
width:42px;
height:42px;
border-radius:12px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
}

.burger span{
width:18px;
height:2px;
background:#fff;
border-radius:999px;
transition:.3s;
}

.burger.active span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}

.burger.active span:nth-child(2){
opacity:0;
}

.burger.active span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}

/* ===========================
   Mobile Navigation
   =========================== */

.mobile-nav{
position:fixed;
top:var(--header-height);
left:0;
right:0;
background:#0B0C12;
border-bottom:1px solid rgba(255,255,255,.06);
display:flex;
flex-direction:column;
padding:18px 24px;
gap:14px;
transform:translateY(-120%);
transition:.35s;
z-index:999;
}

.mobile-nav.active{
transform:translateY(0);
}

.mobile-nav a{
padding:12px 0;
font-weight:500;
color:var(--text-secondary);
}

.mobile-nav button{
width:100%;
}

/* ===========================
   Reveal Animation
   =========================== */

.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .6s ease,transform .6s ease;
}

.reveal.is-visible{
opacity:1;
transform:translateY(0);
}
/* =========================================================
   HERO
   ========================================================= */

.hero{
padding:72px 0 96px;
min-height:calc(100vh - var(--header-height));
display:flex;
align-items:center;
position:relative;
overflow:hidden;
}

.hero::before{
content:none;
position:absolute;
top:-260px;
right:-180px;
width:620px;
height:620px;
background:radial-gradient(circle,rgba(139,92,246,.16),transparent 70%);
filter:blur(40px);
pointer-events:none;
}

.hero::after{
content:"";
position:absolute;
bottom:-220px;
left:-180px;
width:520px;
height:520px;
background:radial-gradient(circle,rgba(91,62,255,.08),transparent 75%);
filter:blur(55px);
pointer-events:none;
}

.hero__inner{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:72px;
align-items:center;
}

.hero__content{
max-width:620px;
z-index:2;
}

.hero__badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 16px;
margin-bottom:26px;
background:rgba(139,92,246,.10);
border:1px solid rgba(139,92,246,.22);
border-radius:999px;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
color:#CBB5FF;
text-transform:uppercase;
}

.hero__badge-dot{
width:8px;
height:8px;
border-radius:50%;
background:#8B5CF6;
box-shadow:0 0 12px #8B5CF6;
}

.hero__title{
font-size:clamp(48px,6vw,76px);
font-weight:900;
line-height:.96;
letter-spacing:-.06em;
margin-bottom:26px;
}

.hero__title-highlight{
display:block;
margin-top:8px;
background:linear-gradient(135deg,#A78BFA 0%,#8B5CF6 45%,#6D28D9 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.hero__desc{
font-size:18px;
line-height:1.8;
color:var(--text-secondary);
max-width:560px;
margin-bottom:36px;
}

.hero__actions{
display:flex;
gap:16px;
margin-bottom:48px;
flex-wrap:wrap;
}

.hero__actions .btn{
min-width:176px;
}

.hero__stats{
display:flex;
gap:22px;
flex-wrap:wrap;
}

.hero__stat{
min-width:110px;
padding:18px 18px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
border-radius:18px;
backdrop-filter:blur(16px);
transition:.3s;
}

.hero__stat:hover{
transform:translateY(-4px);
border-color:rgba(139,92,246,.22);
}

.hero__stat strong{
display:block;
font-size:24px;
font-weight:800;
margin-bottom:6px;
}

.hero__stat span{
font-size:13px;
color:var(--text-muted);
}

/* =========================================================
   NETWORK SCENE
   ========================================================= */

.hero__visual{
display:flex;
justify-content:center;
align-items:center;
position:relative;
}

.network-scene{
position:relative;
width:100%;
max-width:560px;
aspect-ratio:1/1;
border-radius:32px;
background:
linear-gradient(180deg,rgba(20,21,33,.85),rgba(10,11,17,.92));
border:1px solid rgba(255,255,255,.06);
overflow:hidden;
backdrop-filter:blur(28px);
box-shadow:
0 30px 90px rgba(0,0,0,.45),
inset 0 0 0 1px rgba(255,255,255,.03);
}

.network-scene::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at center,rgba(139,92,246,.08),transparent 65%);
pointer-events:none;
}

#networkCanvas{
position:absolute;
inset:0;
width:100%;
height:100%;
}

/* =========================================================
   GLOW
   ========================================================= */

.network-glow{
position:absolute;
border-radius:50%;
filter:blur(55px);
pointer-events:none;
}

.glow-1{
width:210px;
height:210px;
top:18%;
left:12%;
background:rgba(139,92,246,.20);
}

.glow-2{
width:170px;
height:170px;
bottom:12%;
right:14%;
background:rgba(108,92,255,.18);
}

/* =========================================================
   FLOATING CARDS
   ========================================================= */

.floating-card{
position:absolute;
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
background:rgba(16,17,27,.88);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(22px);
border-radius:18px;
box-shadow:0 14px 40px rgba(0,0,0,.35);
min-width:170px;
transition:.35s;
animation:floating 7s ease-in-out infinite;
}

.floating-card:hover{
transform:translateY(-5px) scale(1.02);
border-color:rgba(139,92,246,.30);
}

.floating-card strong{
display:block;
font-size:14px;
font-weight:700;
margin-bottom:2px;
}

.floating-card span{
display:block;
font-size:12px;
color:var(--text-muted);
}

.floating-card__icon{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.18);
font-size:18px;
flex-shrink:0;
}

.card-1{
top:12%;
left:8%;
animation-delay:0s;
}

.card-2{
top:18%;
right:8%;
animation-delay:1.2s;
}

.card-3{
bottom:18%;
left:10%;
animation-delay:2.4s;
}

.card-4{
bottom:12%;
right:10%;
animation-delay:3.6s;
}

@keyframes floating{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}

/* =========================================================
   TRUSTED BAR
   ========================================================= */

.trusted{
padding:18px 0 42px;
}

.trusted__inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding:18px 24px;
background:rgba(255,255,255,.025);
border:1px solid rgba(255,255,255,.05);
border-radius:22px;
backdrop-filter:blur(16px);
}

.trusted__title{
font-size:15px;
font-weight:600;
color:var(--text-secondary);
white-space:nowrap;
}

.trusted__items{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:14px;
}

.trusted__items span{
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.05);
font-size:13px;
color:var(--text-secondary);
transition:.25s;
}

.trusted__items span:hover{
background:rgba(139,92,246,.08);
border-color:rgba(139,92,246,.20);
color:#CBB5FF;
}

/* =========================================================
   RESPONSIVE HERO
   ========================================================= */

@media(max-width:992px){

.hero{
padding:56px 0 72px;
}

.hero__inner{
grid-template-columns:1fr;
gap:42px;
}

.hero__content{
max-width:100%;
text-align:center;
}

.hero__badge{
margin-inline:auto;
}

.hero__desc{
margin-inline:auto;
}

.hero__actions{
justify-content:center;
}

.hero__stats{
justify-content:center;
}

.network-scene{
max-width:500px;
margin:0 auto;
}

}

@media(max-width:640px){

.hero{
padding:44px 0 56px;
}

.hero__title{
font-size:42px;
}

.hero__desc{
font-size:16px;
}

.hero__actions{
flex-direction:column;
}

.hero__actions .btn{
width:100%;
}

.hero__stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.hero__stat{
min-width:auto;
padding:14px;
text-align:center;
}

.network-scene{
max-width:100%;
border-radius:24px;
}

.floating-card{
min-width:140px;
padding:10px 12px;
gap:10px;
}

.floating-card__icon{
width:32px;
height:32px;
font-size:15px;
}

.floating-card strong{
font-size:12px;
}

.floating-card span{
font-size:10px;
}

.card-1{top:10%;left:5%;}
.card-2{top:16%;right:5%;}
.card-3{bottom:18%;left:6%;}
.card-4{bottom:10%;right:6%;}

.trusted__inner{
flex-direction:column;
align-items:flex-start;
padding:18px;
}

.trusted__items{
justify-content:flex-start;
}

}

/* =========================================================
   PLATFORM
   ========================================================= */

.platform-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
align-items:stretch;
}

.platform-card{
position:relative;
padding:28px;
border-radius:24px;
background:linear-gradient(180deg,rgba(19,20,30,.96),rgba(12,13,20,.96));
border:1px solid rgba(255,255,255,.06);
overflow:hidden;
transition:.35s;
backdrop-filter:blur(20px);
box-shadow:0 16px 40px rgba(0,0,0,.28);
}

.platform-card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top right,rgba(139,92,246,.12),transparent 55%);
opacity:0;
transition:.35s;
}

.platform-card:hover{
transform:translateY(-6px);
border-color:rgba(139,92,246,.22);
box-shadow:0 26px 60px rgba(0,0,0,.38);
}

.platform-card:hover::before{
opacity:1;
}

.platform-card--large{
grid-column:span 2;
min-height:310px;
}

.platform-card__icon{
width:54px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
border-radius:16px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.18);
margin-bottom:22px;
}

.platform-card h3{
font-size:24px;
font-weight:700;
margin-bottom:12px;
letter-spacing:-.02em;
}

.platform-card p{
color:var(--text-secondary);
line-height:1.7;
margin-bottom:22px;
}

.platform-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:22px;
}

.platform-tags span{
padding:7px 14px;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
font-size:12px;
font-weight:600;
color:var(--text-secondary);
transition:.25s;
}

.platform-tags span:hover{
background:rgba(139,92,246,.10);
border-color:rgba(139,92,246,.22);
color:#CBB5FF;
}

.platform-line{
width:100%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(139,92,246,.35),transparent);
margin:22px 0;
}

.platform-list{
list-style:none;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.platform-list li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
color:var(--text-secondary);
}

.platform-list li::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#8B5CF6;
box-shadow:0 0 10px #8B5CF6;
flex-shrink:0;
}

/* =========================================================
   INTEGRATION
   ========================================================= */

.docs-grid{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:22px;
margin-bottom:54px;
}

.docs-card{
padding:26px;
border-radius:22px;
background:#0E0F17;
border:1px solid rgba(255,255,255,.06);
overflow:hidden;
transition:.3s;
}

.docs-card:hover{
border-color:rgba(139,92,246,.22);
transform:translateY(-4px);
}

.docs-card__header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}

.docs-card__header span{
font-weight:700;
font-size:17px;
}

.docs-card__header small{
padding:5px 12px;
border-radius:999px;
background:rgba(139,92,246,.12);
color:#CBB5FF;
font-size:11px;
font-weight:700;
letter-spacing:.08em;
}

.docs-card pre{
margin:0;
padding:22px;
border-radius:18px;
background:#090A12;
border:1px solid rgba(255,255,255,.05);
overflow:auto;
}

.docs-card code{
font-family:"JetBrains Mono",monospace;
font-size:13px;
line-height:1.8;
color:#B794FF;
}

/* =========================================================
   STEPS
   ========================================================= */

.steps-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}

.step-card{
padding:24px;
border-radius:22px;
background:rgba(255,255,255,.025);
border:1px solid rgba(255,255,255,.05);
transition:.3s;
}

.step-card:hover{
transform:translateY(-5px);
border-color:rgba(139,92,246,.22);
}

.step-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
margin-bottom:18px;
border-radius:14px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.18);
font-weight:700;
font-size:17px;
}

.step-card h3{
font-size:20px;
margin-bottom:10px;
}

.step-card p{
color:var(--text-secondary);
line-height:1.7;
}

/* =========================================================
   TIMELINE
   ========================================================= */

.timeline{
position:relative;
max-width:920px;
margin:0 auto;
padding:18px 0;
}

.timeline-line{
position:absolute;
left:26px;
top:0;
bottom:0;
width:2px;
background:linear-gradient(180deg,
transparent,
rgba(139,92,246,.55),
rgba(139,92,246,.35),
transparent);
}

.timeline-item{
position:relative;
display:flex;
gap:24px;
padding:0 0 36px;
}

.timeline-item:last-child{
padding-bottom:0;
}

.timeline-dot{
position:relative;
z-index:2;
width:54px;
height:54px;
flex-shrink:0;
border-radius:50%;
background:#11121C;
border:2px solid rgba(139,92,246,.35);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 25px rgba(139,92,246,.25);
}

.timeline-dot::before{
content:"";
width:10px;
height:10px;
border-radius:50%;
background:#8B5CF6;
box-shadow:0 0 12px #8B5CF6;
}

.timeline-card{
flex:1;
padding:24px;
border-radius:22px;
background:linear-gradient(180deg,#11121B,#0B0C12);
border:1px solid rgba(255,255,255,.06);
transition:.3s;
}

.timeline-card:hover{
transform:translateY(-4px);
border-color:rgba(139,92,246,.22);
}

.timeline-card span{
display:inline-block;
margin-bottom:10px;
padding:6px 12px;
border-radius:999px;
background:rgba(139,92,246,.12);
color:#CBB5FF;
font-size:11px;
font-weight:700;
letter-spacing:.08em;
}

.timeline-card h3{
font-size:22px;
margin-bottom:10px;
}

.timeline-card p{
color:var(--text-secondary);
line-height:1.7;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

.platform-grid{
grid-template-columns:repeat(2,1fr);
}

.platform-card--large{
grid-column:span 2;
}

.docs-grid{
grid-template-columns:1fr;
}

.steps-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.platform-grid{
grid-template-columns:1fr;
}

.platform-card--large{
grid-column:span 1;
min-height:auto;
}

.platform-list{
grid-template-columns:1fr;
}

.timeline-line{
left:22px;
}

.timeline-item{
gap:18px;
}

.timeline-dot{
width:46px;
height:46px;
}

.timeline-card{
padding:20px;
}

.timeline-card h3{
font-size:20px;
}

}

/* =========================================================
   PRICING
   ========================================================= */

.pricing-layout{
display:flex;
justify-content:center;
}

.pricing-main{
width:100%;
max-width:920px;
padding:34px;
border-radius:30px;
background:
linear-gradient(180deg,rgba(20,21,33,.96),rgba(10,11,18,.96));
border:1px solid rgba(139,92,246,.16);
box-shadow:
0 30px 90px rgba(0,0,0,.42),
0 0 60px rgba(139,92,246,.08);
position:relative;
overflow:hidden;
}

.pricing-main::before{
content:"";
position:absolute;
top:-140px;
right:-120px;
width:280px;
height:280px;
background:radial-gradient(circle,rgba(139,92,246,.22),transparent 72%);
filter:blur(22px);
pointer-events:none;
}

.pricing-main__top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:30px;
margin-bottom:28px;
}

.pricing-main__badge{
display:inline-flex;
padding:8px 16px;
border-radius:999px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.22);
font-size:12px;
font-weight:700;
letter-spacing:.08em;
color:#CBB5FF;
margin-bottom:16px;
}

.pricing-main__top h3{
font-size:30px;
font-weight:800;
letter-spacing:-.03em;
}

.pricing-main__price{
text-align:right;
}

.pricing-main__price strong{
display:block;
font-size:46px;
font-weight:900;
line-height:1;
letter-spacing:-.05em;
}

.pricing-main__price span{
display:block;
margin-top:8px;
font-size:14px;
color:var(--text-secondary);
}

.pricing-divider{
height:1px;
margin:30px 0;
background:linear-gradient(90deg,
transparent,
rgba(139,92,246,.32),
transparent);
}

.pricing-grid-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:34px;
}

.pricing-item{
display:flex;
align-items:flex-start;
gap:14px;
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);
transition:.28s;
}

.pricing-item:hover{
transform:translateY(-3px);
border-color:rgba(139,92,246,.22);
background:rgba(255,255,255,.045);
}

.pricing-item__icon{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.18);
font-size:18px;
flex-shrink:0;
}

.pricing-item strong{
display:block;
font-size:15px;
font-weight:700;
margin-bottom:4px;
}

.pricing-item span{
font-size:13px;
color:var(--text-muted);
line-height:1.5;
}

/* =========================================================
   ADVANTAGES
   ========================================================= */

.adv-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

.adv-card{
padding:28px;
border-radius:24px;
background:linear-gradient(180deg,#12131D,#0B0C12);
border:1px solid rgba(255,255,255,.06);
transition:.3s;
}

.adv-card:hover{
transform:translateY(-5px);
border-color:rgba(139,92,246,.22);
}

.adv-card__icon{
width:54px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
border-radius:16px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.18);
font-size:22px;
}

.adv-card h3{
font-size:22px;
margin-bottom:10px;
}

.adv-card p{
color:var(--text-secondary);
line-height:1.7;
}

/* =========================================================
   CONTACTS
   ========================================================= */

.contact-layout{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:56px;
align-items:center;
}

.contact-left{
max-width:420px;
}

.contact-status{
display:flex;
align-items:center;
gap:12px;
margin-top:28px;
padding:14px 18px;
border-radius:18px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);
}

.contact-status__dot{
width:10px;
height:10px;
border-radius:50%;
background:#34D399;
box-shadow:0 0 12px #34D399;
}

.contact-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.contact-box{
padding:22px;
border-radius:22px;
background:linear-gradient(180deg,#11121B,#0B0C12);
border:1px solid rgba(255,255,255,.06);
transition:.3s;
min-height:150px;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

.contact-box:hover{
transform:translateY(-5px);
border-color:rgba(139,92,246,.22);
}

.contact-box__icon{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.18);
font-size:20px;
margin-bottom:18px;
}

.contact-box span{
font-size:13px;
color:var(--text-muted);
margin-bottom:6px;
}

.contact-box strong{
font-size:16px;
font-weight:700;
line-height:1.45;
word-break:break-word;
}

/* =========================================================
   CTA
   ========================================================= */

.footer-cta{
padding-top:42px;
padding-bottom:42px;
}

.footer-cta__card{
padding:42px;
border-radius:32px;
background:
linear-gradient(135deg,#12131D,#0A0B11);
border:1px solid rgba(139,92,246,.16);
display:grid;
grid-template-columns:1fr auto;
gap:40px;
align-items:center;
position:relative;
overflow:hidden;
}

.footer-cta__card::before{
content:"";
position:absolute;
right:-120px;
top:-120px;
width:260px;
height:260px;
background:radial-gradient(circle,rgba(139,92,246,.22),transparent 72%);
filter:blur(26px);
}

.footer-cta__card h2{
font-size:40px;
line-height:1.08;
letter-spacing:-.04em;
margin:12px 0 16px;
}

.footer-cta__card p{
font-size:17px;
color:var(--text-secondary);
line-height:1.75;
max-width:520px;
}

.footer-cta__actions{
display:flex;
flex-direction:column;
gap:14px;
min-width:220px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
padding:54px 0 26px;
border-top:1px solid rgba(255,255,255,.06);
background:#06070B;
}

.footer__top{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:60px;
padding-bottom:40px;
}

.footer__brand{
max-width:420px;
}

.footer__description{
margin-top:18px;
color:var(--text-secondary);
line-height:1.8;
font-size:15px;
}

.footer__columns{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
}

.footer__column h4{
font-size:15px;
font-weight:700;
margin-bottom:16px;
}

.footer__column a{
display:block;
margin-bottom:12px;
font-size:14px;
color:var(--text-secondary);
transition:.25s;
}

.footer__column a:hover{
color:var(--text);
}

.footer__bottom{
padding-top:24px;
border-top:1px solid rgba(255,255,255,.05);
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.footer__bottom>span{
font-size:14px;
color:var(--text-muted);
}

.footer__legal{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.footer__legal span{
font-size:13px;
color:var(--text-muted);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1024px){

.pricing-main__top{
flex-direction:column;
align-items:flex-start;
}

.pricing-main__price{
text-align:left;
}

.contact-layout{
grid-template-columns:1fr;
gap:42px;
}

.footer-cta__card{
grid-template-columns:1fr;
}

.footer-cta__actions{
flex-direction:row;
flex-wrap:wrap;
}

.footer__top{
grid-template-columns:1fr;
gap:40px;
}

}

@media(max-width:768px){

.pricing-main{
padding:26px;
}

.pricing-main__price strong{
font-size:38px;
}

.pricing-grid-features{
grid-template-columns:1fr;
}

.adv-grid{
grid-template-columns:1fr;
}

.contact-grid{
grid-template-columns:1fr;
}

.footer-cta__card{
padding:30px;
}

.footer-cta__card h2{
font-size:30px;
}

.footer-cta__actions{
flex-direction:column;
}

.footer__columns{
grid-template-columns:1fr;
gap:28px;
}

.footer__bottom{
flex-direction:column;
align-items:flex-start;
}

}
/* =========================================================
   MODALS
   ========================================================= */

.modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
opacity:0;
visibility:hidden;
transition:.28s;
z-index:5000;
}

.modal.active{
opacity:1;
visibility:visible;
}

.modal__overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.72);
backdrop-filter:blur(10px);
}

.modal__content{
position:relative;
width:100%;
max-width:460px;
padding:34px;
border-radius:30px;
background:
linear-gradient(180deg,#151622,#0C0D14);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 30px 90px rgba(0,0,0,.55);
animation:modalPop .28s ease;
overflow:hidden;
}

.modal__content::before{
content:"";
position:absolute;
top:-140px;
right:-120px;
width:260px;
height:260px;
background:radial-gradient(circle,rgba(139,92,246,.22),transparent 70%);
filter:blur(30px);
pointer-events:none;
}

@keyframes modalPop{
from{
opacity:0;
transform:translateY(16px) scale(.96);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

.modal__close{
position:absolute;
top:18px;
right:18px;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
color:#fff;
font-size:18px;
transition:.25s;
}

.modal__close:hover{
background:rgba(255,255,255,.08);
transform:rotate(90deg);
}

.modal__header{
text-align:center;
margin-bottom:30px;
}

.modal__logo{
width:66px;
height:66px;
margin:0 auto 20px;
padding:12px;
border-radius:20px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.18);
}

.modal__logo img{
width:100%;
height:100%;
object-fit:contain;
}

.modal__header h2{
font-size:30px;
font-weight:800;
letter-spacing:-.03em;
margin-bottom:10px;
}

.modal__header p{
font-size:15px;
color:var(--text-secondary);
line-height:1.7;
}

/* =========================================================
   FORM
   ========================================================= */

.modal__row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.modal__field{
margin-bottom:18px;
}

.modal__field label{
display:block;
margin-bottom:8px;
font-size:13px;
font-weight:600;
color:var(--text-secondary);
}

.modal__field input{
width:100%;
height:50px;
padding:0 16px;
border-radius:16px;
background:#10111A;
border:1px solid rgba(255,255,255,.08);
color:#fff;
transition:.25s;
}

.modal__field input::placeholder{
color:#6E7288;
}

.modal__field input:focus{
outline:none;
border-color:rgba(139,92,246,.45);
box-shadow:
0 0 0 4px rgba(139,92,246,.12);
background:#131521;
}

/* =========================================================
   PASSWORD
   ========================================================= */

.password-wrapper{
position:relative;
}

.password-wrapper input{
padding-right:56px;
}

.password-toggle{
position:absolute;
top:50%;
right:8px;
transform:translateY(-50%);
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
font-size:18px;
transition:.25s;
}

.password-toggle:hover{
background:rgba(139,92,246,.12);
border-color:rgba(139,92,246,.22);
}

.password-strength{
margin-top:12px;
}

.strength-bar{
width:100%;
height:6px;
border-radius:999px;
background:rgba(255,255,255,.08);
overflow:hidden;
position:relative;
}

.strength-bar::after{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:0%;
border-radius:inherit;
transition:.25s;
}

.strength-bar.weak::after{
width:32%;
background:#EF4444;
}

.strength-bar.medium::after{
width:64%;
background:#F59E0B;
}

.strength-bar.strong::after{
width:100%;
background:#34D399;
}

#strengthText{
display:block;
margin-top:8px;
font-size:12px;
color:var(--text-muted);
}

/* =========================================================
   CHECKBOX
   ========================================================= */

.checkbox{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:20px;
font-size:13px;
color:var(--text-secondary);
cursor:pointer;
}

.checkbox input{
width:18px;
height:18px;
accent-color:#8B5CF6;
margin-top:1px;
}

.checkbox a{
color:#CBB5FF;
}

.checkbox a:hover{
text-decoration:underline;
}

/* =========================================================
   TURNSTILE
   ========================================================= */

.turnstile-container{
display:flex;
justify-content:center;
margin:18px 0 22px;
padding:12px;
border-radius:18px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);
}

/* =========================================================
   MODAL LINKS
   ========================================================= */

.modal__switch{
margin-top:18px;
text-align:center;
font-size:14px;
color:var(--text-secondary);
}

.modal__switch a{
color:#CBB5FF;
font-weight:600;
}

.modal__switch a:hover{
text-decoration:underline;
}

/* =========================================================
   TOAST
   ========================================================= */

.toast{
position:fixed;
left:50%;
bottom:34px;
transform:translateX(-50%) translateY(30px);
padding:16px 22px;
border-radius:18px;
background:linear-gradient(180deg,#181A26,#10121A);
border:1px solid rgba(139,92,246,.20);
box-shadow:0 20px 60px rgba(0,0,0,.45);
font-size:14px;
font-weight:600;
opacity:0;
pointer-events:none;
transition:.3s;
z-index:6000;
}

.toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}

/* =========================================================
   GLOBAL RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

.header__inner{
gap:22px;
}

.nav{
gap:18px;
}

.logo__text{
font-size:20px;
}

.container{
width:min(var(--container),calc(100% - 40px));
}

}

@media(max-width:860px){

.nav{
display:none;
}

.burger{
display:flex;
}

#guestActions{
display:none;
}

#userActions{
display:none;
}

.section{
padding:78px 0;
}

.section__title{
font-size:42px;
}

}

@media(max-width:640px){

.container{
width:calc(100% - 28px);
}

.header{
height:62px;
}

.logo__img{
width:30px;
height:30px;
}

.logo__text{
font-size:19px;
}

.hero{
padding:36px 0 50px;
}

.section{
padding:64px 0;
}

.section__title{
font-size:34px;
}

.section__subtitle{
font-size:16px;
}

.modal{
padding:14px;
}

.modal__content{
padding:26px;
border-radius:24px;
}

.modal__header h2{
font-size:26px;
}

.modal__row{
grid-template-columns:1fr;
}

.modal__field input{
height:48px;
}

.toast{
left:14px;
right:14px;
bottom:20px;
transform:translateY(30px);
}

.toast.show{
transform:translateY(0);
}

}

@media(max-width:380px){

.logo__text{
font-size:17px;
}

.hero__title{
font-size:36px;
}

.btn,
.nav__btn{
height:40px;
padding:0 16px;
font-size:13px;
}

}