/* ============================================================
   闪帧官网 · 门厅页（Gateway）样式
   - 只被 website/index.html 加载；类名统一 gw- 前缀，与 brand.css 隔离
   - 设计目标：一屏展示 · 第一屏只做“选体系”这一个决定 · 不做向下滚动
   - 尺寸全部用 vh/vw clamp，屏幕越高卡片越大，矮屏自动收敛
   - 一屏校验：1440×900 / 1366×768 / 1280×720 / 390×844 / 360×640 均无滚动
     校验脚本：website-redesign/tools/one-screen-check.cjs
   ============================================================ */
:root{
  --gw-ink:#101d33; --gw-muted:#66758a; --gw-line:#e3e9f1; --gw-bg:#f5f8fc; --gw-panel:#fff;
  --gw-ai:#2369e8; --gw-ai-deep:#1250c4; --gw-ai-soft:#eaf2ff; --gw-ai-line:#c6d9f8;
  --gw-anim:#f6a51a; --gw-anim-deep:#d98a10; --gw-anim-bg:#0a0c11; --gw-anim-bg2:#171a24;
  --gw-radius:30px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.gw-body{
  margin:0; min-height:100vh; min-height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(circle at 8% -12%, rgba(35,105,232,.13), transparent 44%),
    radial-gradient(circle at 94% -4%, rgba(246,165,26,.18), transparent 42%),
    radial-gradient(rgba(16,29,51,.05) 1px, transparent 1.3px) 0 0/26px 26px,
    var(--gw-bg);
  color:var(--gw-ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.gw-body a{color:inherit}
.gw-body :focus-visible{outline:2px solid var(--gw-ai); outline-offset:3px; border-radius:8px}
.gw-card-anim :focus-visible{outline-color:var(--gw-anim)}

/* ---------- 导航：只有 logo / 登录 / 帮助 ---------- */
.gw-nav{display:flex; align-items:center; justify-content:space-between; gap:18px;
        height:clamp(60px,8.6vh,84px); padding:0 clamp(20px,4.4vw,64px)}
.gw-brand{display:inline-flex; align-items:center; gap:13px; text-decoration:none; font-weight:900; letter-spacing:-.02em}
.gw-brand img{width:clamp(30px,3.8vh,38px); height:auto; display:block}
.gw-brand span{font-size:clamp(17px,2.1vh,21px)}
.gw-actions{display:flex; align-items:center; gap:clamp(14px,1.6vw,26px); font-size:clamp(12.5px,1.35vh,14px); font-weight:800}
.gw-actions a{color:var(--gw-muted); text-decoration:none; padding:9px 4px; transition:color .2s ease}
.gw-actions a:hover{color:var(--gw-ink)}

/* ---------- 主体：标题区 + 两张体系卡 + 对比入口 ---------- */
.gw-main{display:flex; flex-direction:column; justify-content:center;
         gap:clamp(14px,2.6vh,34px); padding:0 clamp(20px,4.4vw,64px) clamp(8px,1.6vh,20px)}
.gw-hero{max-width:1000px; margin:0 auto; text-align:center}
.gw-eyebrow{display:inline-block; margin-bottom:clamp(6px,1.4vh,16px);
            color:var(--gw-ai); font-size:clamp(10px,1.15vh,12px); font-weight:900; letter-spacing:.24em}
.gw-hero h1{margin:0; font-size:clamp(26px,min(5.1vw,7.4vh),68px); line-height:1.06; letter-spacing:-.05em}
.gw-hero p{margin:clamp(8px,1.6vh,18px) 0 0; color:var(--gw-muted);
           font-size:clamp(13px,min(1.35vw,2.1vh),18px); line-height:1.7}

.gw-systems{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
            gap:clamp(16px,2vw,30px); width:100%; max-width:1340px; margin:0 auto}
.gw-card{position:relative; overflow:hidden; display:flex; flex-direction:column;
         justify-content:space-between;
         gap:clamp(9px,1.5vh,19px); min-height:clamp(272px,46vh,432px);
         padding:clamp(22px,4.2vh,48px) clamp(22px,2.6vw,46px);
         border:1px solid var(--gw-line); border-radius:var(--gw-radius); background:var(--gw-panel);
         transition:transform .38s cubic-bezier(.2,.75,.25,1), box-shadow .38s ease, border-color .3s ease}
/* 顶部体系色高光条 */
.gw-card::before{content:''; position:absolute; left:0; right:0; top:0; height:5px;
                 background:linear-gradient(90deg, var(--gw-ai), rgba(35,105,232,0) 72%)}
.gw-card:hover{transform:translateY(-10px)}

.gw-card-ai{background:linear-gradient(152deg,var(--gw-ai-soft) 0%,#fff 58%); border-color:var(--gw-ai-line)}
.gw-card-ai::after{content:''; position:absolute; width:380px; height:380px; right:-150px; top:-170px; border-radius:50%;
                   background:radial-gradient(circle, rgba(35,105,232,.16), transparent 66%); pointer-events:none}
.gw-card-ai:hover{border-color:var(--gw-ai); box-shadow:0 34px 74px rgba(20,60,140,.22)}

.gw-card-anim{color:#fff; border-color:rgba(255,255,255,.14);
              background:radial-gradient(circle at 88% 4%, rgba(246,165,26,.20), transparent 48%), linear-gradient(152deg,var(--gw-anim-bg2),var(--gw-anim-bg))}
.gw-card-anim::before{background:linear-gradient(90deg, var(--gw-anim), rgba(246,165,26,0) 72%)}
.gw-card-anim::after{content:''; position:absolute; width:400px; height:400px; right:-150px; bottom:-190px; border-radius:50%;
                     background:radial-gradient(circle, rgba(246,165,26,.24), transparent 66%); pointer-events:none}
.gw-card-anim:hover{border-color:var(--gw-anim); box-shadow:0 34px 74px rgba(0,0,0,.5)}

/* 卡片右上角编号水印：纯装饰，绝对定位不占布局 */
.gw-mark{position:absolute; top:clamp(4px,.8vh,14px); right:clamp(16px,1.8vw,30px);
         font-size:clamp(76px,min(9.4vw,13vh),168px); font-weight:900; letter-spacing:-.08em; line-height:1;
         background:linear-gradient(180deg, rgba(35,105,232,.95), rgba(35,105,232,.08));
         -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
         opacity:.20; pointer-events:none; user-select:none; transition:opacity .4s ease}
.gw-card-anim .gw-mark{background:linear-gradient(180deg, rgba(246,165,26,.98), rgba(246,165,26,.06));
                       -webkit-background-clip:text; background-clip:text; opacity:.30}
.gw-card:hover .gw-mark{opacity:.34}
.gw-card-anim:hover .gw-mark{opacity:.46}

.gw-kicker{font-size:clamp(10.5px,1.25vh,12.5px); font-weight:900; letter-spacing:.2em; color:var(--gw-ai)}
.gw-card-anim .gw-kicker{color:var(--gw-anim)}
.gw-card h2{margin:0; font-size:clamp(24px,min(3.3vw,5vh),46px); letter-spacing:-.04em; line-height:1.08}
.gw-lead{margin:0; font-size:clamp(13px,min(1.2vw,1.9vh),17px); line-height:1.65; color:var(--gw-muted)}
.gw-card-anim .gw-lead{color:#c2c7d1}
.gw-fits{margin:0; font-size:clamp(11.5px,1.5vh,13.5px); color:#7d8a9c}
.gw-card-anim .gw-fits{color:#9ba2ae}
.gw-tags{display:flex; flex-wrap:wrap; gap:clamp(6px,.95vh,10px); margin:0; padding:0; list-style:none}
.gw-tags li{font-size:clamp(11.5px,1.5vh,14px); padding:clamp(5px,.95vh,10px) clamp(10px,1vw,16px);
            border-radius:999px; border:1px solid var(--gw-ai-line); background:rgba(255,255,255,.9);
            color:#2a4a78; font-weight:600}
.gw-card-anim .gw-tags li{border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#e9ebf1}
.gw-billing{margin:0; font-size:clamp(12px,1.5vh,14px); font-weight:900; letter-spacing:.01em; color:var(--gw-ink)}
.gw-card-anim .gw-billing{color:#fff}

.gw-card-actions{display:flex; align-items:center;
                 gap:clamp(12px,1.4vw,22px); flex-wrap:wrap;
                 padding-top:clamp(10px,1.7vh,20px); border-top:1px solid var(--gw-line)}
.gw-card-anim .gw-card-actions{border-top-color:rgba(255,255,255,.13)}
.gw-btn{display:inline-flex; align-items:center; gap:clamp(8px,1vw,12px);
        min-height:clamp(42px,6.1vh,58px); padding:0 clamp(18px,1.9vw,30px);
        border-radius:14px; font-size:clamp(13.5px,min(1.15vw,1.9vh),16.5px); font-weight:900;
        text-decoration:none; letter-spacing:.01em;
        transition:transform .3s ease, box-shadow .3s ease, background .3s ease}
.gw-arrow{display:grid; place-items:center; width:clamp(22px,3vh,30px); height:clamp(22px,3vh,30px);
          border-radius:50%; background:rgba(255,255,255,.24); font-size:clamp(12px,1.5vh,15px);
          transition:transform .3s ease}
.gw-btn:hover .gw-arrow{transform:translateX(3px)}
.gw-btn-ai{background:linear-gradient(140deg,#3d80f0,var(--gw-ai)); color:#fff; box-shadow:0 16px 34px rgba(35,105,232,.3)}
.gw-btn-ai:hover{background:linear-gradient(140deg,#4d8cf3,var(--gw-ai-deep)); box-shadow:0 20px 40px rgba(35,105,232,.36)}
.gw-btn-anim{background:linear-gradient(140deg,#ffbd45,var(--gw-anim)); color:#2a1a03; box-shadow:0 16px 34px rgba(246,165,26,.32)}
.gw-btn-anim:hover{background:linear-gradient(140deg,#ffc95c,var(--gw-anim-deep)); box-shadow:0 20px 40px rgba(246,165,26,.4)}
.gw-btn-anim .gw-arrow{background:rgba(0,0,0,.16)}
.gw-card-secondary{position:relative; z-index:2; font-size:clamp(12px,1.5vh,14px); font-weight:900;
                   text-decoration:none; color:var(--gw-ai); border-bottom:1px solid currentColor; padding-bottom:2px}
.gw-card-anim .gw-card-secondary{color:var(--gw-anim)}
/* 整卡可点：CTA 的 ::after 覆盖整卡，次级链接用 z-index 浮在上层 */
.gw-card-link::after{content:''; position:absolute; inset:0; z-index:1; border-radius:inherit}

.gw-compare{display:flex; justify-content:center}
.gw-compare button{display:inline-flex; align-items:center; gap:10px; padding:clamp(8px,1.4vh,13px) clamp(16px,1.6vw,24px);
  border:1px dashed #cbd8e8; border-radius:999px; background:rgba(255,255,255,.8);
  color:var(--gw-muted); font-size:clamp(11.5px,1.5vh,13.5px); font-weight:800; cursor:pointer;
  transition:color .2s ease, border-color .2s ease, box-shadow .2s ease; font-family:inherit}
.gw-compare button:hover{color:var(--gw-ink); border-color:#a7bad4; box-shadow:0 10px 26px rgba(20,34,56,.08)}
.gw-compare i{font-style:normal; color:var(--gw-ai); font-weight:900}

/* ---------- 页脚：一行，含两个体系文字链接（SEO 可达） ---------- */
.gw-footer{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 22px;
           padding:clamp(10px,1.7vh,18px) clamp(20px,4.4vw,64px); border-top:1px solid var(--gw-line);
           background:rgba(255,255,255,.66); color:var(--gw-muted); font-size:clamp(11px,1.35vh,12.5px)}
.gw-footer a{text-decoration:none}
.gw-footer a:hover{color:var(--gw-ai)}
.gw-foot-links{display:flex; flex-wrap:wrap; gap:8px 18px; font-weight:800}

/* ---------- 对比浮层（弹层，不占首屏高度） ---------- */
.gw-dialog{border:0; padding:0; position:relative; width:min(740px,92vw); border-radius:26px;
           background:#fff; color:var(--gw-ink); box-shadow:0 40px 100px rgba(10,20,40,.36)}
.gw-dialog::backdrop{background:rgba(8,14,26,.58); backdrop-filter:blur(5px)}
.gw-modal-body{padding:clamp(22px,3.2vh,36px)}
.gw-modal-body h3{margin:0 0 6px; font-size:clamp(19px,2.2vh,26px); letter-spacing:-.035em}
.gw-modal-sub{margin:0 0 18px; color:var(--gw-muted); font-size:clamp(12px,1.5vh,13.5px); line-height:1.7}
.gw-cmp{width:100%; border-collapse:collapse; font-size:clamp(12.5px,1.6vh,14px)}
.gw-cmp th,.gw-cmp td{padding:12px 13px; border-bottom:1px solid var(--gw-line); text-align:left; vertical-align:top; line-height:1.6}
.gw-cmp thead th{font-size:clamp(11.5px,1.4vh,12.5px); letter-spacing:.04em; color:var(--gw-muted); background:#f8fafd}
.gw-cmp tbody th{width:96px; color:var(--gw-muted); font-weight:900}
.gw-cmp .gw-col-ai{color:var(--gw-ai); font-weight:900}
.gw-cmp .gw-col-anim{color:var(--gw-anim-deep); font-weight:900}
.gw-modal-note{margin:18px 0 0; padding:14px 16px; border:1px solid var(--gw-ai-line); border-radius:16px;
               background:var(--gw-ai-soft); font-size:clamp(12px,1.5vh,13.5px); line-height:1.75}
.gw-modal-note strong{color:var(--gw-ai)}
.gw-modal-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.gw-modal-close{position:absolute; top:12px; right:14px; width:38px; height:38px; border:0; border-radius:12px;
                background:transparent; color:var(--gw-muted); font-size:19px; cursor:pointer; font-family:inherit}
.gw-modal-close:hover{background:#f1f4f9; color:var(--gw-ink)}

/* ---------- 矮屏压缩：保证 1366×768 / 1280×720 也一屏 ---------- */
@media (max-height:820px){
  .gw-nav{height:62px}
  .gw-card{min-height:clamp(240px,42vh,340px); padding:clamp(18px,3.4vh,30px) clamp(20px,2.4vw,32px)}
  .gw-hero h1{font-size:clamp(26px,min(4.6vw,7vh),56px)}
  .gw-mark{font-size:clamp(70px,min(8.4vw,12vh),130px)}
}
@media (max-height:690px){
  .gw-eyebrow{display:none}
  .gw-fits{display:none}
  .gw-tags li{font-size:11px; padding:4px 9px}
  .gw-btn{min-height:40px}
  .gw-mark{display:none}
  .gw-card::after{display:none}
}

/* ---------- 移动端：两卡纵向堆叠，两个 CTA 都在首屏 ---------- */
@media (max-width:860px){
  .gw-nav{height:60px}
  .gw-eyebrow{display:none}
  .gw-hero h1{font-size:clamp(23px,6.4vw,32px)}
  .gw-systems{grid-template-columns:minmax(0,1fr); gap:13px}
  .gw-card{min-height:0; gap:8px; padding:17px; border-radius:22px}
  .gw-card h2{font-size:23px}
  .gw-fits{display:none}
  .gw-tags{gap:6px}
  .gw-tags li{font-size:11px; padding:5px 9px}
  .gw-card-actions{gap:12px}
  .gw-btn{min-height:42px; padding:0 16px; font-size:13px}
  .gw-mark{font-size:56px; opacity:.16}
  .gw-card-anim .gw-mark{opacity:.24}
  .gw-card::before{height:4px}
  .gw-footer{justify-content:flex-start; gap:8px 14px}
}

/* ---------- 极矮屏（360×640 一类小屏）：继续降级，仍然一屏 ---------- */
@media (max-height:680px){
  .gw-nav{height:52px}
  .gw-hero h1{font-size:clamp(20px,5.4vw,26px)}
  .gw-hero p{margin-top:6px; font-size:12px}
  .gw-tags{display:none}
  .gw-card{padding:13px; gap:6px; border-radius:16px}
  .gw-card h2{font-size:21px}
  .gw-lead{font-size:12.5px}
  .gw-compare button{padding:8px 14px; font-size:11.5px}
  .gw-footer{padding:8px clamp(14px,4vw,56px); font-size:11px}
  .gw-btn{min-height:38px; font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
  .gw-card:hover{transform:none}
}