:root{--rgb-color-base:31,41,55;--rgb-color-primary:91,155,242;--rgb-color-accent:27,35,50;--transition:.2s ease;--header-bg:rgba(255,255,255,0.95);--header-h:64px;--header-color:rgb(var(--rgb-color-base));--header-color-muted:rgba(var(--rgb-color-base),.6);--footer-bg:#1B2332;--footer-color:#d1d5db;--footer-color-muted:#9ca3af;--text:rgb(var(--rgb-color-base));--text-muted:#6b7280;--border:#e5e7eb;--bg-page:#ffffff;--bg-muted:#F5F5F7;--radius:16px;--radius-lg:24px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;font-size:14px;line-height:1.6;color:var(--text);background:var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none;transition:color var(--transition)}
img{max-width:100%;height:auto;display:block}
button{border:none;background:none;cursor:pointer;font:inherit;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3}

/*return top*/
.return-top{width:44px;height:44px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:9999px;position:fixed;bottom:32px;right:24px;cursor:pointer;display:none;z-index:1;color:var(--header-color-muted);box-shadow:0 2px 12px rgba(0,0,0,.08);transition:all var(--transition)}
.return-top:hover{background:#fff;color:rgb(var(--rgb-color-primary));border-color:rgb(var(--rgb-color-primary));box-shadow:0 4px 16px rgba(var(--rgb-color-primary),.15);transform:translateY(-2px)}
.return-top svg{display:block;margin:0 auto}
.return-top.actived{display:inline-flex;align-items:center;justify-content:center}

/*flex*/
.flex{display:flex}
.inline-flex{display:inline-flex}
.flex-direction-row{flex-direction:row}
.flex-direction-column{flex-direction:column}
.flex-wrap-nowrap{flex-wrap:nowrap}
.flex-wrap-wrap{flex-wrap:wrap}
.flex-wrap-reverse{flex-wrap:wrap-reverse}
.flex-justify-start{justify-content:flex-start}
.flex-justify-end{justify-content:flex-end}
.flex-justify-center{justify-content:center}
.flex-justify-around{justify-content:space-around}
.flex-justify-between{justify-content:space-between}
.flex-align-start{align-items:flex-start}
.flex-align-end{align-items:flex-end}
.flex-align-center{align-items:center}

.container{max-width:1230px;margin:0 auto;padding:0 15px;position:relative;z-index:0}
.container-wide{max-width:1740px;margin:0 auto;padding:0 24px}
.container-1680{max-width:1680px;margin:0 auto;padding:0 24px}
@media (max-width:768px){
    .container-wide,.container-1680{padding:0 16px}
}
.section-header{text-align:center;margin-bottom:40px}
.section-title{font-size:36px;font-weight:700;color:var(--text);line-height:1.2}
.section-desc{font-size:16px;color:var(--text-muted);margin-top:12px;line-height:1.6}
/* header desktop start */
.header{position:sticky;top:0;left:0;right:0;z-index:102;background:var(--header-bg);border-bottom:1px solid var(--border)}
@media (min-width:601px){
    body.customize-support.header-sticky .header,
    body.customize-support.header-sticky .mega-overlay{top:var(--wp-admin--admin-bar--height)}
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);max-width:1740px;margin:0 auto;padding:0 24px;background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header-logo{display:flex;align-items:center;filter:brightness(0)}
.header-logo img{height:24px;width:auto}
.header-nav{display:flex;align-items:center;gap:6px}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;font-size:14px;font-weight:500;color:var(--header-color-muted);border-radius:8px;transition:all var(--transition)}
.nav-link:hover{color:var(--header-color);background:rgba(var(--rgb-color-base),.05)}
.nav-link:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:2px}
.nav-link svg{width:14px;height:14px;color:#9ca3af}
.nav-link.nav-ai{color:#ea580c;background:#fff7ed}
.nav-link.nav-ai:hover{background:#ffedd5}
.nav-link .sparkle{font-size:10px;animation:sparkle-pulse 2s ease-in-out infinite}
@keyframes sparkle-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.header-actions{display:flex;align-items:center;gap:8px}
.btn-globe{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;color:#4b5563;transition:all var(--transition)}
.btn-globe:hover{background:rgba(var(--rgb-color-base),.05)}
.btn-globe svg{width:20px;height:20px}
.btn-header-download{padding:8px 20px;background:#1f2937;color:#fff;font-size:14px;font-weight:500;border-radius:9999px;transition:all var(--transition);text-decoration:none}
.btn-header-download:hover{background:#374151}
.btn-header-login{padding:8px 16px;font-size:14px;font-weight:500;color:var(--header-color);border:1px solid var(--border);border-radius:9999px;transition:all var(--transition);text-decoration:none}
.btn-header-login:hover{background:rgba(var(--rgb-color-base),.05)}
.btn-hamburger{display:none;padding:8px;border-radius:8px}
.btn-hamburger:hover{background:rgba(var(--rgb-color-base),.05)}
.btn-hamburger:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:2px}
.btn-header-download:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:2px}
.btn-header-login:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:2px}
.btn-globe:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:2px}
.btn-hamburger svg{width:20px;height:20px}
.btn-hamburger .icon-close{display:none}
.btn-hamburger.is-open .icon-hamburger{display:none}
.btn-hamburger.is-open .icon-close{display:block}
.mobile-dropdown{display:none}

/* Mega Menu */
.mega-menu-panel{position:fixed;top:var(--header-h);left:0;right:0;z-index:103;background:#fff;border-top:1px solid var(--border);overflow:hidden;max-height:0;opacity:0;visibility:hidden;transition:max-height .3s ease,opacity .25s ease,visibility .25s ease}
.mega-menu-panel.active{opacity:1;visibility:visible;max-height:600px}
.mega-overlay{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:102;background:rgba(0,0,0,.15);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;pointer-events:none}
.mega-overlay.active{opacity:1;visibility:visible;pointer-events:auto}
@media (min-width:601px){
    body.customize-support.header-sticky .mega-menu-panel{top:calc(var(--header-h) + var(--wp-admin--admin-bar--height))}
    body.customize-support.header-sticky .mega-overlay{top:calc(var(--header-h) + var(--wp-admin--admin-bar--height))}
}
.mega-menu-inner{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;max-width:1200px;margin:0 auto;padding:32px 24px}
.mega-col-header{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.mega-col-header h3{font-size:14px;font-weight:700;color:var(--text);margin:0}
.mega-icon{width:20px;height:20px}
.mega-badge-new{font-size:10px;background:#dbeafe;color:#2563eb;padding:2px 6px;border-radius:4px;font-weight:700}
.mega-col ul{display:flex;flex-direction:column;gap:10px}
.mega-col ul li a{font-size:13px;color:#6b7280;transition:color var(--transition)}
.mega-col ul li a:hover{color:var(--text)}
.mega-col ul li a:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:2px}
.mega-col-split{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.mega-sub-list{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.mega-more-link{display:inline-block;margin-top:12px;font-size:13px;color:rgb(var(--rgb-color-primary));transition:color var(--transition)}
.mega-more-link:hover{color:#4a8ae0}
.mega-more-link:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:2px}
/* header desktop end */

/* footer desktop start */
.footer{background:var(--footer-bg);color:var(--footer-color)}
.footer-main{padding:48px 0}
.footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.footer-col h3{color:#fff;font-size:14px;font-weight:600;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--footer-color-muted);transition:color var(--transition)}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:24px 0}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom-logo img{height:20px;opacity:.7;filter:brightness(0) invert(1)}
.footer-bottom p{font-size:12px;color:var(--footer-color-muted)}
.footer-bottom-links{display:flex;align-items:center;gap:16px}
.footer-bottom-links a{font-size:12px;color:var(--footer-color-muted);transition:color var(--transition)}
.footer-bottom-links a:hover{color:#d1d5db}
/* footer desktop end */

.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 48px;background:rgb(var(--rgb-color-accent));color:#fff;font-size:18px;font-weight:600;border-radius:9999px;transition:all var(--transition)}
.btn-primary:hover{background:#374151;box-shadow:0 8px 24px rgba(0,0,0,.15);transform:translateY(-1px)}
.btn-primary img{width:20px;height:20px}
.btn-cta{display:inline-flex;align-items:center;padding:14px 40px;background:rgb(var(--rgb-color-primary));color:#fff;font-size:16px;font-weight:700;border-radius:9999px;transition:all var(--transition)}
.btn-cta:hover{background:#4a8ae0;box-shadow:0 8px 24px rgba(91,155,242,.3)}

@media (max-width:768px){
    :root{--header-h:56px}
    /* header mobile start */
    .header-inner{padding:0 16px}
    .header-nav{display:none}
    .btn-globe{display:none}
    .btn-header-download{display:none}
    .btn-header-login{display:none}
    .btn-hamburger{display:block}
    .mega-menu-panel{display:none}
    .mega-overlay{display:none}
    .mobile-dropdown{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease}
    .mobile-dropdown.active{max-height:calc(100vh - var(--header-h));opacity:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#d1d5db transparent;border-bottom:1px solid var(--border)}
    .mobile-dropdown.active::-webkit-scrollbar{width:4px}
    .mobile-dropdown.active::-webkit-scrollbar-track{background:transparent}
    .mobile-dropdown.active::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}
    .mobile-dd-link{display:block;padding:14px 20px;font-size:15px;font-weight:500;color:var(--text);border-bottom:1px solid #f3f4f6}
    .mobile-dd-link:last-of-type{border-bottom:none}
    .mobile-dd-link:hover{background:rgba(var(--rgb-color-base),.03)}
    .mobile-dd-link:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:-2px}
    .mobile-dd-ai{color:#ea580c}
    .mobile-dd-btns{display:flex;gap:10px;padding:16px 20px 20px}
    .mobile-dd-download{display:inline-flex;flex:1;text-align:center;justify-content:center}
    .mobile-dd-login{display:inline-flex;flex:1;text-align:center;justify-content:center}
    .mobile-dd-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;background:none;border:none;text-align:left}
    .mobile-dd-toggle:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:-2px}
    .mobile-dd-arrow{transition:transform .2s ease;flex-shrink:0}
    .mobile-dd-toggle.active .mobile-dd-arrow{transform:rotate(180deg)}
    .mobile-dd-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#f9fafb}
    .mobile-dd-sub.active{max-height:1500px}
    .mobile-dd-sub-label{display:flex;align-items:center;gap:8px;padding:10px 24px 4px;font-size:12px;font-weight:700;color:#9ca3af;text-transform:uppercase}
    .mobile-dd-sub-label .mega-icon{width:16px;height:16px}
    .mobile-dd-sub-link{display:block;padding:10px 24px;font-size:14px;color:#6b7280;border-bottom:1px solid #f3f4f6}
    .mobile-dd-sub-link:last-child{border-bottom:none}
    .mobile-dd-sub-link:hover{color:var(--text);background:rgba(var(--rgb-color-base),.03)}
    .mobile-dd-sub-link:focus-visible{outline:2px solid rgb(var(--rgb-color-primary));outline-offset:-2px}
    /* header mobile end */
    /* footer mobile start */
    .footer-grid{grid-template-columns:repeat(2,1fr);gap:32px 24px}
    .footer-bottom-inner{flex-direction:column;text-align:center}
    /* footer mobile end */
    .section-title{font-size:26px}
    .section-desc{font-size:14px}
}