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

html{
scroll-behavior:smooth
}

body{
font-family:'Inter',sans-serif;
background:#040816;
color:white;
overflow-x:hidden
}

body::before{
content:'';
position:fixed;
inset:0;
background:
radial-gradient(circle at left center,rgba(70,90,255,.25),transparent 35%),
radial-gradient(circle at right center,rgba(130,110,255,.18),transparent 30%),
radial-gradient(circle at center,rgba(0,162,255,.08),transparent 40%);
z-index:-2
}

.page{
min-height:100vh;
display:grid;
grid-template-rows:74px 1fr auto
}

.navbar{
height:74px;
border-bottom:1px solid rgba(255,255,255,.06);
display:flex;
align-items:center;
justify-content:center;
padding:0 40px;
position:sticky;
top:0;
backdrop-filter:blur(14px);
background:rgba(4,8,22,.82);
z-index:100
}

.nav-inner{
width:100%;
max-width:1300px;
display:flex;
align-items:center;
justify-content:space-between
}

.logo{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
color:white
}

.logo-icon{
width:42px;
height:42px;
border-radius:14px;
background:linear-gradient(135deg,#5970ff,#7d8cff);
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:20px;
box-shadow:0 0 30px rgba(89,112,255,.4)
}

.logo-text h2{
font-size:24px;
font-weight:800;
letter-spacing:-1px
}

.logo-text p{
font-size:10px;
letter-spacing:4px;
color:#667085;
margin-top:2px
}

.nav-links{
display:flex;
align-items:center;
gap:12px;
padding:7px;
border-radius:999px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03)
}

.nav-links a{
text-decoration:none;
color:#d0d5dd;
font-size:14px;
font-weight:600;
padding:10px 18px;
border-radius:999px;
transition:.25s
}

.nav-links a:hover{
background:rgba(255,255,255,.05)
}

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

.signin{
color:white;
text-decoration:none;
font-weight:600;
font-size:14px
}

.started-btn{
padding:14px 24px;
border-radius:18px;
background:linear-gradient(135deg,#5970ff,#6e85ff);
color:white;
text-decoration:none;
font-weight:700;
font-size:14px;
box-shadow:0 0 35px rgba(89,112,255,.35)
}

.hero{
display:flex;
align-items:center;
justify-content:center;
padding:30px 40px
}

.hero-inner{
width:100%;
max-width:1300px;
display:grid;
grid-template-columns:1fr 520px;
gap:50px;
align-items:center
}

.badge{
display:inline-flex;
align-items:center;
gap:12px;
padding:11px 18px;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
color:#c0c6d4;
font-size:14px;
margin-bottom:28px
}

.badge-dot{
width:10px;
height:10px;
border-radius:50%;
background:#16d59a;
box-shadow:0 0 12px #16d59a
}

.hero-left h1{
font-size:72px;
line-height:.98;
letter-spacing:-4px;
font-weight:900
}

.gradient{
background:linear-gradient(90deg,#7c8cff,#7fdcff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}

.hero-left p{
margin-top:26px;
max-width:700px;
font-size:18px;
line-height:1.7;
color:#b0b7c7
}

.hero-buttons{
display:flex;
gap:18px;
margin-top:34px
}

.primary-btn,
.secondary-btn{
padding:17px 32px;
border-radius:22px;
text-decoration:none;
font-weight:700;
font-size:15px
}

.primary-btn{
background:linear-gradient(135deg,#5970ff,#6e85ff);
color:white;
box-shadow:0 0 40px rgba(89,112,255,.35)
}

.secondary-btn{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:white
}

.stats{
display:flex;
gap:18px;
margin-top:38px
}

.stat-card{
width:165px;
padding:22px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
border-radius:20px
}

.stat-card h3{
font-size:26px;
font-weight:800
}

.stat-card p{
margin-top:8px;
font-size:13px;
color:#7b8498
}

.upload-panel{
position:relative;
padding:18px;
border-radius:42px;
background:linear-gradient(180deg,rgba(105,125,255,.3),rgba(255,255,255,.05));
box-shadow:0 0 100px rgba(71,88,255,.25),0 0 220px rgba(0,102,255,.12)
}

.upload-inner{
background:#071022;
border-radius:34px;
padding:24px;
border:1px solid rgba(255,255,255,.05)
}

.panel-top{
display:flex;
justify-content:space-between;
align-items:flex-start
}

.panel-top small{
color:#727b8e;
font-size:14px
}

.panel-top h3{
margin-top:5px;
font-size:22px;
font-weight:800
}

.ready{
padding:10px 16px;
border-radius:999px;
background:rgba(17,213,154,.12);
color:#16d59a;
font-weight:700;
font-size:14px
}

.dropzone{
margin-top:24px;
min-height:240px;
border-radius:24px;
border:2px dashed rgba(89,112,255,.4);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:28px;
cursor:pointer;
transition:.25s
}

.dropzone.drag{
background:rgba(89,112,255,.09);
border-color:#7f8dff
}

.upload-icon{
width:70px;
height:70px;
border-radius:24px;
background:rgba(89,112,255,.15);
display:flex;
align-items:center;
justify-content:center;
font-size:38px;
color:#9da8ff;
margin-bottom:20px
}

.dropzone h4{
font-size:24px;
font-weight:800
}

.dropzone p{
margin-top:14px;
font-size:14px;
line-height:1.7;
color:#97a0b3;
max-width:420px
}

.expiry{
margin-top:18px;
padding:12px 16px;
border-radius:999px;
border:1px solid rgba(255,255,255,.08);
background:#0a1123;
color:#dbe4ff;
font-weight:600;
outline:none
}

.browse-btn{
margin-top:18px;
padding:12px 22px;
border-radius:999px;
border:none;
background:rgba(255,255,255,.08);
color:white;
font-weight:700;
font-size:13px;
cursor:pointer
}

.preview-card{
margin-top:22px;
padding:18px;
border-radius:20px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06)
}

.preview-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px
}

.preview-top h5{
font-size:15px;
font-weight:700;
word-break:break-all
}

.preview-top p{
margin-top:7px;
font-size:13px;
color:#7f889d
}

.percent{
padding:9px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
font-weight:700;
font-size:13px
}

.progress{
margin-top:16px;
height:9px;
border-radius:999px;
background:rgba(255,255,255,.06);
overflow:hidden
}

.progress div{
width:0%;
height:100%;
background:linear-gradient(90deg,#5d73ff,#64dfff);
border-radius:999px;
transition:.25s
}

.link-box{
margin-top:16px;
display:none;
gap:12px
}

.link-box input{
flex:1;
padding:15px;
border:none;
border-radius:14px;
background:#0a1123;
color:white;
font-size:13px;
min-width:0
}

.link-box button,
.open-btn{
padding:0 18px;
border:none;
border-radius:14px;
background:white;
font-weight:800;
cursor:pointer;
color:#111827;
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
font-size:13px
}

.notice{
margin-top:12px;
color:#93a4c7;
font-size:12px;
display:none
}

footer{
border-top:1px solid rgba(255,255,255,.06);
padding:18px 40px;
color:#667085;
text-align:center;
font-size:14px;
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap
}

.footer-links{
display:flex;
gap:14px;
flex-wrap:wrap
}

.footer-links a{
color:#9aa4bd;
text-decoration:none
}

.footer-links a:hover{
color:white
}

@media(max-width:1150px){

.hero-inner{
grid-template-columns:1fr
}

.hero-left{
text-align:center
}

.hero-buttons,
.stats{
justify-content:center
}

}

@media(max-width:768px){

.navbar{
padding:0 20px
}

.nav-links,
.nav-right{
display:none
}

.hero{
padding:36px 20px
}

.hero-left h1{
font-size:48px;
letter-spacing:-2px
}

.hero-left p{
font-size:16px
}

.hero-buttons{
flex-direction:column
}

.stats{
flex-direction:column
}

.stat-card{
width:100%
}

.link-box{
flex-direction:column
}

.link-box button,
.open-btn{
padding:14px
}

footer{
padding:24px 20px
}

}

/* legal.html */
.legal-wrap{
width:100%;
max-width:980px;
margin:0 auto;
padding:64px 24px 80px;
}

.legal-hero{
text-align:center;
margin-bottom:36px;
}

.legal-hero .badge{
margin-bottom:24px;
}

.legal-hero h1{
font-size:clamp(36px,5vw,58px);
line-height:1.05;
letter-spacing:-2px;
font-weight:900;
margin-bottom:20px;
}

.legal-hero p{
max-width:760px;
margin:0 auto;
font-size:18px;
line-height:1.7;
color:#b0b7c7;
}

.legal-meta{
margin-top:24px;
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
color:#7f889d;
font-size:14px;
}

.legal-meta span{
padding:10px 14px;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
}

.legal-meta a{
color:#9da8ff;
text-decoration:none;
}

.legal-card{
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
border-radius:32px;
padding:42px;
margin-top:28px;
box-shadow:0 0 80px rgba(71,88,255,.12);
}

.legal-card h2{
font-size:34px;
font-weight:900;
letter-spacing:-1px;
margin-bottom:30px;
color:white;
}

.legal-section{
padding:24px 0;
border-top:1px solid rgba(255,255,255,.07);
}

.legal-section:first-of-type{
border-top:none;
padding-top:0;
}

.legal-section h3{
font-size:20px;
font-weight:800;
color:white;
margin-bottom:12px;
}

.legal-section p{
font-size:15px;
line-height:1.85;
color:#b7bfd2;
}

.legal-section ul{
margin-top:14px;
padding-left:22px;
display:grid;
gap:10px;
}

.legal-section li{
font-size:15px;
line-height:1.75;
color:#c5ccdc;
}

.legal-section a{
color:#9da8ff;
font-weight:700;
text-decoration:none;
}

.legal-section a:hover{
color:white;
}

@media(max-width:768px){

.legal-wrap{
padding:42px 18px 60px;
}

.legal-card{
padding:26px 22px;
border-radius:24px;
}

.legal-card h2{
font-size:28px;
}

.legal-section{
padding:20px 0;
}

.legal-section h3{
font-size:18px;
}

.legal-section p,
.legal-section li{
font-size:14px;
}

}