/* =========================================
   Govmind Skill — 全站公共样式 v1.0.5
   修复 hero + 登录弹窗自适应优化
   ========================================= */

/* ─── GLOBAL ────────────────────────────── */
html{scroll-behavior:smooth}

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

body{
    font-family:"Noto Sans SC",sans-serif;
    background:#f5f3ef;
    color:#111;
    overflow-x:hidden;
    /* 移除之前的 padding-top: 90px; 改用占位元素 */
}

.bg-glow{
    position:fixed;width:800px;height:800px;
    background:radial-gradient(circle,#153b6d22 0%,transparent 70%);
    top:-200px;right:-200px;z-index:-1;
    animation:floatGlow 12s ease-in-out infinite;
}
@keyframes floatGlow{
    0%{transform:translateY(0px)}50%{transform:translateY(40px)}100%{transform:translateY(0px)}
}

/* ─── NAVBAR ────────────────────────────── */
body > header[role="banner"]{
    position:fixed;top:0;width:100%;padding:24px 8%;
    display:flex;justify-content:space-between;align-items:center;
    background:rgba(255,255,255,0.6);backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.3);z-index:999;
}
.logo{
    font-size:24px;font-weight:900;letter-spacing:1px;
    text-decoration:none;color:#111;
}

/* 桌面导航 */
.primary-nav {
    display: flex;
    gap: 32px;
}
.primary-nav a {
    text-decoration: none;
    color: #111;
    font-size: 15px;
    transition: 0.3s;
}
.primary-nav a:hover {
    opacity: 0.5;
}

/* 导航占位元素，防止内容被固定头部遮挡 */
.header-placeholder {
    height: 90px;   /* 桌面端 header 高度 = 24*2 + 内容高度 */
}

/* ─── BUTTONS ───────────────────────────── */
.btn{padding:18px 34px;border-radius:999px;border:none;cursor:pointer;font-size:16px;transition:0.35s;font-family:inherit;text-decoration:none}
.btn-dark{background:#111;color:white}
.btn-light{background:white;border:1px solid #ddd}
.btn:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.12)}

/* ─── HERO (全局基础) ──────────────────── */
.hero{
    display: block;
    min-height: auto;
    padding: 140px 8% 80px;
    position: relative;
}
.hero-content{max-width:1000px;animation:fadeUp 1s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
.hero-label{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:#666;margin-bottom:24px}
.hero h1{font-size:88px;line-height:1.05;font-weight:900;letter-spacing:-3px;margin-bottom:32px}
.hero p{font-size:24px;line-height:1.8;max-width:760px;color:#555}
.hero-buttons{margin-top:50px;display:flex;gap:20px}

/* ─── SECTION ───────────────────────────── */
.section{padding:120px 8%}
.section-title{font-size:54px;margin-bottom:60px;font-weight:800;letter-spacing:-2px}

/* ─── SKILL CARDS ───────────────────────── */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:30px}
.skill-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.5);padding:36px;border-radius:32px;transition:0.4s}
.skill-card:hover{transform:translateY(-10px);box-shadow:0 20px 60px rgba(0,0,0,0.08)}
.skill-tag{font-size:12px;color:#777;margin-bottom:20px;text-transform:uppercase}
.skill-title{font-size:34px;font-weight:800;line-height:1.3;margin-bottom:20px}
.skill-desc{font-size:17px;line-height:1.9;color:#555;margin-bottom:24px}
.skill-meta{font-size:14px;color:#777;margin-bottom:28px}
.skill-actions{display:flex;gap:12px}
.small-btn{padding:12px 18px;border-radius:999px;border:1px solid #ddd;background:white;cursor:pointer;transition:0.3s;font-family:inherit}
.small-btn:hover{background:#111;color:white}

/* ─── COMMENTS SLIDER ───────────────────── */
.comments-slider{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.comments-slider::-webkit-scrollbar{height:6px}
.comments-slider::-webkit-scrollbar-thumb{background:#ccc;border-radius:999px}
.comment-card{min-width:420px;background:white;border-radius:32px;padding:36px;scroll-snap-align:start;transition:0.4s;border:1px solid #eee}
.comment-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,0.08)}
.comment-user{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.comment-user img{width:60px;height:60px;border-radius:50%}
.comment-name{font-weight:700;font-size:18px}
.comment-role{font-size:14px;color:#888}
.comment-content{font-size:20px;line-height:1.9;color:#333}

/* ─── SUBSCRIPTION CTA ──────────────────── */
.subscription{margin:120px 8%;padding:120px;border-radius:48px;background:linear-gradient(135deg,#0d1f36,#153b6d);color:white;position:relative;overflow:hidden}
.subscription::before{content:"";position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(255,255,255,0.1),transparent);top:-200px;right:-200px}
.subscription h2{font-size:64px;margin-bottom:24px;position:relative}
.subscription p{max-width:760px;font-size:22px;line-height:1.9;color:#d8d8d8;margin-bottom:40px;position:relative}

/* ─── EXCLUSIVE SERVICES ────────────────── */
.services-section{padding:140px 8%;background:#f7f4ef}
.services-header{max-width:980px;margin-bottom:80px}
.services-label{font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#777;margin-bottom:24px}
.services-title{font-size:76px;line-height:1.05;font-weight:900;letter-spacing:-3px;margin-bottom:30px}
.services-desc{font-size:22px;line-height:1.9;color:#666;max-width:860px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;margin-bottom:80px}
.service-card{position:relative;border-radius:40px;padding:42px;overflow:hidden;transition:0.35s}
.service-card:hover{transform:translateY(-10px);box-shadow:0 24px 60px rgba(0,0,0,0.08)}
.service-dark{background:linear-gradient(135deg,#0f1726,#18304d);color:white}
.service-light{background:linear-gradient(135deg,#ffffff,#f5f5f5)}
.service-gold{background:linear-gradient(135deg,#efe6d0,#f8f3e7)}
.service-label{font-size:13px;letter-spacing:3px;text-transform:uppercase;opacity:0.7;margin-bottom:24px}
.service-title{font-size:42px;line-height:1.15;font-weight:900;margin-bottom:24px}
.service-desc{font-size:17px;line-height:1.9;opacity:0.88;margin-bottom:34px}
.service-tags{display:flex;flex-wrap:wrap;gap:12px}
.service-tag{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,0.14);backdrop-filter:blur(10px);font-size:13px}

/* ─── CONSULT BOX ────────────────────────── */
.consult-box{background:white;border-radius:42px;padding:60px;display:grid;grid-template-columns:1fr 1fr;gap:50px}
.consult-left h3{font-size:48px;line-height:1.1;margin-bottom:24px}
.consult-left p{font-size:18px;line-height:1.9;color:#666;margin-bottom:34px}
.consult-contact{display:flex;flex-direction:column;gap:14px}
.contact-item{font-size:16px;color:#333}
.consult-form{display:flex;flex-direction:column;gap:18px}
.consult-form input,.consult-form textarea{width:100%;border:none;border-radius:22px;background:#f5f5f5;padding:18px 22px;font-size:16px;font-family:inherit}
.consult-form textarea{min-height:140px;resize:none}
.consult-btn{height:60px;border:none;border-radius:999px;background:#111;color:white;font-size:16px;cursor:pointer;transition:0.3s;font-family:inherit}
.consult-btn:hover{transform:scale(1.02)}

/* ─── FOOTER ─────────────────────────────── */
footer{padding:80px 8%;display:flex;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #ddd}
.footer-title{font-size:28px;font-weight:800;margin-bottom:20px}
.footer-links a{display:block;margin-bottom:12px;text-decoration:none;color:#555}
.footer-links a:hover{color:#111}
.footer-icp{
    width:100%;
    padding-top:16px;   /* 从32px降低 */
    margin-top:16px;    /* 从32px降低 */
    border-top:1px solid #eee;
    font-size:13px;
    color:#999;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.footer-icp a{color:#aaa;text-decoration:none;transition:color 0.2s}
.footer-icp a:hover{color:#666}

/* ─── HAMBURGER MENU ─────────────────────── */
.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;z-index:1001}
.menu-toggle span{display:block;width:24px;height:2px;background:#111;border-radius:2px;transition:0.35s}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── MOBILE NAV DRAWER ──────────────────── */
.nav-drawer{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:rgba(255,255,255,0.97);backdrop-filter:blur(30px);z-index:1000;padding:100px 40px 40px;display:flex;flex-direction:column;gap:8px;transition:right 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:-10px 0 40px rgba(0,0,0,0.08)}
.nav-drawer.open{right:0}
.nav-drawer a{display:block;text-decoration:none;color:#111;font-size:20px;font-weight:700;padding:14px 0;border-bottom:1px solid #f0f0f0;transition:0.2s}
.nav-drawer a:hover{opacity:0.5}
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:999;opacity:0;visibility:hidden;transition:0.35s}
.nav-overlay.open{opacity:1;visibility:visible}

/* ─── LOGIN MODAL（桌面优化版）────────── */
.login-modal{
    position:fixed;inset:0;z-index:99999;display:none;
    align-items:center;justify-content:center;
}
.login-modal.active{display:flex}
.login-overlay{
    position:absolute;inset:0;
    background:rgba(0,0,0,0.45);backdrop-filter:blur(10px);
}
.login-container{
    position:relative;width:900px;max-width:92%;
    background:rgba(255,255,255,0.75);backdrop-filter:blur(30px);
    border-radius:40px;overflow:hidden;
    display:grid;grid-template-columns:1.1fr 1fr;
    z-index:2;animation:modalFade 0.35s ease;
}
@keyframes modalFade{
    from{opacity:0;transform:translateY(40px) scale(0.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.login-close{
    position:absolute;top:22px;right:24px;
    font-size:22px;cursor:pointer;z-index:10;
}
.login-left{
    padding:50px;
    background:linear-gradient(135deg,#0d1f36,#153b6d);
    color:white;
}
.login-label{
    font-size:12px;letter-spacing:2px;opacity:0.7;
    margin-bottom:16px;
}
.login-left h2{
    font-size:36px;line-height:1.2;margin-bottom:20px;
}
.login-left p{
    font-size:16px;line-height:1.8;color:#d6d6d6;
    margin-bottom:32px;
}
.qrcode-box{
    width:200px;height:200px;background:white;
    border-radius:24px;display:flex;
    align-items:center;justify-content:center;
    margin-bottom:20px;
}
.qrcode-box img{width:170px;height:170px}
.wechat-tip{font-size:14px;opacity:0.8}
.login-right{
    padding:50px 40px;background:#f8f8f8;
}
.login-tabs{
    display:flex;gap:12px;margin-bottom:32px;
}
.login-tab{
    padding:12px 20px;border-radius:999px;border:none;
    background:#e8e8e8;cursor:pointer;font-family:inherit;
    font-size:14px;
}
.login-tab.active{background:#111;color:white}
.login-form{
    display:flex;flex-direction:column;gap:16px;
}
.login-form input{
    height:50px;border:none;border-radius:16px;
    padding:0 18px;font-size:15px;
    background:white;font-family:inherit;
}
.send-code-btn{
    height:48px;border:none;border-radius:16px;
    background:#ddd;cursor:pointer;font-family:inherit;
    font-size:15px;
}
.login-submit{
    height:50px;border:none;border-radius:999px;
    background:#111;color:white;font-size:16px;
    cursor:pointer;margin-top:6px;font-family:inherit;
}
.login-divider{
    text-align:center;margin:28px 0;color:#888;
    font-size:14px;
}
.other-login{
    display:flex;flex-direction:column;gap:12px;
}
.other-login button{
    height:48px;border:none;border-radius:16px;
    background:white;cursor:pointer;font-size:14px;
    font-family:inherit;
}

/* ─── SUCCESS TOAST ───────────────────────── */
.success-toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(30px);background:rgba(22,163,74,0.92);color:white;padding:18px 32px;border-radius:999px;font-size:16px;backdrop-filter:blur(20px);box-shadow:0 18px 40px rgba(0,0,0,0.15);opacity:0;visibility:hidden;z-index:999999;transition:0.4s ease}
.success-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ─── PAYMENT MODAL ──────────────────────── */
.payment-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center}
.payment-modal.active{display:flex}
.payment-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(12px)}
.payment-container{position:relative;width:520px;max-width:92%;background:rgba(255,255,255,0.82);backdrop-filter:blur(40px);border-radius:40px;padding:50px;z-index:2;text-align:center;animation:paymentFade 0.35s ease}
@keyframes paymentFade{from{opacity:0;transform:translateY(30px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.payment-close{position:absolute;top:22px;right:24px;font-size:22px;cursor:pointer}
.payment-title{font-size:36px;font-weight:900;margin-bottom:16px}
.payment-desc{font-size:16px;color:#666;line-height:1.8;margin-bottom:30px}
.payment-price{font-size:52px;font-weight:900;margin-bottom:28px}
.payment-qrcode{width:260px;height:260px;background:white;border-radius:30px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,0.06)}
.payment-qrcode img{width:220px;height:220px}
.payment-tip{font-size:15px;color:#666;margin-bottom:28px}
.payment-status{font-size:14px;color:#999}
.download-success{margin-top:20px;font-size:15px;color:#16a34a;display:none}

/* ─── SHARE MODAL ────────────────────────── */
.share-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center}
.share-modal.active{display:flex}
.share-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(12px)}
.share-container{position:relative;width:520px;max-width:92%;background:rgba(255,255,255,0.82);backdrop-filter:blur(40px);border-radius:42px;padding:50px;text-align:center;z-index:2;animation:shareFade 0.35s ease}
@keyframes shareFade{from{opacity:0;transform:translateY(30px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.share-close{position:absolute;top:22px;right:24px;font-size:22px;cursor:pointer}
.share-title{font-size:36px;font-weight:900;margin-bottom:16px}
.share-desc{font-size:16px;color:#666;line-height:1.8;margin-bottom:30px}
.share-qrcode{width:260px;height:260px;background:white;border-radius:30px;margin:0 auto 28px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,0.06)}
.share-qrcode img{width:220px;height:220px}
.share-platforms{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.share-platform{padding:12px 18px;border-radius:999px;background:#f3f3f3;font-size:14px}
.favorite-btn.active{background:#16a34a!important;color:white!important;border-color:#16a34a!important;transform:scale(1.03);box-shadow:0 12px 30px rgba(22,163,74,0.22)}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

/* ─ Tablet (≤1024px) ─── */
@media(max-width:1024px){
    body > header[role="banner"]{padding:20px 5%}
    .hero{padding:120px 5% 80px}
    .header-placeholder { height: 80px; }
    .section{padding:80px 5%}
    .subscription{margin:80px 5%;padding:80px 40px}
    .services-section{padding:100px 5%}
    .consult-box{padding:50px 40px}
    footer{padding:60px 5%}
}

/* ─ Mobile (≤768px) ──── */
@media(max-width:768px){
    .header-placeholder { height: 65px; }
    .primary-nav{display:none}
    .menu-toggle{display:flex}
    body > header[role="banner"]{padding:16px 5%}

    .hero{padding:90px 5% 60px}
    .hero h1{font-size:clamp(36px,10vw,64px);letter-spacing:-1px}
    .hero p{font-size:clamp(15px,4vw,18px)}
    .hero-label{font-size:12px}
    .hero-buttons{flex-direction:column;align-items:center;gap:14px;margin-top:28px}
    .hero-buttons .btn{height:60px;display:flex;align-items:center;justify-content:center;padding:0 34px;font-size:16px;width:100%;max-width:280px;text-align:center}

    .section{padding:60px 5%}
    .section-title{font-size:clamp(26px,8vw,38px);letter-spacing:-1px;margin-bottom:36px}
    .skill-grid{grid-template-columns:1fr}
    .skill-card{padding:28px}
    .skill-title{font-size:clamp(22px,6vw,28px)}
    .skill-actions{flex-wrap:wrap}
    .comment-card{min-width:min(90vw,320px);padding:28px}
    .comment-content{font-size:16px}
    .subscription{margin:40px 5%;padding:50px 28px;border-radius:32px}
    .subscription h2{font-size:clamp(28px,8vw,40px)}
    .subscription p{font-size:16px}
    .services-section{padding:70px 5%}
    .services-title{font-size:clamp(34px,9vw,52px);letter-spacing:-1px}
    .services-desc{font-size:16px}
    .services-header{margin-bottom:50px}
    .services-grid{grid-template-columns:1fr;gap:20px}
    .service-card{padding:32px;border-radius:28px}
    .service-title{font-size:clamp(26px,7vw,34px)}
    .consult-box{grid-template-columns:1fr;padding:32px 24px;border-radius:28px;gap:32px}
    .consult-left h3{font-size:clamp(24px,7vw,32px)}
    footer{padding:50px 5%;gap:32px;flex-direction:column}
   .footer-icp {padding-top: 12px;margin-top: 12px;}
    .footer-title{font-size:22px}
    /* 登录弹窗移动端优化：靠上对齐，可滚动，避免裁剪 */
    .login-modal{
        align-items: flex-start;
        padding: 20px 0;
    }
    .login-container{
        grid-template-columns:1fr;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 32px;
    }
    .login-left{ display:none; }
    .login-right{
        padding: 40px 28px;
    }
}

/* ─ Small (≤480px) ──── */
@media(max-width:480px){
    .header-placeholder { height: 60px; }
    .hero h1{font-size:clamp(30px,9vw,42px)}
    .subscription{padding:40px 20px}

    /* 登录弹窗小屏深度压缩 */
    .login-container{
        max-height: 90vh;
        border-radius: 24px;
    }
    .login-right{
        padding: 28px 18px;
    }
    .login-tabs{
        gap: 10px;
        margin-bottom: 20px;
    }
    .login-tab{
        padding: 10px 16px;
        font-size: 13px;
    }
    .login-form input{
        height: 44px;
        font-size: 14px;
        border-radius: 12px;
        padding: 0 14px;
    }
    .send-code-btn{
        height: 44px;
        font-size: 14px;
        border-radius: 12px;
    }
    .login-submit{
        height: 46px;
        font-size: 15px;
    }
    .other-login button{
        height: 44px;
        font-size: 14px;
        border-radius: 12px;
    }
    .login-divider{
        margin: 18px 0;
        font-size: 13px;
    }
    .login-close{
        top: 16px;
        right: 16px;
        font-size: 20px;
    }
}