/* Reset */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:"Microsoft YaHei",sans-serif; background:#f5f5f5; color:#333;}

/* Header */
header{
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background: rgba(255,111,97,0.9);
    backdrop-filter: blur(10px);
    padding:15px 50px; display:flex; justify-content:space-between; align-items:center;
}
header h1{color:#fff; font-size:24px;}
header nav a{color:#fff; margin-left:20px; text-decoration:none; font-weight:bold; transition:0.3s;}
header nav a:hover{color:#ffe0d6;}

/* Hero */
.hero{position:relative; width:100%; height:90vh; overflow:hidden; margin-top:70px;}
.hero-slide{
    position:absolute; width:100%; height:100%;
    background-size:cover; background-position:center;
    transition:opacity 1s ease;
    opacity:0;
}
.hero-slide.active{opacity:1;}
.hero-overlay{
    position:absolute; width:100%; height:100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35));
}
.hero-content{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    text-align:center; color:#fff;
}
.hero-content h2{font-size:48px; margin-bottom:20px; text-shadow:0 4px 10px rgba(0,0,0,0.5);}
.hero-content p{font-size:20px; margin-bottom:30px; text-shadow:0 2px 6px rgba(0,0,0,0.5);}
.hero-content a{
    display:inline-block; padding:15px 40px; background:linear-gradient(90deg,#ff6f61,#ffb88c);
    border-radius:50px; color:#fff; font-weight:bold; text-decoration:none;
    transition:0.3s;
}
.hero-content a:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(255,111,97,0.5);}

/* 热门案例 */
.container{max-width:1200px; margin:60px auto 100px; padding:0 20px;}
.container h2{font-size:32px; text-align:center; margin-bottom:40px; color:#ff6f61;}
.case-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px;}
.case-card{
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.1); transition:0.5s;
}
.case-card:hover{transform:translateY(-10px); box-shadow:0 20px 35px rgba(0,0,0,0.2);}
.case-card img{width:100%; height:200px; object-fit:cover;}
.case-card h3{margin:15px; font-size:22px; color:#ff6f61;}
.case-card p{margin:0 15px 15px; color:#666;}

/* Glass 卡片 (注册/登录) */
.glass-card {
    background: rgba(0,0,0,0.6); /* 深色背景保证输入框清晰 */
    backdrop-filter: blur(15px);
    border-radius:20px;
    padding:40px 30px;
    box-shadow:0 8px 30px rgba(0,0,0,0.3);
    color:#fff;
    max-width:400px;
    margin:100px auto;
}
.glass-card h2 { text-align:center; margin-bottom:30px; font-size:28px; color:#fff; }
.glass-card .input-group { position:relative; margin-bottom:20px; }
.glass-card input {
    width:100%; padding:12px; border:none; border-radius:8px;
    background:rgba(255,255,255,0.9); /* 白色背景，文字清晰 */
    color:#333; /* 文字黑色 */
    outline:none; font-size:16px;
}
.glass-card input::placeholder{ color:rgba(51,51,51,0.5); }
.glass-card label {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:rgba(51,51,51,0.7); pointer-events:none; transition:0.3s;
}
.glass-card input:focus + label, .glass-card input:not(:placeholder-shown) + label {
    top:-10px; font-size:12px; color:#ff6f61;
}
.glass-card button {
    width:100%; padding:12px; border:none; border-radius:50px;
    background:linear-gradient(90deg,#ff6f61,#ffb88c); color:#fff;
    font-weight:bold; cursor:pointer; transition:0.3s;
}
.glass-card button:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(255,111,97,0.5); }
.glass-card .switch{ margin-top:15px; text-align:center; }
.glass-card .switch a{ color:#fff; text-decoration:underline; }

/* 验证码按钮 */
.code-btn {
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    padding:6px 12px;
    border:none;
    border-radius:50px;
    background:#ff6f61; /* 鲜艳红色 */
    color:#fff;
    cursor:pointer;
    font-size:12px;
    transition:0.3s;
}
.code-btn:disabled{ background:#ccc; cursor:not-allowed; }

/* Footer */
footer{background:#ff6f61; color:#fff; padding:40px 20px;}
footer .footer-container{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; }
footer .footer-col{ flex:1 1 200px; margin:10px; }
footer h3{margin-bottom:15px; font-size:18px;}
footer p, footer a{color:#fff; font-size:14px; text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* Responsive */
@media(max-width:768px){ .case-list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));} }
@media(max-width:480px){ .hero-content h2{font-size:32px;} .hero-content p{font-size:16px;} }