@charset "UTF-8";
:root{
--primary:#e50914;
--bg-dark:#0f0f13;
--bg-card:rgba(26,26,34,0.85);
--text-main:#ffffff;
--text-muted:#a0a0ab;
--accent:#ff2a35}
*{
margin:0;
padding:0;
box-sizing:border-box}
body{
font-family:'Outfit',sans-serif;
background-color:var(--bg-dark);
color:var(--text-main);
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow-x:hidden;
background-image:radial-gradient(circle at 15% 50%,rgba(229,9,20,0.15),transparent 25%),radial-gradient(circle at 85% 30%,rgba(8,66,160,0.15),transparent 25%)}
.container{
width:90%;
max-width:900px;
background:var(--bg-card);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.08);
border-radius:24px;
box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);
padding:3rem;
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
align-items:center}
.decoration{
position:absolute;
background:linear-gradient(135deg,var(--primary),#a60008);
border-radius:50%;
filter:blur(60px);
opacity:0.4;
z-index:-1;
animation:pulse 8s infinite alternate}
.dec-1{
width:300px;
height:300px;
top:-100px;
right:-100px}
.dec-2{
width:200px;
height:200px;
bottom:-50px;
left:-50px;
animation-delay:-4s}
@keyframes pulse{
0%{
transform:scale(1) translate(0,0);
opacity:0.3}
100%{
transform:scale(1.1) translate(-20px,20px);
opacity:0.5}
}
.hero-visual{
position:relative;
width:100%;
aspect-ratio:1;
display:flex;
justify-content:center;
align-items:center}
.svg-container{
width:100%;
max-width:320px;
position:relative;
animation:float 6s ease-in-out infinite}
@keyframes float{
0%{
transform:translateY(0px)}
50%{
transform:translateY(-15px)}
100%{
transform:translateY(0px)}
}
.content-area{
display:flex;
flex-direction:column;
justify-content:center;
z-index:10}
.logo-row{
display:flex;
align-items:center;
gap:12px;
margin-bottom:2rem}
.logo-img{
height:32px;
width:auto}
.logo-text{
font-size:1.2rem;
font-weight:800;
letter-spacing:0.5px;
color:var(--text-main)}
h1{
font-size:2.8rem;
line-height:1.1;
font-weight:800;
margin-bottom:1.5rem;
background:linear-gradient(to right,#fff,#ffcccb);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent}
p.subtitle{
font-size:1.15rem;
color:var(--text-muted);
line-height:1.6;
margin-bottom:2.5rem}
.cta-container{
display:flex;
flex-direction:column;
gap:1.5rem}
.cta-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
background:linear-gradient(135deg,var(--primary),var(--accent));
color:white;
text-decoration:none;
font-weight:600;
font-size:1.1rem;
padding:1rem 2rem;
border-radius:12px;
border:none;
cursor:pointer;
transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
box-shadow:0 8px 20px rgba(229,9,20,0.3);
width:100%}
.cta-button:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:0 12px 25px rgba(229,9,20,0.4);
background:linear-gradient(135deg,var(--accent),#ff4d55)}
.cta-button svg{
width:24px;
height:24px;
fill:currentColor;
transition:transform 0.3s ease}
.cta-button:hover svg{
transform:translateX(4px)}
.disclaimer-box{
font-size:0.85rem;
color:var(--text-muted);
line-height:1.5;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
padding:1rem;
border-radius:8px}
.disclaimer-box a{
color:var(--accent);
text-decoration:none;
font-weight:600}
.disclaimer-box a:hover{
text-decoration:underline}
.cws-badge{
max-width:180px;
height:auto;
opacity:0.9;
transition:opacity 0.2s,transform 0.2s;
cursor:pointer;
align-self:flex-start}
.cws-badge:hover{
opacity:1;
transform:scale(1.02)}
@media (max-width:850px){
.container{
grid-template-columns:1fr;
padding:2rem;
gap:2rem}
.hero-visual{
order:-1;
max-height:250px}
h1{
font-size:2.2rem}
}
@keyframes fadeBlock{
0%{
opacity:0;
transform:scale(0.8) translateY(10px)}
30%{
opacity:1;
transform:scale(1) translateY(0)}
50%{
opacity:1;
filter:sepia(100%) hue-rotate(90deg);
transform:scale(0.9)}
70%{
opacity:0;
transform:scale(0.5)}
100%{
opacity:0}
}