/* =================================
 AI副业导航站 PRO STYLE
 ================================= */


:root{

--primary:#2563eb;

--purple:#7c3aed;

--text:#0f172a;

--gray:#64748b;

--bg:#f8fafc;

--card:#ffffff;

--border:#e2e8f0;

}





*{

margin:0;

padding:0;

box-sizing:border-box;

}




body{


font-family:

Inter,

"Microsoft YaHei",

Arial,

sans-serif;



background:


radial-gradient(
circle at top,
#eef2ff,
transparent 35%
),


var(--bg);



color:var(--text);


}



a{

text-decoration:none;

color:inherit;

}




/* ===================
导航
=================== */


.navbar{


width:min(1200px,92%);


margin:24px auto;


padding:18px 28px;



display:flex;


align-items:center;


justify-content:space-between;



background:

rgba(255,255,255,.8);



backdrop-filter:

blur(20px);



border:

1px solid rgba(0,0,0,.06);



border-radius:24px;



position:sticky;


top:20px;


z-index:10;



box-shadow:


0 15px 40px rgba(15,23,42,.06);


}




.logo{


font-size:24px;


font-weight:900;


background:

linear-gradient(
90deg,
#2563eb,
#7c3aed
);



-webkit-background-clip:text;


color:transparent;


}





nav{


display:flex;


gap:30px;


}



nav a{


font-weight:600;


color:#475569;


transition:.3s;


}



nav a:hover{


color:#2563eb;


}






/* ===================
Hero
=================== */


.hero{


max-width:1200px;


margin:auto;


padding:

100px 20px 80px;



text-align:center;


}



.hero-tag{


display:inline-block;


padding:10px 20px;



border-radius:50px;



background:#eef2ff;



color:#4f46e5;



font-weight:700;



margin-bottom:35px;


}



.hero h1{


font-size:

clamp(48px,8vw,88px);



line-height:1.1;



font-weight:900;



letter-spacing:-3px;



background:


linear-gradient(
135deg,
#111827,
#2563eb,
#7c3aed
);



-webkit-background-clip:text;


color:transparent;


}



.hero p{


font-size:22px;


color:var(--gray);



margin:35px 0;


}




.hero-btn{


margin:35px 0;


}




.primary-btn,
.secondary-btn{


display:inline-block;


padding:16px 34px;


border-radius:999px;


font-weight:700;


margin:10px;


transition:.3s;


}




.primary-btn{


background:

linear-gradient(
135deg,
#2563eb,
#7c3aed
);



color:white;



box-shadow:

0 15px 35px rgba(37,99,235,.25);


}



.secondary-btn{


background:white;


border:

1px solid var(--border);


}




.primary-btn:hover,
.secondary-btn:hover{


transform:

translateY(-5px);


}






/* ===================
搜索
=================== */


.search-box{


max-width:650px;


margin:50px auto 0;


}



.search-box input{


width:100%;


padding:

20px 30px;



border-radius:999px;


border:

1px solid var(--border);



background:white;



font-size:16px;



outline:none;



box-shadow:

0 20px 50px rgba(0,0,0,.06);


}






/* ===================
数据
=================== */


.numbers{


max-width:1000px;


width:90%;


margin:40px auto 100px;



display:grid;


grid-template-columns:

repeat(3,1fr);



gap:30px;


}



.numbers div{


background:white;


padding:40px;


border-radius:28px;



border:

1px solid var(--border);



text-align:center;



box-shadow:

0 20px 40px rgba(0,0,0,.05);


}



.numbers strong{


display:block;


font-size:45px;


font-weight:900;


background:

linear-gradient(
90deg,
#2563eb,
#7c3aed
);



-webkit-background-clip:text;


color:transparent;


}



.numbers span{


color:var(--gray);


}







/* ===================
通用区域
=================== */


.section{


max-width:1200px;


margin:

100px auto;


padding:0 20px;


}




.section-title{


text-align:center;


margin-bottom:50px;


}



.section-title h2{


font-size:42px;


}



.section-title p{


color:var(--gray);


margin-top:15px;


}






/* ===================
工具卡片
=================== */


.tool-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}



.pro-card{


background:white;


padding:35px;


border-radius:30px;


border:

1px solid var(--border);



transition:.35s;



box-shadow:


0 15px 40px rgba(0,0,0,.05);



}



.pro-card:hover{


transform:

translateY(-10px);


box-shadow:


0 30px 60px rgba(0,0,0,.12);


}




.tool-icon{


font-size:55px;


}



.pro-card h3{


font-size:26px;


margin:20px 0 10px;


}



.pro-card p{


color:var(--gray);


}




.pro-card span{


display:inline-block;


margin-top:20px;


padding:

7px 16px;


background:#eff6ff;


color:#2563eb;


border-radius:30px;


}






/* ===================
副业卡片
=================== */


.business-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}



.business-card{


padding:35px;


background:white;


border-radius:30px;


border:

1px solid var(--border);



transition:.3s;


}



.business-card:hover{


transform:

translateY(-8px);


}





/* ===================
趋势模块
=================== */


.trend{


max-width:900px;


margin:100px auto;


padding:70px 30px;


text-align:center;



background:

linear-gradient(
135deg,
#2563eb,
#7c3aed
);



color:white;


border-radius:40px;


}



.trend h2{


font-size:38px;


margin-bottom:30px;


}



.trend p{


color:white;


font-size:20px;


margin:15px;


}






/* ===================
footer
=================== */


footer{


padding:50px;


text-align:center;


color:#94a3b8;


}






/* ===================
手机
=================== */


@media(max-width:768px){



.navbar{


width:95%;


}



nav{


display:none;


}



.hero{


padding-top:60px;


}



.hero h1{


letter-spacing:-1px;


}




.numbers,


.tool-grid,


.business-grid{


grid-template-columns:1fr;


}




.section-title h2{


font-size:32px;


}



}