/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans","Segoe UI",Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1;background:#fff;color:#000;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,li{list-style:none}
img{max-width:100%;display:block}
button{border:none;background:none;cursor:pointer;font-family:inherit}

/* ===== SKIP LINK (accessibility) ===== */
.skip-link{position:absolute;top:-100px;left:0;background:#000;color:#fff;padding:8px 16px;z-index:10000;font-size:14px;transition:top .2s}
.skip-link:focus{top:0}

/* ===== CONTAINER ===== */
.container{width:88%;max-width:1200px;margin:0 auto}

/* ===== DOWNLOAD BTN (shared) ===== */
.download-btn{display:inline-block;background-color:rgba(0,0,0,.8);color:#fff;font-weight:700;border-radius:6px;text-align:center;cursor:pointer;transition:transform .3s ease-in-out}
.download-btn:hover{box-shadow:inset 0 0 8px 29px rgba(0,0,0,.05);transform:translate3d(0,-5px,0)}
.download-btn:active{transform:translateY(0)}

/* ===== HEADER ===== */
.header{position:fixed;top:0;left:0;right:0;height:62px;z-index:999;background:#fff;box-shadow:0 12px 64px 0 rgba(154,171,233,.16);transition:background-color .2s ease-in-out}
.header-pc{display:flex;align-items:center;height:62px;max-width:1440px;margin:0 auto;padding:0 24px}
.header-left{flex:0 0 180px;display:flex;align-items:center}
.logo{height:24px}
.header-center{flex:1;display:flex;justify-content:center}
.menu-list{display:flex;align-items:center;gap:8px}
.menu-item .menu-name{display:block;padding:8px 16px;font-size:14px;font-weight:500;color:#000;border-radius:8px;transition:background .2s}
.menu-item .menu-name:hover{background:rgba(13,13,13,.06)}
.header-right{flex:0 0 300px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.lang-btn{width:24px;height:24px;cursor:pointer}
.lang-icon{width:24px;height:24px}
.sign-in-btn{font-size:14px;font-weight:500;padding:0 16px;height:36px;line-height:36px;border-radius:8px;border:1px solid #333;cursor:pointer;transition:background .2s}
.sign-in-btn:hover{background:rgba(13,13,13,.06)}
.header-download-btn{font-size:14px;font-weight:500;padding:0 16px;height:38px;line-height:38px;border-radius:8px;background:#333}
.header-download-btn:hover{background:#0d0d0d;transform:none}
.header-mobile{display:none}

/* ===== HERO ===== */
.hero-section{position:relative;padding-top:126px;text-align:center;background:#9b9b9d;background:url(../images/background-ai.png) no-repeat top 62px center;background-size:100%;padding-bottom:60px}
.wps-hero-logo{width:96px;height:96px;margin:0 auto}
.hero-title{margin-top:9px;font-size:60px;font-weight:700;line-height:68px;color:#000}
.hero-desc{margin-top:16px;margin-bottom:64px;font-size:28px;font-weight:500;line-height:36px;background:linear-gradient(89.92deg,#000 50.34%,#4831da 80.07%,#0036aa 99.89%);-webkit-background-clip:text;color:transparent}
.hero-btn-box{text-align:center;margin-bottom:16px}
.hero-download-btn{font-size:18px;padding:0 30px;height:54px;line-height:54px;min-width:262px}
.honor-row{display:inline-flex;margin-top:20px;gap:32px}
.honor-item{position:relative}
.honor-text-box{padding:0 16px;margin:0 20px;position:relative}
.honor-text-box::before,.honor-text-box::after{content:"";background-image:url(../images/wheat.svg);width:20px;height:50px;position:absolute;background-size:100%;background-repeat:no-repeat}
.honor-text-box::before{left:-20px;top:0}
.honor-text-box::after{top:0;right:-20px;transform:rotateY(180deg)}
.honor-title{color:rgba(0,0,0,.8);font-size:18px;font-weight:700;line-height:26px;margin-bottom:2px}
.honor-desc{color:rgba(0,0,0,.7);font-size:12px;font-weight:700;line-height:20px}

/* ===== AI MODULE CARDS ===== */
.ai-module-section{max-width:1286px;margin:48px auto;padding:0 40px}
.ai-cards-row{display:flex;gap:24px;min-height:688px}
.ai-card{border-radius:24px;border:2px solid rgba(255,255,255,.2);backdrop-filter:blur(50px);padding:32px;overflow:hidden}
.ai-card-doc{flex:.3;background:linear-gradient(180deg,rgba(46,117,255,.5),rgba(104,155,255,.5));box-shadow:0 4px 24px 0 rgba(71,81,135,.1)}
.ai-card-right{flex:.7;display:flex;flex-direction:column;gap:24px}
.ai-card-right-top{display:flex;gap:24px;height:60%}
.ai-card-right-bottom{display:flex;gap:24px;height:40%}
.ai-card-pdf{flex:.56;background:#ffdfda;box-shadow:0 4px 24px 0 rgba(95,95,95,.1)}
.ai-card-ppt{flex:.44;background:#ffd2b2;box-shadow:0 4px 24px 0 rgba(95,95,95,.1)}
.ai-card-xls{flex:.44;background:#ceecdf;box-shadow:0 4px 24px 0 rgba(71,81,135,.1)}
.ai-card-img{flex:.56;background:#dbdbff;box-shadow:0 4px 24px 0 rgba(71,81,135,.1)}
.ai-card-header{display:flex;align-items:center;gap:16px;font-size:24px;font-weight:600;line-height:40px}
.ai-card-header img{width:40px;height:40px;flex-shrink:0}
.ai-card-header .card-label{font-size:20px}
.card-color-doc{color:#0059e8}
.card-color-pdf{color:#ce1e29}
.card-color-ppt{color:#c82912}
.card-color-xls{color:#007d53}
.card-color-img{color:#6552e2}
.ai-card-body{margin-top:24px;overflow:hidden}
.ai-card-body img{width:100%;border-radius:12px}

/* ===== SECTION TITLES ===== */
.section-title{font-size:48px;font-weight:700;line-height:56px;color:#000;text-align:center}
.section-subtitle{font-size:24px;font-weight:500;line-height:32px;color:#000;text-align:center;margin-top:8px}

/* ===== AI FEATURES CAROUSEL ===== */
.ai-features-section{padding:80px 0}
.ai-features-section .section-title{margin-bottom:48px}
.features-carousel,.showcase-carousel{position:relative}
.carousel-nav{position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;transform:translateY(-50%);z-index:10;pointer-events:none}
.carousel-arrow{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:box-shadow .2s}
.carousel-arrow:hover{box-shadow:0 4px 20px rgba(0,0,0,.15)}
.carousel-arrow img{width:24px;height:24px}
.carousel-track-wrapper{overflow:hidden;border-radius:16px}
.carousel-track{display:flex;transition:transform .5s ease-in-out}
.feature-slide{min-width:100%;display:flex;border-radius:16px;overflow:hidden;background:#f8f8fa}
.feature-slide-img{flex:1;overflow:hidden}
.feature-slide-img img{width:100%;height:100%;object-fit:cover}
.feature-slide-text{flex:0 0 400px;padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.feature-slide-text h3{font-size:28px;font-weight:700;line-height:36px;margin-bottom:16px}
.feature-slide-text p{font-size:16px;line-height:24px;color:rgba(0,0,0,.7)}

/* ===== SHOWCASE CAROUSEL ===== */
.showcase-section{padding:80px 0;background:#fafafa}
.showcase-section .section-title{margin-bottom:4px}
.showcase-section .section-subtitle{margin-bottom:48px}
.showcase-slide{min-width:100%;display:flex;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.05)}
.showcase-slide-img{flex:1;overflow:hidden}
.showcase-slide-img img{width:100%;height:100%;object-fit:cover}
.showcase-slide-text{flex:0 0 420px;padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.showcase-slide-text h3{font-size:24px;font-weight:700;line-height:32px;margin-bottom:16px}
.showcase-slide-text p{font-size:16px;line-height:24px;color:rgba(0,0,0,.7)}

/* ===== SECURITY ===== */
.security-section{padding:80px 0}
.security-desc{max-width:800px;margin:16px auto 48px;text-align:center;font-size:16px;line-height:24px;color:rgba(0,0,0,.7)}
.security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.security-card{background:#f8f8fa;border-radius:16px;padding:40px 32px;text-align:center}
.security-icon{width:80px;height:80px;margin:0 auto 24px}
.security-card h3{font-size:20px;font-weight:700;line-height:28px;margin-bottom:12px}
.security-card p{font-size:14px;line-height:22px;color:rgba(0,0,0,.7)}

/* ===== AWARDS ===== */
.awards-section{padding:80px 0;background:#fafafa}
.awards-section .section-subtitle{margin-bottom:48px}
.awards-highlight{display:flex;gap:24px;margin-bottom:48px}
.award-highlight-card{flex:1;border-radius:16px;overflow:hidden;position:relative}
.award-highlight-card img{width:100%;height:100%;object-fit:cover}
.award-highlight-card .award-overlay{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff}
.award-highlight-card .award-overlay h3{font-size:18px;font-weight:700;line-height:26px;margin-bottom:8px}
.award-highlight-card .award-overlay a{color:#fff;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.awards-badges{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.award-badge{width:120px;text-align:center}
.award-badge img{width:100%;border-radius:8px;margin-bottom:8px}
.award-badge p{font-size:12px;line-height:18px;color:rgba(0,0,0,.6)}

/* ===== REVIEWS ===== */
.reviews-section{padding:80px 0}
.reviews-section .section-subtitle{margin-bottom:48px}
.reviews-carousel{position:relative;overflow:hidden;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.reviews-carousel::-webkit-scrollbar{display:none}
.reviews-track{display:flex;gap:24px;transition:none;width:max-content}
.review-card{min-width:calc(33.333% - 16px);background:#f8f8fa;border-radius:16px;padding:32px;flex-shrink:0}
.review-card-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;margin-bottom:16px}
.review-card-avatar img{width:100%;height:100%;object-fit:cover}
.review-card-text{font-size:14px;line-height:22px;color:rgba(0,0,0,.7);margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.review-card-name{font-size:16px;font-weight:700;line-height:24px}
.review-card-role{font-size:12px;color:rgba(0,0,0,.5);line-height:18px}

/* ===== COMMUNITY ===== */
.community-section{padding:80px 0;background:#fafafa}
.community-section .section-title{margin-bottom:48px}
.community-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.community-card{background:#fff;border-radius:16px;padding:32px;text-align:center}
.community-card img{width:48px;height:48px;margin:0 auto 16px}
.community-card h3{font-size:18px;font-weight:700;margin-bottom:8px}
.community-card p{font-size:14px;color:rgba(0,0,0,.6);line-height:22px}
.community-links{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.community-links a{font-size:14px;color:rgba(0,0,0,.7);transition:color .2s}
.community-links a:hover{color:#000}
.learn-more-link{font-size:14px;color:rgba(0,0,0,.7);margin-top:12px;display:inline-flex;align-items:center;gap:4px}
.learn-more-link:hover{color:#000}
.community-social{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.community-social-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:rgba(0,0,0,.7);padding:8px 16px;border-radius:8px;border:1px solid rgba(0,0,0,.1);transition:background .2s}
.community-social-btn:hover{background:rgba(0,0,0,.04)}
.community-social-btn img{width:24px;height:24px}

/* ===== FOOTER CTA ===== */
.footer-cta{padding:80px 0;background:url(../images/footer_download_bg.png) no-repeat center;background-size:cover;text-align:center}
.footer-cta-logo{width:64px;height:64px;margin:0 auto 24px}
.footer-cta h2{font-size:36px;font-weight:700;line-height:44px;color:#000;margin-bottom:32px}
.footer-download-btn{font-size:18px;padding:0 48px;height:54px;line-height:54px}

/* ===== FOOTER ===== */
.footer{background:#1a1a1a;color:rgba(255,255,255,.7);padding:48px 0 24px}
.footer-inner{display:flex;gap:48px}
.footer-col{flex:1}
.footer-col h4{color:#fff;font-size:16px;font-weight:700;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:rgba(255,255,255,.6);transition:color .2s}
.footer-col a:hover{color:#fff}
.social-links{display:flex;gap:12px}
.social-links img{width:32px;height:32px;opacity:.7;transition:opacity .2s}
.social-links img:hover{opacity:1}
.footer-bottom{text-align:center;padding-top:32px;margin-top:32px;border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,.4)}

/* ===== BACK TO TOP ===== */
.back-to-top{position:fixed;bottom:32px;right:32px;width:48px;height:48px;cursor:pointer;opacity:0;transition:opacity .3s;z-index:998}
.back-to-top.visible{opacity:1}
.back-to-top img{width:100%}

/* ===== RESPONSIVE ===== */
@media screen and (max-width:1366px){
  .section-title{font-size:36px;line-height:42px}
  .section-subtitle{font-size:20px;line-height:28px}
  .hero-title{font-size:48px;line-height:56px}
  .hero-desc{font-size:24px;line-height:32px}
}
@media screen and (max-width:992px){
  .header-pc{display:none}
  .header-mobile{display:flex;align-items:center;height:62px;padding:0 16px}
  .mobile-left{flex:0 0 24px}
  .menu-toggle{width:24px;height:24px;cursor:pointer}
  .mobile-center{flex:1;padding-left:16px}
  .m-logo{height:24px}
  .mobile-right{display:flex;justify-content:flex-end}
  .header-download-btn-m{font-size:16px;font-weight:500;padding:0 16px;height:38px;line-height:38px;border-radius:8px;background:#333}
  .section-title{font-size:28px;line-height:36px}
  .section-subtitle{font-size:16px;line-height:24px}
  .hero-title{font-size:26px;line-height:34px}
  .hero-desc{font-size:16px;line-height:24px;margin-bottom:32px}
  .hero-section{padding-top:100px}
  .hero-download-btn{min-width:200px;font-size:16px;height:48px;line-height:48px}
  .ai-module-section{padding:0 24px}
  .ai-cards-row{flex-direction:column;min-height:auto}
  .ai-card-right-top,.ai-card-right-bottom{flex-direction:column;height:auto}
  .feature-slide{flex-direction:column}
  .feature-slide-text{flex:none;padding:24px}
  .showcase-slide{flex-direction:column}
  .showcase-slide-text{flex:none;padding:24px}
  .security-grid{grid-template-columns:1fr}
  .awards-highlight{flex-direction:column}
  .review-card{min-width:calc(100% - 16px)}
  .community-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:32px}
  .footer-cta h2{font-size:24px;line-height:32px}
  .honor-row{flex-direction:row;gap:8px}
  .honor-text-box{padding:0;margin:0 20px}
  .honor-title{font-size:12px;line-height:22px}
  /* Mobile menu */
  .header-center{display:none;position:fixed;top:62px;left:0;right:0;bottom:0;background:#fff;z-index:998;padding:16px;overflow-y:auto}
  .header-center.mobile-open{display:block}
  .header-center .menu-list{flex-direction:column;gap:0}
  .header-center .menu-item .menu-name{display:block;padding:16px 8px;font-size:16px;font-weight:700;border-bottom:1px solid #ebecee}
}