:root{

--primary:#00a8f3;
--accent:#ffbf00;

--dark:#071120;
--dark-soft:#111c2d;
--card:#0d1728;

--text:#b8c2d1;
--white:#ffffff;

--border:
rgba(255,255,255,.08);

--radius:26px;

--shadow:
0 18px 50px rgba(0,0,0,.22);

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:var(--dark);

color:white;

line-height:1.7;

overflow-x:hidden;

}

.container{

width:90%;

max-width:1300px;

margin:auto;

}

/* HEADER */

.header{

position:fixed;

top:0;

width:100%;

z-index:999;

padding:18px 0;

background:
rgba(7,17,32,.78);

backdrop-filter:blur(16px);

border-bottom:
1px solid var(--border);

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

color:white;

font-size:1.9rem;

font-weight:800;

text-decoration:none;

}

.logo span{

color:var(--primary);

}

.btn-nav{

background:var(--primary);

color:white;

padding:12px 20px;

border-radius:14px;

text-decoration:none;

font-weight:700;

}

/* HERO */

.legal-hero{

position:relative;

padding:180px 0 100px;

overflow:hidden;

}

.hero-bg{

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(0,168,243,.22),
transparent 35%
),

radial-gradient(
circle at bottom left,
rgba(255,191,0,.12),
transparent 42%
);

}

.hero-content{

position:relative;

z-index:2;

max-width:850px;

}

.badge{

display:inline-block;

background:
rgba(255,191,0,.14);

color:var(--accent);

padding:10px 18px;

border-radius:100px;

font-weight:800;

font-size:.9rem;

margin-bottom:24px;

}

.hero-content h1{

font-size:4.2rem;

line-height:1.05;

font-weight:800;

margin-bottom:26px;

}

.hero-content p{

font-size:1.2rem;

color:var(--text);

max-width:700px;

}

/* LAYOUT */

.legal-layout{

padding-bottom:120px;

}

.legal-grid{

display:grid;

grid-template-columns:280px 1fr;

gap:40px;

align-items:start;

}

/* SIDEBAR */

.legal-sidebar{

position:sticky;

top:120px;

}

.sidebar-card{

background:
rgba(255,255,255,.05);

border:1px solid var(--border);

border-radius:28px;

padding:30px;

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

}

.sidebar-card h3{

margin-bottom:25px;

font-size:1.2rem;

}

.sidebar-card nav{

display:flex;

flex-direction:column;

gap:16px;

}

.sidebar-card a{

color:var(--text);

text-decoration:none;

font-weight:600;

transition:.3s;

}

.sidebar-card a:hover{

color:white;

}

/* CONTENT */

.legal-content{

display:flex;

flex-direction:column;

gap:40px;

}

.legal-card{

background:
rgba(255,255,255,.05);

border:1px solid var(--border);

border-radius:34px;

padding:50px;

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

}

.legal-card h2{

font-size:2.4rem;

margin-bottom:20px;

}

.legal-intro{

font-size:1.1rem;

color:var(--text);

margin-bottom:40px;

max-width:800px;

}

/* BLOCKS */

.legal-block{

padding:30px 0;

border-top:
1px solid rgba(255,255,255,.06);

}

.legal-block:first-of-type{

border-top:none;

padding-top:0;

}

.legal-block h3{

font-size:1.4rem;

margin-bottom:18px;

color:white;

}

.legal-block p{

color:#d4dce7;

margin-bottom:16px;

}

.legal-block ul{

padding-left:20px;

color:#d4dce7;

}

.legal-block li{

margin-bottom:14px;

}

/* FOOTER */

.footer{

padding:60px 0;

text-align:center;

border-top:
1px solid rgba(255,255,255,.06);

color:var(--text);

}

.footer h3{

color:white;

font-size:1.8rem;

margin-bottom:8px;

}

.footer-links{

margin:20px 0;

}

.footer-links a{

color:var(--text);

margin:0 10px;

text-decoration:none;

}

/* RESPONSIVE */

@media(max-width:992px){

.legal-grid{

grid-template-columns:1fr;

}

.legal-sidebar{

position:relative;

top:0;

}

}

@media(max-width:768px){

.nav{

flex-direction:column;

gap:16px;

}

.hero-content h1{

font-size:2.7rem;

}

.legal-card{

padding:35px 24px;

}

.legal-card h2{

font-size:2rem;

}

}