/* =========================================================
   OA办公系统 ——
   蓝色软件落地页风格（#217AF9/#1C77FF），响应式重构（干净版）
   ========================================================= */

:root{
  --blue:#217AF9;
  --blue2:#1C77FF;
  --ink:#161F2D;
  --gray:#717F94;
  --bg:#F9FAFD;
  --line:#EBF0F6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',"Microsoft YaHei UI",-apple-system,sans-serif;background:#fff;color:var(--ink);line-height:1.7;}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%;display:block}
.w1200{max-width:1200px;margin:0 auto;padding:0 24px;}

/* ===== HEADER ===== */
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.header .logo img{height:38px;}
.headerdown{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;padding:8px 18px;border-radius:8px;margin-right:24px;transition:background .2s;}
.headerdown:hover{background:var(--blue2);color:#fff;}
.headerdown i{width:0;height:0;}
.fr{margin-left:auto;}
.nav-list{display:flex;gap:28px;list-style:none;}
.nav-list a{font-size:15px;font-weight:500;color:var(--gray);transition:color .2s;}
.nav-list a:hover{color:var(--blue);}

/* ===== HERO ===== */
.index_top{position:relative;background:linear-gradient(180deg,#EAF2FF 0%,#F9FAFD 100%);overflow:hidden;padding:60px 0 70px;}
.index_box{display:flex;justify-content:space-between;align-items:center;gap:40px;}
.idnex_left{flex:1;min-width:0;}
.logoAndTitle{display:flex;align-items:center;margin-bottom:18px;flex-wrap:wrap;}
.logoAndTitle .indexlogo{width:52px;height:52px;margin-right:14px;display:flex;align-items:center;justify-content:center;}
.logoAndTitle .indexlogo img{width:52px;height:52px;}
.logoAndTitle h1{font-size:38px;font-weight:900;color:var(--ink);line-height:52px;}
.logoAndTitle>i{width:1px;height:40px;border-left:1px solid rgba(22,31,45,0.6);margin:0 20px;}
.logoAndTitle>span{font-size:28px;font-weight:400;color:var(--ink);}
.idnex_left>h2{font-size:18px;font-weight:400;color:var(--gray);margin-top:14px;}
.hero-desc{font-size:15px;color:var(--gray);line-height:1.9;margin-top:14px;max-width:540px;}
.indexBtnBox{width:220px;height:56px;margin-top:40px;position:relative;}
.dwonBtn{display:flex;justify-content:center;align-items:center;width:220px;height:56px;background:var(--blue);box-shadow:0 18px 22px rgba(33,122,249,0.14);border-radius:8px;position:relative;overflow:hidden;z-index:5;transition:background .2s;}
.dwonBtn:hover{background:var(--blue2);color:#fff;}
.dwonBtn .icon{width:22px;height:22px;background:var(--blue2);border-radius:50%;margin-right:10px;}
.dwonBtn>span{font-size:18px;font-weight:500;color:#fff;}
.dwonBtn>.an{position:absolute;width:270px;height:270px;border-radius:50%;background:rgba(255,255,255,.2);top:-106px;animation:spread 1.5s infinite both;}
@keyframes spread{0%{transform:scale(0)}100%{transform:scale(1)}}
.somemsg{margin-top:14px;}
.somemsg p{font-size:12px;color:rgba(113,127,148,0.85);line-height:18px;margin-top:8px;}
.somemsg p span{margin:0 14px 0 0;}
.indeximg{width:440px;flex-shrink:0;border-radius:14px;box-shadow:0 18px 40px rgba(33,122,249,0.18);}

/* ===== PAIN 办公痛点 ===== */
.pain{background:#fff;padding:70px 0;}
.pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pain-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:26px 22px;transition:transform .25s,box-shadow .25s;}
.pain-card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(33,122,249,0.12);}
.pain-ico{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue2));display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px;}
.pain-card p{font-size:14px;color:var(--gray);line-height:1.8;}
.pain-card p span{color:var(--blue);font-weight:700;}

/* ===== TOPLIST 八大模块 ===== */
.toplistbox{padding:58px 0;background:#fff;overflow:hidden;}
.toplist{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;justify-items:center;}
.toplistitem{width:100%;max-width:260px;text-align:center;}
.toplistitem a{display:flex;flex-direction:column;align-items:center;padding:0 15px;}
.mod-ico{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:8px;box-shadow:0 4px 10px rgba(33,122,249,0.25);}
.postre{position:relative;top:0;transition:all .3s;}
.toplistitem a:hover .postre{top:-12px;}
.toplistitem img{width:260px;height:260px;margin:0 auto;border-radius:16px;object-fit:cover;box-shadow:0 6px 16px rgba(33,122,249,0.12);}
.toplistitem p{font-size:18px;color:var(--ink);margin-top:10px;font-weight:600;}

/* ===== INTRODUCE 图文 ===== */
.introduce{background:#fff;overflow:hidden;padding:20px 0 60px;}
.introduceitems{display:flex;align-items:center;gap:50px;margin:0 auto 62px;max-width:1200px;padding:0 24px;flex-wrap:wrap;}
.introduceitems:nth-child(even){flex-direction:row-reverse;}
.introduceImg{flex:1;min-width:300px;}
.introduceImg img{border-radius:16px;box-shadow:0 12px 30px rgba(33,122,249,0.1);}
.introduceImg-row{display:flex;gap:14px;flex-wrap:wrap;}
.introduceImg-row img{flex:1;min-width:140px;}
.introduceMsg{flex:1;min-width:300px;display:flex;flex-direction:column;justify-content:center;}
.introduceMsg h3{font-size:28px;font-weight:900;color:var(--ink);margin-bottom:16px;}
.introduceMsg>p{display:flex;align-items:center;font-size:17px;color:var(--gray);line-height:32px;}
.introduceMsg>p>i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:10px;flex-shrink:0;}
.introduceMsg .intro-line{font-size:15px;color:var(--blue);font-weight:600;margin:6px 0 14px;line-height:1.7;}
.introduceMsg .intro-sub{font-size:15px;color:var(--ink);font-weight:700;margin-top:16px;}

/* ===== FEATURES 八大特征 ===== */
.features{background:var(--bg);padding:70px 0;}
.features-head{text-align:center;margin-bottom:48px;}
.features-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--blue);letter-spacing:2px;margin-bottom:10px;}
.features-head h2{font-size:32px;font-weight:900;color:var(--ink);}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.feature-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 22px;box-shadow:0 2px 14px rgba(33,45,158,0.04);transition:transform .25s,box-shadow .25s;border-top:3px solid transparent;}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(33,122,249,0.14);border-top-color:var(--blue);}
.feature-ico{width:64px;height:64px;border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:0 6px 16px rgba(33,122,249,0.12);}
.feature-ico img{width:100%;height:100%;object-fit:cover;}
.feature-card h4{font-size:20px;font-weight:700;margin-bottom:10px;color:var(--ink);}
.feature-card p{font-size:14px;color:var(--gray);line-height:1.8;}

/* ===== ADV 四优势 ===== */
.adv{background:#fff;padding:70px 0;}
.adv .features-head{margin-bottom:48px;}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.adv-card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:30px 24px;text-align:center;transition:transform .25s,box-shadow .25s;}
.adv-card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(33,122,249,0.12);}
.adv-card img{width:180px;height:180px;margin:0 auto 16px;border-radius:16px;object-fit:cover;}
.adv-card h4{font-size:19px;font-weight:700;margin-bottom:10px;color:var(--ink);}
.adv-card p{font-size:14px;color:var(--gray);line-height:1.8;}

/* ===== CTA ===== */
.cta{background:linear-gradient(135deg,var(--blue) 0%,var(--blue2) 100%);padding:70px 0;position:relative;overflow:hidden;}
.cta-inner{display:grid;grid-template-columns:1.5fr 0.5fr;gap:40px;align-items:center;}
.cta-text h2{font-size:34px;font-weight:900;color:#fff;margin-bottom:16px;}
.cta-text p{font-size:16px;color:rgba(255,255,255,0.78);line-height:1.8;margin-bottom:26px;}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.cta-btns .dwonBtn{width:200px;}
.cta-tel{color:#fff;font-weight:700;font-size:16px;border-bottom:2px solid rgba(255,255,255,0.5);padding-bottom:2px;}
.cta-qr{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.16);border-radius:18px;padding:16px;text-align:center;justify-self:center;}
.cta-qr img{width:190px;height:190px;border-radius:12px;}
.cta-qr span{display:block;margin-top:12px;color:rgba(255,255,255,0.65);font-size:13px;}

/* ===== FOOTER ===== */
.footer{background:#0E1726;color:rgba(255,255,255,0.6);padding:56px 0 0;}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;}
.footer-logo{height:38px;margin-bottom:14px;}
.footer-brand{font-size:18px;font-weight:900;color:#fff;margin-bottom:12px;}
.footer-desc{font-size:13px;line-height:1.8;max-width:300px;}
.footer-col h4{font-size:15px;color:#fff;margin-bottom:16px;font-weight:700;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a{font-size:13px;color:rgba(255,255,255,0.6);transition:color .2s;}
.footer-col a:hover{color:#7db4ff;}
.footer-contact p{font-size:13px;line-height:1.9;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);text-align:center;padding:20px 24px;margin-top:44px;font-size:13px;color:rgba(255,255,255,0.45);}

/* ===== RESPONSIVE（置于文件末尾，独立媒体查询，互不嵌套）===== */
@media(max-width:980px){
  .nav-list{gap:18px;}
  .index_box{flex-direction:column;text-align:center;}
  .logoAndTitle{justify-content:center;}
  .hero-desc{margin-left:auto;margin-right:auto;}
  .indexBtnBox{margin:40px auto 0;}
  .indeximg{width:100%;max-width:420px;margin-top:20px;}
  .pain-grid{grid-template-columns:repeat(2,1fr);}
  .toplist{grid-template-columns:repeat(2,1fr);}
  .introduceitems,.introduceitems:nth-child(even){flex-direction:column;gap:30px;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .adv-grid{grid-template-columns:repeat(2,1fr);}
  .cta-inner{grid-template-columns:1fr;text-align:center;}
  .cta-btns{justify-content:center;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  .headerdown{display:none;}
  .nav-list{flex-wrap:wrap;gap:12px;font-size:13px;}
  .logoAndTitle h1{font-size:28px;}
  .idnex_left>h2{font-size:16px;}
  .toplist{grid-template-columns:repeat(2,1fr);gap:16px;}
  .pain-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
  .adv-grid{grid-template-columns:1fr;}
  .features-head h2,.cta-text h2{font-size:26px;}
  .footer-inner{grid-template-columns:1fr;}
}